ng-conf 2016

ng-conf extended karachi

https://slides.com/mohuk/ng-conf-ext-khi

Journey to ng-conf ext karachi

ng2 recap

Angular 2?

let language: string = 'Typescript';

Classes

class Car { 
    make: string;
    constructor(make: string = 'Suzuki') {
        this.make = make;
    }

    drive(kms: number){

    }
}

class Bus extends Car {
...
}

let mehran = new Car('Mehran'); // creates an object with property make set to 'Mehran';
let car = new Car(); //// creates an object with property make set to 'Suzuki';

Sugar over syntax for prototypes

Modules

Modules for modular code

//hero.js

export class Hero {
...
}

//app.js
import {Hero} from './hero';

let batman = new Hero();

Type Annotations

Optional typing via :Type syntax

let height: number = 6;
let isEnabled: boolean = true;
let name: string = 'Batman';



let list: number[] = [1,2,3];
let heroes: Hero[] = [{name: 'batman'}];



function fullname(firstName: string, lastName: string){
    console.log(`${firstName} ${lastName}`);
}

Enter A2

Components

Components are synonymous to bricks or building blocks of your application

An app consists of a wrapper component to encapsulate all the other components

AppComponent

HeaderComponent

SidebarComponent

MainComponent

//app.component.js
import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `
        <h1>{{title}}<h1>
    `
})
export class App {
    title: string = 'Dune 2000';
}

First Component

//app.component.js
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
    selector: 'my-app',
    template: `
        <h1>{{title}}<h1>
    `
})
export class App {
    title: string = 'Dune 2000';
}

bootstrap(App);

Lets bootstrap our first component

* bootstrap should be in its own file

//index.html
<html>
    <head>
        ....
    </head>
    <body>
        ...
        <my-app></my-app>
        <script src="..."></script>
    </body>


</html>

index.html

//app.component.js
import {Component} from 'angular2/core';
import {HeroComponent} from './Hero';

@Component({
    selector: 'my-app',
    template: `
        <h1>{{title}}<h1>
        <my-hero></my-hero>
    `,
    directives: [HeroComponent]
})
export class App {
    title: string = 'Dune 2000';
}

Nesting/Reusing components

Displaying Data

Nothing works without displaying data.

Lets leverage that through interfaces and several binding techniques

//hero.js

export interface Hero {
    name: string,
    secretId: string,
    age: number,
    image?: string
}

Interfaces

Creating interface abiding objects

feat. events

import {Component} from 'angular2/core';
import {Hero} from './Hero.js';


@Component({
    selector: 'heroes-list',
    templateUrl: 'app/heroes-list.html'
})
export class HeroesListComponent {
    private selectedHero: Hero;
    heroes: Hero[] = [
    {
        name: 'Batman',
        secretId: 'Bruce Wayne',
        age: 55,
        image: '/images/batman.jpg'
    }
  
  ]
  
  select(hero: Hero){
    selectedHero = hero;
  }
};

and finally the view

//heroes-list.html
...
<ul>
    <li *ngFor="let hero of heroes">
        <a *ngIf="hero.image" [src]="hero.image">{{hero.name}}</a>
        <button (click)="select(hero)">Select</button>
    </li>
<ul>

Property binding []

Event binding ()

more databinding

//heroes-list.html
<!-- One way databinding -->
<span>{{hero.name}}</span>

<!-- Two way databinding -->
<!-- Banana in a box -->
<input [(ngModel)]="hero.name">

One way {{ }}

Two way [( )]

Services

Classes which are meant to hold logic of the application

Simple classes with the @Injectable decorator

import {Injectable} from 'angular2/core';
import {Hero} from './hero';
import {HEROES} from './hero-mock.js';


@Injectable()
export class HeroesService {
    private heroes: Hero[] = HEROES;

    getHeroes() {
        return this.heroes;
    }
}

First Service

import {Hero} from './hero.js'
import {HeroesService} from './heroes.service.js';
import {Component, OnInit} from 'angular2/core';

@Component({
    ...
    providers: [HeroesService]
})
export class HeroesComponent implements OnInit{
    
    heroes: Hero[];
    
    constructor(
        private heroesService: HeroesService;
    ){}
    private heroes: Hero[] = HEROES;

    ngOnInit(){
        heroes = heroesService.getHeroes();
    }
    
}

Consuming a Service

Routing

Component routing

import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';

Adding Component Routing

@RouteConfig([
  {
    path: '/heroes',
    name: 'Heroes',
    component: HeroesComponent
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: DashboardComponent,
    useAsDefault: true
  }
])

import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';

Adding Component Routing

@Component({
    ...
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS]
})

@RouteConfig([
  {
    path: '/heroes',
    name: 'Heroes',
    component: HeroesComponent
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: DashboardComponent,
    useAsDefault: true
  }
])

Config via Decorator

...

<nav>
      <a [routerLink]="['Heroes']">Heroes</a>
      <a [routerLink]="['Dashboard']">Dashboard</a>
      <router-outlet></router-outlet>
</nav>
...

Navigation, View via directives

Exercise to study the docs plus research ...

Routing with Params

HTTP

Async requests to server APIs

import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/add/operator/map';

@Component({
  ...
  providers: [HTTP_PROVIDERS]
})
export class ContactsApp {...}

Setup

Inject Http as a service to components, we already know that ...

class ContactsService {
  ...
  getContacts() {
    return this.http.get('http://myapi.com/contacts')
      .map((res) => { return res.json(); })
      .map((data) => { return data.items; });
  }
}

Making requests

@Component(...)
class ContactsListComponent {

  constructor(contactsService: ContactsService) {
    contactsService.getContacts()
      .subscribe(contacts => this.contacts = contacts);
  }

}

Subscribing to data

Muhammad Kamran

Mashhood Rastgar

Mohammad Umair Khan