Angular 7 just released a few weeks ago, it comes with a few new feature and improvements. In this article, we will be creating an Angular application. I will explain step by step tutorials from scratch and perform CRUD operations. We will use a separate backend using PHP/MySql and accessing by Angular 7.
The following tools, frameworks, and modules are required for this tutorial:
Node.js (recommended version)
Angular 7 CLI
Express and MongoDB API
Terminal (Mac/Linux) or Command Line (Windows)
IDE (Web Strom Recommended)
Wamp Server (Windows)
We will create two separate projects. One is for Angular, and one is for PHP Web API. That means one for frontend and one for the backend.
First, we will install Angular 7 using Angular CLI, and then we will continue to develop the frontend and backend.
Install Angular 7
If you have an older Angular CLI version, then you can run the following command to install the latest versions.
npm install -g @angular/cli
type the following command to check the updated Angular CLI version
you can see that we have updated Angular CLI.
Now, you will be able to create a new Angular project using the following CLI command.
ng new ng7CRUD
after creating a new project, you can see the folder structure be like this.
Next, install the following dependencies using the following command via npm.
npm install bootstrap --save
npm install jquery --save
npm install dropify --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev
You need to import the CSS and JS files into an angular.json file. Into the styles section, you need to import CSS files. Into the script section, you need to import JS files. Example code is given below.
Next, you can run the project using the following command