#Complete Angular project

This project was build on Angular, covering the concepts of angular framework

Concepts covered :

1. Prerequisites
2. Initializing project
3. Components architecture
4. Data Binding
5. Angular services & Dependency Injection
6. Angular Routing
7. Angular template drive Forms
8. RxJS concepts
9. Client-Server communication
10. Http Client
11. Animations and Directives

Prerequisites

1. Install node on your machine from https://nodejs.org.
2. Check the versions using

node -v npm -v

3. Install angular-cli using below command in terminal

npm install -g @angular/[email protected]

Note : Use sudo on a Mac and Linux

Initializing project

1. At a convenient location on your computer, create a folder named Angular and move into that folder.
2. Clone or Download this repo and open in any editor.
3. Open terminal, Move to root folder named Confusion, where package.json is present.
4. Install the node_modules by running below comamnd.

npm install

5. Build the project by runnning below commaand

ng build / npm run build

6. To make the application up and running, run below command

ng serve / npm run serve

7. Open another terminal and move to json-server folder and run the below command to run the json-server using db.json. So that data will be available to the application for client-server communication.

json-server --watch db.json -d 2000

Note : Refer more for Client-Server communication

Components and Architecture

Below are the components used in the project. Each component has been explained along with its features and position to understand easily.

1. about --> Router link to the about button in header
2. contact --> Router link to the contact button in header
3. dishdetail --> A subcomponent which will be executed on click on any item on menu.
4. footer --> Footer contains links , address and social media icons redirection in the web application which will be present for each page.
5. header --> Contains nav bar with icon and login button to access application.
6. home --> landing page for application showcasing the 3 cards with image and details.
7. login --> A modal with input fields to enter username and passcode
8. menu --> Router link to the about button in header. This contains 4 items which are dishes (each item is from dish-details component)

Data Binding

• All over the project this feature has been used to display the data like names and details regarding dishes in several pages like home, about, menu, contact.
• Used for communication between the components
• Check child parent communication so that you will get an insight using @input and @output
• You can check the code in html which looks with double braches {{variable here}} Angular services & Dependency Injection below is one of the particular instance for data binding

Used _Data bindingto update the Angular application to enable you to select any dish from the menu and show its details

Angular services

Below are the services and their use cases in the application. dish.service --> To get the details for a dish with respect to their id's feedback.service -->To add a feedback/ comment to a separate dish which will be available under menu if we select one dish leader.service --> To get the list of leaders or featured leaders, so that we can display in the home page. process-httpmsg.service --> To return the error message for each of the api call in other services. promotion.service --> To get the list of promotions or featured promotions in the home page .

Angular Routing

The initial point for routing starts with <router-outlet></router-outlet> The routing concept has been used throughout application for several buttons in the navbar like menu, home.

• In routes.ts file under app-routing, you can find the paths for each annd every component.
• We can even use routingmodule if we have several child components under a component.
• You can use routerLink="/contactus" for buttons.
• To make it active i.e to hightlight the current button according to page, we use routerLinkActive="active"
• We can send id for other components using router params like [routerLink]="['/dishdetail', dish.id] which is being used in menu component.

Angular template drive Forms

• Added material forms, in the login component.
• You can check the <form> tag code in the login component, which is being
• There is a basic validation in the login component. which is being added.
• Added features like reset forms, reactive forms in the contact page of the application.
• Can check the contact.component.ts for the form object where the validations and group of forms have been added.

Promises

• Promises has been used in services. Configured Services to Return Promises using .resolve
• Handled promises in several components for example in menu component get dishes which is being handled using '.then'
• Used setTimeout for promises to simulate time delay to show the response. example in dish.service.ts

RxJS concepts

Used sevaral RxJs concepts using import of library like of, delay,Observable, switchMap,throwError . Will provide the reference so that we can check the real time scenario for the usage.

• Used of in services and converting them to promise using toPromise like below.

getDish(id: number): Promise {

return of(DISHES.filter((dish) => (dish.id === id))[0]).pipe(delay(2000)).toPromise(); }

• Delay concept has been used to return the response with 2000ms delay as shown above.
• When ever we use observable concept we need to subscibe the data instead of then, to subscribe to the observable returned from the service:
• throwError --> concept used to handle errors, which is being used in process-httpmsg.service.ts.
• Check the services how ProcessHTTPMsgService is being used to handle the error messages coming from the api's

Client-Server communication

• Set up a simple server that makes data available for clients
• Access the data from the server using a browser.
• Use the json-server as a simple static web server.
• json-server is a node module, and hence can be installed globally by typing the following at the command prompt: >npm install json-server -g
• Move to this folder in your terminal window, and type the following at the command prompt to start the server:

json-server --watch db.json -d 2000

• This should start up a server at port number 3000 on your machine. The data from this server can be accessed by typing the following addresses into your browser address bar: http://localhost:3000/dishes http://localhost:3000/promotions http://localhost:3000/leaders http://localhost:3000/feedback

Http Client

• Use Angular HTTP client to obtain data from a server
• Process the HTTP response from the server to retrieve the data and use it in your application.

import { HttpClient } from '@angular/common/http';

Once after we importing HTTP client assign a base URL as the json server is up with localhost:3000 Changed the service by using the http instead of using of

getDishes(): Observable<Dish[]> { 
return  this.http.get<Dish[]>(baseURL + 'dishes');
}

• Used the HttpErrorResponse for error handling in process-httpmsg.service.ts

Animations and Directives

• In highlight.directive.ts you are able to see two functions which named onMouseEnter and onMouseLeave.
• On using the core modules, we are able to highlight the element based on the css which is being there in styles.scss with name .highlight
• Custom animations are being added , You can check more animations in component decorator in .ts files of components for example in dishdetail.component.ts.

Note : I have completed coursera project under ## Full Stack Web Development with Angular. The contents has been refered once after I completed the course.