This document provides an overview of Angular, a framework for building client-side web applications. Angular is developed by Google and uses TypeScript as its programming language. It consists of components, templates, and services. Components control sections of the screen and are defined using metadata. Templates allow binding application data to the DOM. Services contain application logic and can be injected into components via dependency injection.

1. ANGULARANGULAR

2. WHAT IS ANGULARWHAT IS ANGULAR
Angular is a platform that makes it easy to build applications with the web.

3. WHAT IS ANGULARWHAT IS ANGULAR
Angular is a platform that makes it easy to build applications with the web.
Developed by Google

4. WHAT IS ANGULARWHAT IS ANGULAR
Angular is a platform that makes it easy to build applications with the web.
Developed by Google
Uses languageTypeScript

5. WHY TYPESCRIPTWHY TYPESCRIPT

6. TYPESCRIPT (*.TS)TYPESCRIPT (*.TS)
Developed by Microso

7. TYPESCRIPT (*.TS)TYPESCRIPT (*.TS)
Developed by Microso
Superset of JavaScript

8. TYPESCRIPT (*.TS)TYPESCRIPT (*.TS)
Developed by Microso
Superset of JavaScript
Statically typed

9. TYPESCRIPT (*.TS)TYPESCRIPT (*.TS)
Developed by Microso
Superset of JavaScript
Statically typed
Catch a lot of errors/bugs in compile time

10. TYPESCRIPT (*.TS)TYPESCRIPT (*.TS)
Developed by Microso
Superset of JavaScript
Statically typed
Catch a lot of errors/bugs in compile time
More clear inheritance

11. TYPESCRIPT (*.TS)TYPESCRIPT (*.TS)
Developed by Microso
Superset of JavaScript
Statically typed
Catch a lot of errors/bugs in compile time
More clear inheritance
Annotations/Decorator

12. TYPESCRIPT (*.TS)TYPESCRIPT (*.TS)
Developed by Microso
Superset of JavaScript
Statically typed
Catch a lot of errors/bugs in compile time
More clear inheritance
Annotations/Decorator
Advanced autocompletion

13. TYPESCRIPT (*.TS)TYPESCRIPT (*.TS)
Developed by Microso
Superset of JavaScript
Statically typed
Catch a lot of errors/bugs in compile time
More clear inheritance
Annotations/Decorator
Advanced autocompletion
Navigation

14. ARCHITECTUREARCHITECTURE

15. INITIALISATIONINITIALISATION
import { platformBrowserDynamic } from '@angular/platform-brow
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

16. NGMODULENGMODULE
The basic building blocks of an Angular application are NgModules
Every Angular app has at least one NgModule class, the root module, which
is conventionally named AppModule
An NgModule is defined by a class decorated with @NgModule().
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

17. BUILD-IN NGMODULESBUILD-IN NGMODULES

18. COMPONENTSCOMPONENTS

19. @COMPONENT@COMPONENT
A component controls a patch of screen called a view
<root-template>
<header-component></header-component>
<list-component>
<item-component></item-component>
<item-component></item-component>
<item-component></item-component>
</list-component>
<footer-component></footer-component>
</root-template>

20. @COMPONENT@COMPONENT
@Component({
selector: 'app-tag',
templateUrl: './app-tag.component.html',
template: 'inline template'
providers: [ RssInfoService ]
})
export class RssDataComponent implements OnInit {
/* . . . */
}

21. TEMPLATETEMPLATE
<p><i>Some text</i></p>
<ul>
<li *ngfor="let padawan of padawans" (click)="selectPa
{{padawan.githubAccount}}
</li>
</ul>
<app-padawan-detail [padawan]="selectedPadawan"></app-padawan-

22. TEMPLATETEMPLATE
Regular HTML with additional template syntax
<p><i>Some text</i></p>
<ul>
<li *ngfor="let padawan of padawans" (click)="selectPa
{{padawan.githubAccount}}
</li>
</ul>
<app-padawan-detail [padawan]="selectedPadawan"></app-padawan-

23. TEMPLATETEMPLATE
Regular HTML with additional template syntax
Can use data binding to coordinate the app and DOM data
<p><i>Some text</i></p>
<ul>
<li *ngfor="let padawan of padawans" (click)="selectPa
{{padawan.githubAccount}}
</li>
</ul>
<app-padawan-detail [padawan]="selectedPadawan"></app-padawan-

24. TEMPLATETEMPLATE
Regular HTML with additional template syntax
Can use data binding to coordinate the app and DOM data
Can use pipes to transform data before it is displayed
<p><i>Some text</i></p>
<ul>
<li *ngfor="let padawan of padawans" (click)="selectPa
{{padawan.githubAccount}}
</li>
</ul>
<app-padawan-detail [padawan]="selectedPadawan"></app-padawan-

25. TEMPLATETEMPLATE
Regular HTML with additional template syntax
Can use data binding to coordinate the app and DOM data
Can use pipes to transform data before it is displayed
Can use directives to apply app logic to what gets displayed.
<p><i>Some text</i></p>
<ul>
<li *ngfor="let padawan of padawans" (click)="selectPa
{{padawan.githubAccount}}
</li>
</ul>
<app-padawan-detail [padawan]="selectedPadawan"></app-padawan-

26. @DIRECTIVE@DIRECTIVE
Transform DOM based on some conditions/rules
Structural directives
Attribute directives
<li *ngfor="let padawan of padawan
/* . . . */
</li>
<input [(ngmodel)]="hero.name">

27. DATA BINDINGDATA BINDING
Angular supports two-way data binding,
a mechanism for coordinating the parts
of a template with the parts of a
component.
1. Interpolation:
2. Property binding:
3. Event binding:
{{padawan.githubAccount}}
<app-padawan-detail [padawan]="selectedPadawan"></app-padawan-d
<li (click)="selectPadawan(padawan)">...</li>

28. SERVICE/@INJECTABLE()SERVICE/@INJECTABLE()
@Injectable()
export class Logger {
log(msg: any) { console.log(msg); }
error(msg: any) { console.error(msg); }
warn(msg: any) { console.warn(msg); }
}

29. Dependency Injection

30. Autowire/Inject dependencies
@Injectable({
providedIn: 'root'|ModuleName,
})

31. Autowire/Inject dependencies
@Injectable({
providedIn: 'root'|ModuleName,
})
@NgModule({
providers: [
BackendService,
Logger
],
...
})

32. Autowire/Inject dependencies
@Injectable({
providedIn: 'root'|ModuleName,
})
@NgModule({
providers: [
BackendService,
Logger
],
...
})
@Component({
providers: [
BackendService,
Logger
],
...
})

33. THANKSTHANKS