Angular 9 CRUD | Part 1 | Project Creation and Theme Integration

Angular 9 Application Development using PHP and MySQL

0
4624
Angular 9 CRUD

In this article, we will be creating an Angular 9 CRUD 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 9.

The following tools, frameworks, and modules to be required for this tutorial:

  • Node.js (recommended version)
  • Angular 9 CLI
  • 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 9

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

ng v

you can see that we have updated Angular CLI.

Cli Image

Create a Project

Now, you will be able to create a new Angular project using the following CLI command.

ng new ng9CRUD
Project Creation

after creating a new project, you can see the folder structure be like this.

Project Structure

Next, install the following dependencies using the following command via npm.

//Bootstrap
npm install bootstrap --save
//jqueru
npm install jquery --save
//dropify
npm install dropify --save
//Datatables
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. In the script section, you need to import JS files. An example code is given below.

"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "node_modules/bootstrap/dist/css/bootstrap-reboot.css",
  "node_modules/bootstrap/dist/css/bootstrap-grid.css",
  "node_modules/dropify/dist/css/dropify.css",
  "node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.js",
  "node_modules/bootstrap/dist/js/bootstrap.js",
  "node_modules/dropify/dist/js/dropify.js",
  "node_modules/jquery/dist/jquery.js",
  "node_modules/datatables.net/js/jquery.dataTables.js"
]
Angular Json File

Next, you can run the project using the following command

ng serve
Ng Serve Demo
  1. Angular 9 CRUD | Part 1 | Project Creation and Theme Integration
  2. Angular 9 CRUD | Part 2 | Web API Preparation
  3. Angular 7 CRUD | Part 3 | Creating Web Services using HttpClient
  4. Angular 9 CRUD | Part 4 | Display the Products
  5. Angular 9 CRUD | Part 5 | View Single Product Details
  6. Part 6 | Create New Product
  7. Part 7 | Update an Existing Product
  8. Part 8 |Delete an Existing Product