Angular

Basic
 Glossary
1. Angular vs Primitive Web-
Development.
2. Angular Code Structure,
Architecture
3. Modules, Components, Services.
4. Dependency Injection.
5. AOT Compilation.
6. Data Binding.
7. Life Cycle Hooks in Angular.
Angular Vs Primitives
SPA( SINGLE PAGE APPLICATION).
HTML + TS.
TS VS JS.
The debate of Framework vs Library. (Hollywood Principle of Inversion of Control).
3
 Angular CLI & Pre-Requisite

NodeJS
https://nodejs.org/en/download/

Node Package
npm install -g @angular/cli

ng new <project-name>
ng s -o

ng generate c/p/m/r
ng serve or ng s
4
ng s -open
 Angular Code Structure

main.ts 
bootstrapping of browser specific
primary module 
app.module.ts 
declaration 
component 
html, ts. scss/css.

5
Module, Component, Services
Modular Web Development
@NgModule()  Decorator or Annotation
NgModule  imports, exports, declaration, providers
Module loading strategies in Angular

Component 
The Building Blocks

Services 

07/02/2023
6 ADD A FOOTER
 Dependency Injection

Robert Martin said –

High level module should not
depend on low level module.
For inter-dependence and
commonalities they should employ
Abstraction.

e.g.- Brewing Coffee –

Premium and Ground Coffee
Common Job  Brew the coffee
This could be abstracted to services
and injected into both the
components.
7
 AOT Compilation

Ahead Of time

Why not Just in Time(JIT)

TS
Trans compilation
Formation of AST

8
 Data Binding

One Way Data Binding-

Component to view
[variable] = “value”

Two Way Data Binding-

Component to view and view to component
You can even use (on Change) event
[(variable)] = “value”

(event) = “value”
9
Life Cycle Hooks

07/02/2023
10 ADD A FOOTER
Any Questions?

Thank You