Angular2

Getting Started

Angular Logo

Jeff Shamley / Shamley Incorporated / @jeff_shamley / jeffshamley.com

Angular2

Currently in Beta.

  • New web technologies/browsers/Future JS
  • Performance*
  • Web Components
  • Mobile
  • Simplification

Template Syntax Changes

Lists & Filters


AngularJS

<p ng-repeat="item in items | filter">{{item.name}}</p>
<p ng-if="isActive">{{item.name}}</p>

Angular2

<p *ng-for="#item of items | filter">{{item.name}}</p>
<p *ng-if="isActive" [item]="activeItem">{{item.name}}</p>

Bind Properties


AngularJS

<input ng-value="itemValue" ng-model="itemValue" />

Angular2

<input [value]="itemValue" (input)="itemValue"
       [placeholder]="itemValuePlaceholder" />
<input [(ng-model)]="itemValue" [placeholder]="itemValuePlaceholder" />

Events


AngularJS

<button ng-click="getValue($val)">Click</button>
<button ng-keyup="$event.which === 13 && getValue($val)">Click</button>

Angular2

<button (click)="getValue($val)">Click</button>
<button (keyup.enter)="getValue($val)">Click</button>

State


AngularJS

<p ng-show="visible">{{visibleItem | uppercase}}</p>
<p ng-hide="!visible">{{hiddenItem | uppercase}}</p>

Angular2

<p [hidden]="!visible">{{togglableItem | uppercase}}</p>

Dependencies

  • System.js
    Universal dynamic module loader

  • TypeScript
    Transpiler for next level JS

  • Zones
    Used to know when to update the view

  • RxJS
    Dependency injection through decorators

Code Changes

  • Components
  • Services/Providers
  • Directives
  • Routes
  • HTTP

Components

import {Component, View} from 'angular2/angular2';

// Annotation section
@Component({
  selector: 'example'
})
@View({
  templateUrl: './components/example/example.html'
})

// Component Controller
export class Example {
  constructor() {
    this.name = "John Smith";
  }
}

Services/Providers

import {Injectable} from 'angular2/core';

@Injectable()
export class Title {
  value: string;
  constructor() {
    this.value = 'Angular 2';
  }
}

import {Title} from './../services/title';

Directives

import {Directive, ElementRef, Renderer} from 'angular2/core';

@Directive({
  selector: '[directive]'
})
export class MyDirective {
  text: string;
  constructor() {
    this.text = 'My Directive';
  }
}

Routes

import {RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router';
@RouteConfig([
  { path: '/:myParam', component: MyComponent, as: 'MyCmp' },
  { path: '/staticPath', component: ..., as: ...},
  { path: '/*wildCardParam', component: ..., as: ...}
])
class MyComponent() {}

HTTP

import {Http, HTTP_PROVIDERS} from 'angular2/http';
@Component({
  selector: 'http-app',
  viewProviders: [HTTP_PROVIDERS]
})
class PeopleComponent {
  constructor(http: Http) {
    http.get('people.json')
      .map(res => res.json())
      .subscribe(people => this.people = people);
  }
}

Let's look at some code

Other Cool Projects

  • ngUpgrade
  • ngForward
  • Universal Angular
  • Ionic 2/NativeScript
  • Batarangle

Angular2

Questions?

Angular Logo

Jeff Shamley / Shamley Incorporated / @jeff_shamley / jeffshamley.com