Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Angular2
Uses JAVASCRIPT
To develop
REACTIVE
SPAs.
AND It's a FRAMEWORK
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Angular2
Uses JAVASCRIPT
To develop
REACTIVE
SPAs.
AND It's a FRAMEWORK
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
ES5
ES6
TS
what you know as JS
what you SHOULD know as JS
TypeScript
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
ES5
plain ol' javascript
supported by all browsers
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
ES6
modules
classes
()=> // keeps 'this' in your function
`Hello ${name}`
Promise
...
OR ES2015
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Typescript
decorators
typings
injection
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
compatibility
Currently ES5 completely supported
ES6 partially supported
Babel & Traceur transpilers
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Angular2
Uses JAVASCRIPT
To develop
REACTIVE
SPAs.
AND It's a FRAMEWORK
Components
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
<bw-button
color = "white"
[icon] = "buttonIcon"
[label] = "buttonLabel"
(click) = "delete($event)"
[(isProcessing)] = "buttonIsProcessing">
</bw-button>
@Component({
selector: 'bw-button',
templateUrl: 'button.component.html',
styleUrls: ['button.component.scss'],
})
export class ButtonComponent implements OnInit {
@Input() color: string;
@Input() icon: string;
@Input() label: string;
@Input() isProcessing: boolean = false;
@Output() isProcessingChange: EventEmitter<boolean> = EventEmitter<boolean>();
constructor() {}
ngOnInit() {}
}
Directives
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
<div
bwCollapsible
[(isCollapsed)] = "isCollapsed"
#collapsible>
This is content
</div>
<span
(click) = "collapsible.toggleCollapse()">
toggle
</span>
@Directive({
selector: '[bwCollapsible]',
})
export class CardContentDirective {
@Input() isCollapsed: boolean = false;
@Output() isCollapsedChange: EventEmitter<boolean> = EventEmitter<boolean>();
toggleCollapse(value: boolean){
this.isCollapsedChange.emit(value);
}
}
Services
TitleService
ApiService
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
@Injectable()
export class TitleService {
private currentTitle: string;
private titleSubject: Subject<string> = new Subject<string>();
private title$: Observable<string> = this.titleSubject.asObservable();
constructor(
private translateService: TranslateService,
private docTitle: Title
) {
// on first load wait for language to be loaded
// translation language parameter seems to have no effect on the result
this.translateService.getTranslation('en')
.subscribe(lang => this.setTitle(this.currentTitle));
this.title$
.subscribe(title => this.translate(title));
}
setTitle(title: string) {
this.currentTitle = title;
this.titleSubject.next(title);
}
private translate(title: string) {
this.translateService
.get(title)
.first()
.subscribe(str => this.docTitle.setTitle(str));
}
}
Pipes
{{ 4815162342 | date }} Mon, 03-Aug-22 01:05:42
{{ 4815162342 | number }} 4,815,162,342
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Angular 1.4
Angular2 introduction
@subarroca
MV*
two-way data binding
services
providers
factories
values
controllers
$scope
directives
pipes
lousy router
modules
Angular 2.0
MV*
one-way data binding
reactive programming
services
components
directives
pipes
proper router
modules
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Angular2
Uses JAVASCRIPT
To develop
REACTIVE
SPAs.
AND It's a FRAMEWORK
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Synchronous
buyOrangeJuice();
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
callback
buyOrangeJuice(onOrangeJuiceBought);
onOrangeJuiceBought = function(){ ... }
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Promise
juicePromise = Promise((resolve, reject) => {...});
juicePromise
.then(
onOrangeJuiceBought,
onOrangeJuiceOutOfStock
);
onOrangeJuice = function(){ ... }
onOrangeJuiceOutOfStock = function(){ ... }
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Observable
n times
juiceSubject = new Subject<any>();
juice$ = Observable.from(juiceSubject);
juice$
.subscribe((result) => {...});
simulateOrangeJuiceFetch = function(juiceResult){
juiceSubject.next(juiceResult);
}
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
What's an observable?
Array of results that will be served on multiple times
As an array, it can be transformed
events
API response
timer
...
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
filter( )
MERGE()
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Angular2
Uses JAVASCRIPT
To develop
REACTIVE
SPAs.
AND It's a FRAMEWORK
Forms
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
- data binding
- dynamic forms
- custom elements
- custom validators
- extra form properties (touched, valid, pristine...)
Router
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
root
user
user
user
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
import { Routes, RouterModule } from '@angular/router';
export const USER_ROUTES: Routes = [
{
path: 'user',
component: UserComponent
},
];
export const userRouting: ModuleWithProviders = RouterModule.forChild(USER_ROUTES);
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const rootAppRoutes: Routes = [];
export const rootAppRoutingProviders: any[] = [];
export const routing: ModuleWithProviders = RouterModule.forRoot(rootAppRoutes, { useHash: true });
Router
Modules
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
// ANGULAR
CommonModule,
// EXTERNAL
// OWN
ButtonModule,
CardModule,
DialogModule,
MapModule,
sharedRouting
],
declarations: [ IconComponent ],
providers: [ CountryService ],
exports: [
ButtonModule,
CardModule,
DialogModule,
MapModule
]
})
export class SharedModule { }
i18n
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
- translations
- ng2-translate:
- json
- files are handmade
- built-in:
- xlf, xmb
- generates translation files
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Angular2
Uses JAVASCRIPT
To develop
REACTIVE
SPAs.
AND It's a FRAMEWORK
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
SERVER-SIDE
CROSS PLATFORM
PROGRESSIVE WEB APPS
NATIVE
DESKTOP
FULL DEVELOPMENT STORY
TESTING
ANIMATION
ACCESSIBILITY
Universal
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Angular-cli
npm i angular-cli -g
ng new <projectName>
ng serve
ng generate component <path> (also directive, class, enum, pipe, service)
ng build --prod
ng github-pages:deploy
ng test
ng lint
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Angular-cli BUILD
- webpack
- preprocesses css (sass, less)
- compiles ts
- tree-shaking
- packs html, js, css into one file
- serves gzip
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Jit
AoT
Slower compilation
Faster rendering
Type checking for HTML vars
Lighter (no compiler code sent to client)
Faster compilation
Slower rendering
Heavier (client compiles, thus needs compiler)
Just in Time
Ahead of Time
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Bonus
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
REdux
- as React, show states
- can be saved and reproduced
Angular2 introduction
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
inmmutable
- detect changes on different object
- don't detect on different property
@subarroca
![](https://s3.amazonaws.com/media-p.slid.es/uploads/606019/images/3186355/s16-final.png)
Moltes gràcies
angular2 introduction
By Salvador Subarroca
angular2 introduction
- 788