{"id":315,"date":"2020-08-20T15:23:23","date_gmt":"2020-08-20T13:23:23","guid":{"rendered":"http:\/\/www.myblog.nguenkam.com\/?p=315"},"modified":"2020-11-10T14:02:42","modified_gmt":"2020-11-10T13:02:42","slug":"angular-app-with-php-backend","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2020\/08\/20\/angular-app-with-php-backend\/","title":{"rendered":"Angular app with PHP backend"},"content":{"rendered":"\n

Learn to code Angular app with PHP backend<\/h3>\n\n\n\n

In the following tutorials, you’ll learn how build a whole application , with Angular (Frontend ) & PHP ( Backend) . We will create an easy CRUD application ,to add, update, and delete items.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

#<\/a> 1. Install Angular<\/h4>\n\n\n\n
> npm install -g @angular\/cli\n<\/code><\/pre>\n\n\n\n
> ng new cars<\/code><\/pre>\n\n\n\n
The first command installs the Angular\/CLI<\/strong> working environment, and the second generates a new Angular app with the name of cars. (ps: You must have Nodejs\/ npm installed on your computer).<\/p>\n\n\n\n
Once the installation has finished, cd into the app’s folder and then serve the app:<\/p>\n\n\n\n
> cd cars\/\n> ng serve --o<\/code><\/pre>\n\n\n\n
It may take a while until the installation finishes and the app launches, but if everything is working according to plan you need to see Angular’s default homepage.<\/p>\n\n\n\n
\"ng-app\"<\/figure>\n\n\n\n
To give the app a nice look, include the link to the Bootstrap’s (CSS framework) stylesheet in the index.html<\/strong> header.<\/p>\n\n\n\n
src\/index.html<\/u><\/strong><\/p>\n\n\n\n
<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>Cars<\/title>\n  <base href=\"\/\">\n  <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.1.3\/css\/bootstrap.min.css\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  <link rel=\"icon\" type=\"image\/x-icon\" href=\"favicon.ico\">\n<\/head>\n<body>\n  <app-root><\/app-root>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Here I use a CDN as the source of the stylesheet.<\/p>\n\n\n\n
#<\/a> 2. Add the HttpClientModule to the project<\/h4>\n\n\n\n
Angular<\/strong>‘s preferred way to communicate with the server side is through the HttpClientModule<\/strong> module.<\/p>\n\n\n\n
To be able to use the HttpClientModule<\/strong>, you need to import it into the root module of the application:<\/p>\n\n\n\n
src\/app\/app.module.ts<\/u><\/strong><\/p>\n\n\n\n
import { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\nimport { HttpClientModule } from '@angular\/common\/http';\n\nimport { AppComponent } from '.\/app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    HttpClientModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\n\n\n\n
It is not enough to import the module you should also add it’s symbol to the imports array.<\/p>\n\n\n\n
After importing, you will be able to use the module in the various parts of the application, such as in the components and services.<\/p>\n\n\n\n
#<\/a> 3. Add the Car class<\/h4>\n\n\n\n
A car is not just a thing, and since you work with TypeScript, you better define the type. You will do this with the Car class, which you need to add to the app. For this, manually create a car.ts<\/strong> file in the src\/app<\/strong> folder, and put the following code inside:<\/p>\n\n\n\n
src\/app\/car.ts<\/u><\/strong><\/p>\n\n\n\n
export class Car {\n  constructor(\n    model: string,\n    price: number,\n    id?:   number) {}\n}<\/code><\/pre>\n\n\n\n
Besides the price and model name, the class contains an id which is an optional field, hence the question mark.<\/p>\n\n\n\n
#<\/a> 4. Place the method to communicate with the server in a service<\/h4>\n\n\n\n
While you can call AJAX directly from the components, this is not a best practice because you may want to use the same methods in different parts of the application. Therefore, it is better to put these methods in a dedicated service. In our case, it will be a service with the name of car.service.<\/p>\n\n\n\n
To generate the service run the following command in the CLI:<\/p>\n\n\n\n
> ng generate service app\/car --flat --spec=false<\/code><\/pre>\n\n\n\n
The command includes two flags:<\/p>\n\n\n\n
–flat<\/strong> because you want the service to contain only files instead of being locked in a folder.<\/p>\n\n\n\n
–spec=false<\/strong> to prevent the generation of a unit test file.<\/p>\n\n\n\n
Inside the generated file you will see the following code:<\/p>\n\n\n\n
src\/app\/car.service.ts<\/u><\/strong><\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class CarService {\n}<\/code><\/pre>\n\n\n\n
The Injectable decorator allows the service to participate in the dependency injection system<\/strong>. Which means that on the one hand, it can have dependencies (i.e., the HttpClientModule module), and on the other hand, it can be injected, for example into the components.<\/p>\n\n\n\n
But what is a dependency? A dependency<\/strong> is when one class depends on another for its function.<\/p>\n\n\n\n
A <\/em>dependency<\/strong> is when one class depends on another for its function.<\/em><\/p>\n\n\n\n
Angular’s way of managing the app dependencies is through the Dependency Injection<\/strong> system or DI<\/strong>, whose job it is to create for us the classes that we need in the right place at the right time.<\/p>\n\n\n\n
A common practice of creating objects in object-oriented programming is by using the new keyword. For example, if you are interested in an HttpClientModule object, then you might be tempted to write the following code:<\/p>\n\n\n\n
private http = new HttpClient<\/code><\/pre>\n\n\n\n
But this is not the Angular way because when developing with Angular it is strongly advised to use the Dependency Injection system to manage the objects that the class needs.<\/p>\n\n\n\n
when developing with Angular it is strongly advised to use the Dependency Injection system to manage the objects that the class needs.<\/em><\/p>\n\n\n\n
For the CarService to function, it needs to inject the HttpClientModule dependency and import the various classes needed to manage the communication with the server.<\/p>\n\n\n\n
Replace the code inside the service file with this:<\/p>\n\n\n\n
src\/app\/car.service.ts<\/u><\/strong><\/p>\n\n\n\n
import { Injectable } from '@angular\/core';\nimport { HttpClient, HttpErrorResponse, HttpParams } from '@angular\/common\/http';\n\nimport { Observable, throwError } from 'rxjs';\nimport { map, catchError } from 'rxjs\/operators';\n\nimport { Car } from '.\/car';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class CarService {\n  constructor(private http: HttpClient) { }\n}<\/code><\/pre>\n\n\n\n
The dependency injection is done in the constructor, by defining the private HTTP variable as belonging to the HttpClient type, which instructs Angular to handle the creation of the HttpClient object for us by using the DI.<\/p>\n\n\n\n
Importing from the RxJS<\/a> library allows us to work with the Observable<\/strong> that Angular wraps around the data that is coming from the server. Using an Observable<\/strong> instead of a standard callback to handle asynchronous code offers several advantages, including multiple operators that facilitate data handling, as well as the ability to listen to data that the server emits repeatedly over time.<\/p>\n\n\n\n
#<\/a> 5. Displaying the list of cars coming from the server<\/h4>\n\n\n\n
To get the list of cars coming from the server, write the following code inside the class:<\/p>\n\n\n\n
src\/app\/car.service.ts<\/u><\/strong><\/p>\n\n\n\n
baseUrl = 'http:\/\/localhost\/api';\ncars: Car[];\n                \nconstructor(private http: HttpClient) { }\n                \ngetAll(): Observable<Car[]> {\n  return this.http.get(`${this.baseUrl}\/list`).pipe(\n    map((res) => {\n      this.cars = res['data'];\n      return this.cars;\n  });\n}<\/code><\/pre>\n\n\n\n
The getAll() method returns the list of cars wrapped in an Observable:<\/p>\n\n\n\n
getAll(): Observable<Car[]> {\n}<\/code><\/pre>\n\n\n\n
We use the HttpClient get() method to fetch the data from the server side:<\/p>\n\n\n\n
getAll(): Observable<Car[]> {\n  return this.http.get(`${this.baseUrl}\/list`)\n}<\/code><\/pre>\n\n\n\n
The data returned from the server is the list of cars wrapped inside an external array (a common case when consuming APIs).<\/p>\n\n\n\n
This is how the data returned from the server looks like (we’ll get to writing the code for the server side in a short time):<\/p>\n\n\n\n
{\n  data: \n  [\n    {\n      id: \"1\",\n      model: \"subaru\",\n      price: \"120000\"\n    },\n    {\n      id: \"2\",\n      model: \"mazda\",\n      price: \"160000\"\n    }\n  ]\n}<\/code><\/pre>\n\n\n\n
Since you are interested only in the list of cars in the innermost array you need to extract the list. For this job, you will use the RxJS pipe() operator that you need to chain to the get() method. Inside the pipe operator, you will map the array of cars that come from the server side to the service’s local cars variable.<\/p>\n\n\n\n
src\/app\/car.service.ts<\/u><\/strong><\/p>\n\n\n\n
getAll(): Observable<Car[]> {\n  return this.http.get(`${this.baseUrl}\/list`).pipe(\n    map((res) => {\n      this.cars = res['data'];\n      return this.cars;\n    });\n}<\/code><\/pre>\n\n\n\n
So far, you’ve seen what to do when the data is OK, but what happens if the server side returns an error code. For example, 404, not found, or 500 in case of server error? In these cases, the getAll() method needs to call another one of Angular’s methods, catchError():<\/p>\n\n\n\n
src\/app\/car.service.ts<\/u><\/strong><\/p>\n\n\n\n
getAll(): Observable<Car[]> {\n  return this.http.get(`${this.baseUrl}\/list`).pipe(\n    map((res) => {\n      this.cars = res['data'];\n      return this.cars;\n  }),\n  catchError(this.handleError));\n}<\/code><\/pre>\n\n\n\n
catchError() has the parameter of the method that needs to handle the errors, handleError:<\/p>\n\n\n\n
src\/app\/car.service.ts<\/u><\/strong><\/p>\n\n\n\n
private handleError(error: HttpErrorResponse) {\n  console.log(error);\n \n  \/\/ return an observable with a user friendly message\n  return throwError('Error! something went wrong.');\n}<\/code><\/pre>\n\n\n\n
The error handling includes the throwing of a general error message and a console.log() for debugging purposes.<\/p>\n\n\n\n
Note that in order for the observable to work, it is not enough that you have the get() method in the service, you also need to actively send the data to the component.<\/p>\n\n\n\n
#<\/a> 6. The code in the component which subscribes to the data<\/h4>\n\n\n\n
To be able to display the data to the client, you need a method inside the component which subscribes to the data that the service fetches from the server. Write the following code inside the component file:<\/p>\n\n\n\n
src\/app\/app.component.ts<\/u><\/strong><\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\n\nimport { Car } from '.\/car';\nimport { CarService } from '.\/car.service';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: '.\/app.component.html',\n  styleUrls: ['.\/app.component.css']\n})\nexport class AppComponent implements OnInit {\n  cars: Car[];\n  error = '';\n  success = '';\n        \n  constructor(private carService: CarService) {\n  }\n        \n  ngOnInit() {\n    this.getCars();\n  }\n        \n  getCars(): void {\n  }\n}<\/code><\/pre>\n\n\n\n
The variable cars inside the component stores the array of cars retrieved from the server.<\/p>\n\n\n\n
In the constructor, you inject the carService dependency so that the service will be available to all the methods of the controller as soon as Angular creates an object out of the controller.<\/p>\n\n\n\n
Inside the ngOnInit() lifecycle hook, you call the getCars() method just after the creation of the controller by Angular.<\/p>\n\n\n\n
ngOnInit is a special lifecycle hook provided by Angular that runs immediately after the constructor finishes injecting the dependencies, so it is a good place to get the array of cars into the controller.<\/p>\n\n\n\n
Let’s add the getCars() method that subscribers to the data that comes from the service:<\/p>\n\n\n\n
src\/app\/app.component.ts<\/u><\/strong><\/p>\n\n\n\n
getCars(): void {\n  this.carService.getAll().subscribe(\n    (res: Car[]) => {\n      this.cars = res;\n    },\n    (err) => {\n      this.error = err;\n    }\n  );\n}<\/code><\/pre>\n\n\n\n