Angular2

Getting Started

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

Angular2

Currently in Beta.

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

Dependencies

• System.jsUniversal dynamic module loader
• TypeScriptTranspiler for next level JS
• ZonesUsed to know when to update the view
• RxJSDependency 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?

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