Wassim Chegham

Dev Advocate

@manekinekko

Tooling

Angular CLI

Angular CLI

$ ng new my-awesome-app
$ ng build --prod -aot
$ ng test
$ ng lint
$ ng docs
$ ng make-this-awesome

❤ Webpack ❤

Build Systems

IDEs & Editors

Supported Languages

some basics

your App

Tree of Modules

AppModule

CoreModule

FeaturesModule

SharedModule

This Is A Module

AppModule

CoreModule

import { NgModule } from '@angular/core';

@NgModule({
    imports: [],
    declarations: [],
    providers: [],
    bootstrap: []
})
class AppModule { }

A Module: Tree of Components

import { Component } from '@angular/core';

@Component({
    selector: 'app-foo',
    template: 'Hello {{ planet }}'
})
class AppFooComponent { 
    planet = 'Earth!';
}

This is a Component

component communication

Property binding

<input [value]="firstName">

<pwc-foo [value]="firstName"></pwc-foo>

<div [style.width.px]="mySize">

<label [attr.for]="someName"></label>

<p [ngClass]="{ 'odd': true }"></p>

<button (click)="readRainbow()">

<pwc-foo (bar)="yolo($event)" ></pwc-foo>

Event binding

<pwc-foo [(title)]="name"></pwc-foo>




<pwc-foo 
    [title]="name" 
    (titleChange)="name = $event" >
</pwc-foo>

2-way binding

Strutural Directives

<section *ngIf="showSection"></section>


<li *ngFor="let item of list"></li>


<pwc-foo [ngSwitch]="switchExpression">
  <p *ngSwitchCase="matchExpression">...</p>
  <p *ngSwitchDefault>...</p>
</pwc-foo>

what's that *Star ?

<section *ngIf="showSection">
    YoLo
</section>





<template [ngIf]="showSection" >
    <section>
        YoLo
    </section>
</template>

mvc • mvvm • mvi • frp • flux/redux

you choose

angular architectures

OTHER COOL FEATURES

life cycles • directives • pipes • providers • router • HTTP • ANIMATIONS • FORMS • MATERIAL DESIGN • I18N • WEB WORKER • RX/OBSERVABLES • SERVER SIDE RENDERING • aot compilation...

Angular

Web Components

❤

HTML Templates

Shadow DOM

Custom Elements

Custom Elements*

@Component({ selector:'app-cat' })
class CatComponent { /* ... */ }


@Directive({ selector:'[meow]' })
class MeowDirective { /* ... */ }

*Custom implementation

HTML Templates

<ng-template [ngIf]="showMeow" >
    <section>
        Meow
    </section>
</ng-template>

Shadow DOM

@Component({
  //...
  encapsulation: ViewEncapsulation.Emulated
  //encapsulation: ViewEncapsulation.Native
  //encapsulation: ViewEncapsulation.None
})
class CatComponent { /* ... */ }

Using Web Components

import { 
  NgModule, 
  CUSTOM_ELEMENTS_SCHEMA 
} from '@angular/core';


@NgModule({
  declarations: [...],
  imports: [...],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
  providers: [...],
  bootstrap: [...]
})
export class AppModule { }

import { Component } from '@angular/core';

@Component({ 
   selector:'app-cat',
   template: `
     <wc-cat [name]="catName" (meow)="purr()">
       <input name="catName" [(ngModel)]="catName" >
     </wc-card>
   ` 
})
class CatComponent { /* ... */ }

Using Web Components

import { Component } from '@angular/core';

@Component({ 
   selector:'app-cat',
   template: `
     <wc-cat [(meow)]="catName"></wc-card>


     <wc-cat-poly [meow]="catName" 
                  (meow-change)="catName = $event">
     </wc-card-poly>
   ` 
})
class CatComponent { /* ... */ }

Using Web Components

bit.ly/pwc-people

bit.ly/angular-wc

one more thing

angularjs angular interop.

stay tuned

http://bit.ly/ng1-ng-interop