Angular2 introduction

@subarroca

ES5

ES6

TS

Angular2 introduction

@subarroca

ES5

plain ol' javascript

supported by all browsers

Angular2 introduction

@subarroca

ES6

modules

classes

()=> // keeps 'this' in your function

`Hello ${name}`

Promise

...

OR ES2015

Angular2 introduction

@subarroca

Typescript

decorators

typings

injection

Angular2 introduction

@subarroca

compatibility

Currently ES5 completely supported

ES6 partially supported

Babel & Traceur transpilers

Components

Angular2 introduction

@subarroca

Angular2 introduction

@subarroca

@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

Angular2 introduction

@subarroca

@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

Angular2 introduction

@subarroca

@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

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

Angular2 introduction

@subarroca

Synchronous

buyOrangeJuice();

Angular2 introduction

@subarroca

callback

buyOrangeJuice(onOrangeJuiceBought);

onOrangeJuiceBought = function(){ ... }

Angular2 introduction

@subarroca

Promise

juicePromise = Promise((resolve, reject) => {...});

juicePromise
  .then(
    onOrangeJuiceBought,
    onOrangeJuiceOutOfStock
  );

onOrangeJuice = function(){ ... }
onOrangeJuiceOutOfStock = function(){ ... }

Angular2 introduction

@subarroca

Observable

juiceSubject = new Subject<any>();
juice$ = Observable.from(juiceSubject);

juice$
  .subscribe((result) => {...});

simulateOrangeJuiceFetch = function(juiceResult){
  juiceSubject.next(juiceResult);
}

Angular2 introduction

@subarroca

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

rxmarbles.com

filter(     )

MERGE()

Forms

Angular2 introduction

@subarroca

• data binding
• dynamic forms
• custom elements
• custom validators
• extra form properties (touched, valid, pristine...)

Router

Angular2 introduction

@subarroca

root

user

user

user

Angular2 introduction

@subarroca

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

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

• translations
• ng2-translate:
  • json
  • files are handmade
• built-in:
  • xlf, xmb
  • generates translation files

Angular2 introduction

@subarroca

SERVER-SIDE

CROSS PLATFORM

PROGRESSIVE WEB APPS

NATIVE

DESKTOP

FULL DEVELOPMENT STORY

TESTING

ANIMATION

ACCESSIBILITY

Universal

Angular2 introduction

@subarroca

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

Angular-cli BUILD

• webpack
• preprocesses css (sass, less)
• compiles ts
• tree-shaking
• packs html, js, css into one file
• serves gzip

Angular2 introduction

@subarroca

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)

http://blog.mgechev.com/2016/08/14/ahead-of-time-compilation-angular-offline-precompilation

Just in Time

Ahead of Time

Angular2 introduction

@subarroca

REdux

• as React, show states
• can be saved and reproduced

Angular2 introduction

@subarroca

inmmutable

• detect changes on different object
• don't detect on different property