Angular2

Overview and Walkthrough

December 16, 2015

Disclaimer: this content is stale, and will not be updated.

It's (still) an awesome time to be a Web Developer!

Topics

  • Angular2 Goals
  • Fundamental Changes
  • Getting Started
  • Examples
    • Host Page
    • Templates
    • Bootstrap
    • Services
    • Components
  • Deployment
  • Release Schedule
  • Resources
  • Q/A

Angular2 Goals

  • Performance
  • Reduced learning curve / easier to reason about
  • Future & Standards Focused
  • No DOM dependency
  • Upgrade support
  • Improved error messaging

Fundamental Changes

  • Total Rewrite in Typescript
  • Directives/Controllers => Components
  • No more services/values/constants/factories
  • Filters => Pipes
  • Promises => Observables (via RxJS)
  • No ng-app => bootstrap with System.js
  • No $scope or digest cycles => zone.js
  • Dependency Injection (via constructors)
  • Updated Router

Getting Started

  • Install Node.js
  • Install VS Code
  • Create directory for project
  • Create and populate package.json
  • npm install
  • VSCode will find typings in node_modules
  • Have fun!

Host Page

  • Specify base location
  • Include and configure System.js
  • Include Angular scripts
  • Place application element
  • Use System.js to load app

<head>
<base href="/myApp/" />
<script src="/js/libs/system.js"></script>
<script>
    System.config({
        defaultJSExtensions: true
    });
</script>
<script src="/js/libs/es6-shim/es6-shim.min.js"></script>
<script src="/js/libs/rxjs/Rx.min.js"></script>
<script src="/js/libs/angular2/angular2-polyfills.min.js"></script>
<script src="/js/libs/angular2/angular2.min.js"></script>
<script src="/js/libs/angular2/http.min.js"></script>
<script src="/js/libs/angular2/router.min.js"></script>
</head>

<myApp>Loading...</myApp>

<script>System.import('/js/myApp/bootstrap');</script>
                

Templates

  • Bind to properties not attributes
  • Allows for binding to custom / future properties
  • Removes need for many Angular1 directives

Content Display


<span>{{name}}</span>
                

Pipes


<span>{{aum | aumFormat}}</span>
                

Property Binding


<el [prop]="expression" />
                

Event Binding


<el (click)="onClick()" />

<el (myEvent)="onMyEvent($event)" />
                

Two Way Binding


<input type="text" [(ngModel)]="myVal" />
                

Local Variables


<input #cmp type="text" />

<button (click)="doSomething(#cmp.value)">Submit</button>
                

Repeater


<div *ngFor="#item of items">
    {{item.name}}
</div>
                

Bootstrap


import { bootstrap } from 'angular2/platform/browser';
import { provide } from 'angular2/core';
import { ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy } from 'angular2/router';
import { MyApp } from './components/MyApp';
import { MyService } from './services/MyService';

bootstrap(MyApp, [
    MyService,
    ROUTER_PROVIDERS,
    provide(LocationStrategy, {useClass: HashLocationStrategy})
])
.catch(err => console.error(err));
            

Services


import { Injectable, EventEmitter } from 'angular2/core';

@Injectable()
export class MyService {
    myEventEmitter = new EventEmitter<any>();

    constructor(private _otherService : OtherService) { }

    doSomething(val : string) : void {
        this.myEventEmitter.next(val);
    }
}
            

Components


import { Component, Input, Output, EventEmitter } from 'angular2/core';
import { NgIf } from 'angular2/common';
import { MyDataService } from '../services/MyDataService';

@Component({
    selector: 'myApp',
    directives: [ NgIf ],
    templateUrl: '/js/myApp/components/MyApp.html'
})
export class MyApp {
    private _val : string;
    @Output() myEventEmitter = new EventEmitter<any>();

    @Input() set myValue(value : string) {
        this._val = value;
    }

    get myValue() : string {
        return this._val;
    }

    constructor(private _dataService : MyDataService) {

    }
    ...
}
            

Deployment

  • Transpile code to ES5
    • Gulp JS + gulp-typescript
    • Define custom build task to build application
    • npm run gulp -- myApp
  • Bundling + Minification?
  • Angular CLI?
  • Server side support? (Channel 9 Talk)

Release Schedule

  • Beta 0 released *yesterday*

Resources

Questions?

Answers?