Angular Promises:

Promises has been added in ES6.

Promises are async or parellal flow of execution which can handle single event at a time.

e.g.: 1...2...3...4...5... ===> observable response

12345 ====> Promise response

Promises gives only one value.

Promises has two states:

Running state:

resolve(): It means promise has been successfully executed.

reject(): It means promise has not been successfully executed.

pending state:

promise is yet to execute.

promises can not be cancelled.

Promises are used to handle http calls.

*** Observable Vs Promise:

Obs: Can handle multiple events at a time. prom: can handle single event at a time.

obs: lazy in nature prom:quicker in nature.

obs: obs are cancellable. prom: are not cancellable.

obs: came from package RxJS. prom: added in ES6.

obs: need to subscribe. prom: no need to subscribe

obs: can handle next, complete, error prom: can handle either resolve or reject.

Angular Routing:

Angular Routing is responsible for SPA.

Using routing we can navigate from one component to another component.
router cames from @angular/router.

1. Routes: It is an array of objects which contanins path and mapped component.

2. path: string which specifies route of the component.

3. routerLink: Used to navigate from one component to another component from component.html.
4. router.navigate: Used to navigate from one component to another component from component.ts
based on business logic.

5. router.navigateByUrl: Used to navigate from one component to another component from

component.ts based on business logic.

6. wildcard: It is used to handle mismatch path. Wildcard should always at the bottom of routes.

7. redirectTo: Used to navigate to existing path or component. .

Angular Routing:

Inter component communication with Routing:

There are two ways to recieve the data from routing.

1. Route Param: Will get direct Values

2. Param Map: Will get data in terms of Observables we need to subscribe it.

https://jsonplaceholder.typicode.com/users

Angular Guards:

Guards are used to protect the web application from entering into the particular page.
Used for authentication purpose.
Guards will also ask for the permission while leaving any of the component.
can load/fetch the data before landing into the component.
we can create the guards with the help of command: ng g g guardName

Below are the types of Guards:

1. CanActivate: This guard will give permission to enter into component or not.

2. CanDeactivate: This guard will ask permission to leave from component or not.

3. CaActivateChild: Used to give the permission to enter into child routes.

4. Resolve: This guard will fetch the information before entering into the component.

Intercomponent communication:

Process of sending data from one component to another component is called as intercomponent
comm.
There are two chances of component communication.
1. If component are in parent and child relationship.
2. If component are not in parent and child i.e. irrelated component.

* parent and child communication:

 1. @Input:
It is a decorator used to send the data from parent to child component.
It uses attribute or property binding.

2. @Output:
It is a decorator used to send the data from child to parent component.
It uses event binding with event emmitter.

Inter Component Comm:

3) @ViewChild():
It is used to send the data from child to parent.
It is same as @Output : in @Output only one variable will be passed from child to parent but
in case of @ViewChild we will get
complete control of child component into
parent component so that we can access any properyt or method.

important is that we can fetch the data of child inside parent in ngAfterViewInit method only.

* Intercomponent communication of Sibling or non related Component(i.e. with the help of service):

Angular Lazy Loading:

www.demowebsite.com
complete website data: 5 mb
The process of loading complete application altogher is called as Eager Loading.
it will take maximum time to load the application.

The process of breaking complete application modular wise and loading module by module is called as
lazy loading.
It will take less time to load the application.
if there is any chnage in module only that module will be rebuild and reload at UI. So here also we are
going to decrease of load time.
And because of above methods lazy loading is going to be faster than eager loading.
home: 200kb
login : 100kb
loan : 300kb
other: 1.1 mb

Intercomopnent Communication ways in Angular:

1. with the help of @input and @output if components are parent and child.

2. @viewchild if components are parent and child.

3. Using service with the help of special operators.

4. Using Routing.

5. Using local storage and session storage

Third Party Library Installation:

prime Ng:
go to : https://www.primefaces.org/primeng/setup

npm install primeng --save

npm install primeicons --save

go to angular.json under style part and add:

"styles": [
"src/styles.css",
"./node_modules/primeicons/primeicons.css",
"./node_modules/primeng/resources/themes/lara-light-blue/theme.css",
"./node_modules/primeng/resources/primeng.min.css"
],

restart your application.

Angular Deployment :

Deployment consist of two parts:

1. Transpilation: converting TS code in JS code.
2. Compilation: Converting JS code into minified JS code.

Angular provides above both process by using single command: ng build

Angular Provides two types of compilation:

Any application compiles inside the browswer during the runtime.
1. JIT (Just in time compilation):
If we change small part of code then entire code will be compiled once again.
JIT compiler was used till Angular 12 version.

2. AOT (Ahead of time compilation):

If we change small part of code then only that part will be compiled not all other code.
From Angular 13 onwards angular provides AOT as by default compilation option.
Before angular 13, JIT compilation was by default and we need to pass the flag to compile our
code with the help of AOT.
i.e ng build --aot (not required from angular 13 and above).
Benefits:
1. Faster rendering/ minimum loading time.
2. Less API calls.
3. Minimizing the errors.
4. Better security.

Webpack: Converting our whole application small chunks is called as webpack.

Angular Versions:

Different Versions:
1: Angular JS ==> It was completely based on JS.

2,4,5,6,7,8,9,10,11,12,13,14
 There is no angular version 3 as it was exceeding the version of router. So to avoid the
confusion they decided direcly release angular 14.

Different Env :
Local: Where we can do our development. localhost:4200

dev: Once ur development complete, developer is going to deploy the code at dev env where
developer as well as tester can test the application.
e.g. www.onlinesbi-dev.com

sit: This the staging env used to test the application by tester as well as developer.
e.g.: www.onlinesbi-sit.com

uat: Here client as well as manager can test the code and raise the bugs if found any.
e.g.: www.onlinesbi-uat.com

prod: This is the final env which will be accessed by end user.
e.g. www.onlinesbi.com

Angular 14 Features:

1. Auto compilation: Whenever we create any new basic blocks of angular using CLI then it will
give the suggestions
but the problem is that it will work on only gitbash and for linux user.

2. Strictly typed forms: Till now whevener we are creating formcontrols so we are not able to
give stict type to the field but from
angular 14 we can give the strict type.

3. Standalone components: Earlier we need to import components into their respective

module but components from that module will also loaded inside the dom
Which takes unnessary space and time inside the DOM. So
angular has provided new feature
i.e. standalone components which will be not required to
register in module it will be loaed on demand.

4. Enhanced Template Diagnostic :

As of now we were not able to capture the error in html file for that we need to run
the file.
So from angular 14 it is also giving error warning in html file.

5. Page title accessibility:

In the routing we were giving path and component, but from angular 14 onwards we
can pass page title as well.

Upgrading Angular:

https://update.angular.io/
 Angular Unit Test Cases:

There are three types of tests:

1. Unit Tests
2. Integration tests
3. End-to-end test

Unit Testing in angular :

It is a process of exminining or testing the specific part of application to make sure it is working fine or
not.

Benefits:

1. Chances of less error after deployment of the code.

2. Code refactoring for testing purpose.
3. If we are adding any new feature to the application then will easily understand our
application is breaking or not at the level of development.

To write an angular test cases we require two major things :

1. Jasmine:
It is an open sourse testing framework/ library.
Using the Jasmine we can write the test cases.
Jasmine provides few important methods:
it(): Declare a perticular test.
describe(): It is suite for test the it().
expect(): It is used to expect or compare the result value.

2. Karma:
It is runnner used to run/ execute unit test cases.
It will provide result as well as code coverage in terms of %.

To test the application we have command: ng test

To see the code coverage we have the command: ng test --code-coverage

Angular Concepts:

1. ng-template:

ng-template is template element used to hadle with stuctural directives. i.e. *ngIf, *ngFor,
*ngSwitch

It is used to handle the else block.

2. ng-container:

This will allow to use multiple directives together without any extra div.

API Integration:

1. Used to store the data at backend.

 2. Used to fetch the data from backend.

3. Used to update the data.

4. Used to delete the data.

HTTP Response Code:

200: Ok got communication and got the data.

204: No content available.

400: Bad request means req api and backend api are not matching with each other.

401: Unauthorized access of the API.

404: API not found

500: Internal Server Error. Means connection issue bcoz of internet and all.

403: Forbiddent means communication us happening but due to unauthorization not able to serve the
request.

Network Tab all options like

headers: Http headers delatils like api type get, post, status code.
payload: request body/ data (from angular side)
preview: response body in proper json format( From backend)
Response: response body

Application: Storage options.

Source: Can apply debugger to see executoion line by line.

Element: All html, css bs stuffs.

Console: normal console to see the executoion or data.

Angular Backend Communication:

Authorization using JWT:

All in one Insurance:

1. Login Screen/ register screen : User should be able to login/register with
credetials. and then will navigate to Home screen.

2. Home Screen : Once user navigate to home screen, user can authenticate
their Adhaar and PAN with govt site.
On Home Screen: Below tabs will be there.

a) Authenticate User
b) Your own policies(this will be drop down like car insurance, term,
medical insurance)
c) Company Products
c) India's top to In leading companies plans
d) Compare
e) Ask expert for best plan (create a form inside that expert will call
on that)
f) Why choose our insurance: quick and eacy, low premium, easy claims
g) 24 *7 support page.
h) Contact
i) Govt Crop Insurance

Url:

https://www.policybazaar.com/

https://preview.themeforest.net/item/insubex-insurance-consulting-
angular-template/full_screen_preview/29094666?
_ga=2.248680517.393113280.1664177829-
398429859.1659406914&_gac=1.191346008.1663850152.Cj0KCQjwj7CZBhDHARIsAPPWv3fqQ
LfXpJ2X87lxsavOxbzlKtCqRQa1wg_udgtpeb-TFy9FH9qCO_oaAnSQEALw_wcB

https://truz-ng.envytheme.com/about

https://themeforest.net/search/insurance%20angular

https://www.acko.com/health

Steps:

Create an new angular project with routing.

Install primeng as third party library.

Create one module inside: Home module and implement lazy loading inside
that.

Create three componenents inside home module.

1. Homepage comp
2. login comp
3. register comp.

create one folder : Services

put all our services inside this folder.

create one folder : commonOperations

put all custom directives and custom pipes inside this folder.
1. Client : Acko General Insurance.
2. Company: CodeNG, Claritech Solutions.
3. Emp : 20 plus.
4. Front End Developer: 12
5. Backend Developer: 5
6. Tester: 2
7. Manager: 1.

Requirement:
General term insurance
Health Insurance
Car Insurance
Home Insurance

* Software Development Method:

1. Waterfall Method: Complete development will be done and then project will be handover to the
client.

2. Agile Method: Complete application will be devided based on requirements in terms of sprints.
And application will be delivered to client sprint wise.

* Agile Process/ Method:

In agile process we need to follow sprints ( Developement cycyle)
Normally sprint consist of 15 or 21 or 30 days.

Agile Steps:
1. Business Analyst: responsible for communication with client and taking the requirements.
2. BA will collect CRS (Customer/Client Requirement Specification) Document from the client.
3. BA and Scrum master will convert CRS into SRS( Software Requirement Specification).
4. BA and Scrum Master will convert SRS into different sprints based on client features.
5. Scrum Master will create User stories of each sprint.
6. Scrum master will start the sprint.

Scrum Master: Suraj D.

Scrum Team: 19

Sprint: Collections of user stories used to achieve specific feature.

Consider that Sprint: Nov_2022 (22 working Days)

1 Nov to 3 Nov: Sprint Planning. (Scrum master and Scrum team will have meeitng together
and decide which user storeis we can complete).
4 Nov to 15 Nov: Development will be happen.( Developer)
16 Nov: Application will be deployed to dev/ sit env.
18 Nov to 20 Nov: Application testing (tester). tester will raise bugs/ defects.
23 Nov to 24 nov: Developer will work on defects.
25 Nov: Developer will deploy once again at dev / sit env.
26 Nov: Tester will test all the bugs/ defects allong with all functionality.
 27 Nov: Will have demo to the Client.
28 Nov: Once we got permission from client then we will deploy application to the prod env.
29 Nov: Sprint Retrospective: Will have the discussion on complete sprint activity
i.e. what went good and what went wrong in current sprint so that can improve in
next sprint.
30 Nov Application testing.

Next Sprint: Dec_2022

1 Dec to 3 Dec: Sprint Planning.

........
........
........
like wise it will continue.

Scrum meeting: It will happen on all days of sprint.

Every scrum member has to give their updates. They have to
give answers of three questions.
1. What u have done today ?
2. What are you going to do on tomorrow ?
3. Is there any roadblock for u ?