Angular
Break the ice
![](https://s3.amazonaws.com/media-p.slid.es/uploads/530295/images/5535683/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/530295/images/5535685/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/530295/images/5535689/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/530295/images/5535691/pasted-from-clipboard.png)
First, let's flashback a bit
Typescript
- Superset of javascript
- Transpiled language
- Created by Microsoft
![](https://s3.amazonaws.com/media-p.slid.es/uploads/530295/images/5535631/pasted-from-clipboard.png)
Reactive Programming
![](https://s3.amazonaws.com/media-p.slid.es/uploads/530295/images/3097907/pasted-from-clipboard.png)
- Streams
- Observables
- Subscribe
- Operators
![](https://s3.amazonaws.com/media-p.slid.es/uploads/530295/images/5535633/pasted-from-clipboard.png)
aNGular-CLI
- Auto-generating code
- Three-shaking code
- Bundling
- Development server
ng new my-project
ng serve -o
ng generate component
ng update
Angular Console
![](https://s3.amazonaws.com/media-p.slid.es/uploads/530295/images/5535638/pasted-from-clipboard.png)
StackBlitz
![](https://s3.amazonaws.com/media-p.slid.es/uploads/530295/images/5535657/pasted-from-clipboard.png)
Stackblitz + Github
Module
import { NgModule } from '@angular/core';
import { NameComponent } from './name.component';
@NgModule({
imports: [],
exports: [],
declarations: [NameComponent],
providers: [],
})
export class NameModule { }
Templates
<div>
<div class="header">
<h2>My Angular App</h2>
</div>
<div class="content">
<label for="name">Name</label>
<input id="name" type="text" [(ngModel)]="name">
<p>Those people passed by:</p>
<ul>
<li*ngFor="let name of list">
{{name}}
</li>
</ul>
</div>
<div class="footer" [disabled]="!name">
<button *ngIf="name" (click)="greet()">Greet</button>
</div>
</div>
Components
import { Component, OnInit } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'selector',
templateUrl: 'feature.component.html'
})
export class FeatureComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
Services
import { Injectable } from '@angular/core';
@Injectable()
export class ServiceNameService {
constructor() { }
}
Hands
ON
TIME
![](https://s3.amazonaws.com/media-p.slid.es/uploads/530295/images/5535674/pasted-from-clipboard.png)
Cheatsheet
[attribute]="expression"
(event)="callback"
[(ngmodel)]="variable"
{{variable}}
*ngIf="expression"
*ngFor="let <var> of <array>"
SPA
Single page application
Auction App
![](https://s3.amazonaws.com/media-p.slid.es/uploads/530295/images/3097870/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/530295/images/3097893/pasted-from-clipboard.png)
Component Based
Routing
Change content without leaving the page
Welcome to
Angular World
Thank you
Angular Overview
By Mateus Carniatto
Angular Overview
- 611