Angular 2
Michael C. Kang
Angular 2 - Framework

JavaScript Framework

Used to Build Mobile and Desktop Web Applications

SPA Framework – Single Page Application

Currently in Beta (http://angular.io)
Angular 2 – Features and Benefits

Over 5x Faster than Angular 1

Efficient Change Detection

Simple, Expressive, and Consistent Template Syntax

Cross Platform

Flexible Choices for Development

ES5, ES2015 (ES6), TypeScript, Dart

Comprehensive Support for Routing (similar to Angular1)

Dependency Injection

Legacy Browser Support (i.e. IE9+, Android 4.1+)

Animation Support

Internationalization and Accessibility
Angular 2 – Features and Benefits


View Encapsulation with Shadow DOM (https://toddmotto.com/emulated-native-shadowdom-angular-2-view-encapsulation)

Isolated DOM

Isolated CSS
Simple, Expressive, and Consistent Data Binding Syntax



Form Validation Support (https://medium.com/@daviddentoom/angular-2-form-validation9b26f73fcb81#.2sz64we3k)

Built-in Validators (required, minLength, maxLength, etc)

Custom Validators

Asynchronous Validators
Dependency Injection (http://blog.thoughtram.io/angular/2015/05/18/dependencyinjection-in-angular-2.html)


[input], (output), #localvar
Hierarchical Injectors
Testability (https://medium.com/google-developer-experts/angular-2-unit-testing-withjasmine-defe20421584#.uvjkbm7yq)
Angular 2 vs Angular 1

Upgrade Path (https://angular.io/docs/ts/latest/guide/upgrade.html)

Comparison (http://blog.jhades.org/introduction-to-angular2-the-main-goals/)

More Efficient Change Detection Strategy

Improved Dependency Injection

Observables (Angular2) vs Promises (Angular1)

Easier to Learn (fewer concepts)

No more $scope

No need for $apply to trigger change detection (Angular 2 uses zones)

Every component in Angular 2 has isolated scope (no more separate concepts for
inherited, isolated, child scopes)

No more compile/link phases

No more jqLite
Angular 2 vs Angular 1

Yes, it’s faster…
Figure from http://angularjs-v2.com/
Angular 2 vs Other Libraries

Yes, it’s gaining popularity

Community Support (http://sotagtrends.com/)

Angular2 vs Ember vs Knockout vs ExtJS
Angular 2

Framework written in TypeScript

Your App can use ES5, ES2015 (ES6), or TypeScript
ES2015 (ES6)

Next version of JavaScript supported by all major browsers
ES2015 Features

Full Feature List: https://github.com/lukehoban/es6features

Classes

Arrow Functions

Promises

Modules

Module Loaders

Template Strings

Map, Set

etc
TypeScript

Superset of Javascript


TypeScript = JavaScript + Types = ES5 + Language Features


All JavaScript is valid TypeScript but not Vice Versa
Classes, Generics, Interfaces, Enumerations, Namespaces, etc
Benefits

Static typing

Compile-time type checking

IDE support
Shims and Polyfills


Shim

Makes browsers compliant with existing standards

Fix mistakes in the API
Polyfill

Makes browsers compliant with standards of tomorrow

Implement missing features from future standards
Angular 2

Not all browsers fully support ES2015 standards

es6-shim script is available as an NPM package: npm install es6-shim

Allows you to write ES6 JavaScript and run it on non-compliant browsers

To use, just include the script:
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
TypeScript Transpiler

Transpilation – Process of compiling one language into another language

TypeScript Transpiler = Transpiles TypeScript into JavaScript (ES5/ES6)

Two ways to transpile TypeScript:

Client-side transpilation by the browser

Server-side transpilation on the server
Angular 2 Hello World App!

Pnkr Demo - Hello World!


http://plnkr.co/edit/SE0M7ZcLp8ceGlRAoGZQ?p=preview
CDN used to include scripts (https://cdnjs.com) and http://pixelbits.net for
IE shims
Angular 2 – Script Dependencies

Overview of Script Dependencies: https://daveceddia.com/angular-2-dependencies-overview/
1. es-6-shim.js
Shims for ES6 (ES2015) browser compatibility
2. shims_for_IE.js
Shims for IE compatibility (IE9+)
3. angular2-polyfills.js
Zone.js and Reflect-metadata.js
4. system.js
Universal Module Loader
5. typescript.js
Client-side transpilation of typescript to JavaScript
6. rx.js
Library for supporting observables (programming with asynchronous observable event streams)
7. angular.js
Angular2 library!
Angular 2 – Try It Yourself

Template Interpolation

i.e. {{ title }}
Dependency Injection


Ability to inject dependencies into Components without needing to know

Sub-dependencies

How sub-dependencies are created
You can inject different kinds of dependencies

Factories  provide(Engine, {useFactory: () => { return function() { return… } })

Services  provide(Engine, {useClass: OtherEngine})

Values  provide(String, {useValue: 'Hello World'})

provide() maps a token to a configuration object. The token can either be a
type or a string.

Dependencies are injected into the component’s constructor
i.e. constructor(todoService: ToDoService) { … }
Hierarchical Injectors

There are two types of injectors
1. Component Injector
2. Application Injector

Dependencies are resolved by searching up the inheritance chain

Child Injector  Parent Injector  Application Injector
Angular 2 – Try It Yourself

Dependency Injection

Application Injector

Component Injector
Components

Break UI into re-usable pieces

Component Definition


Annotations (Component, View)

Controller Class
View
Controller

The backing of the component’s view
Template Syntax

Three main features

Local Variables  #localvar

Event Handlers  (click)  Output Bindings

Property Bindings  [innerText]  Input Bindings
Template Syntax
Angular 2 – Try It Yourself

Local Template Variables


Output Event binding to native DOM events


(keyup.enter)=“addTodo()”
Input Model Binding to native DOM or CSS properties


Access to DOM element
[style.background-color]=“todoText==‘’?’aqua’:’’
Two-Way model binding

[(ngModel)]=“todoText”
Change Detection

Each component has its own change detector

Input and Output bindings are unidirectional


@Input()  Downwards

@Output()  Upwards
Acyclic Directional Graph leads to more efficient change detection

One digest cycle to detect changes
Input Bindings

Input Bindings  Data flows from parent to child
Output Bindings

Output Bindings  Events flows from child to parent
Two-Way Model Binding

<div [(ngModel)]=“todoText” />

Equivalent to:

<div (ngModelChange)=“todoText=$event” [ngModel]=“todoText” />
Consistent Binding Syntax


Input Bindings

Native DOM Properties (i.e. style, width, height, etc)

Custom Component Properties
Output Bindings

Native DOM Events (i.e. click, keyup, mousemove, etc)

Custom Component Events (i.e. EventEmitter)
Angular 2 – Try It Yourself

Component Output Event Bindings


Component Input Model Bindings


i.e. @Input name:String  [name]=“person.name”
Component Two-Way Model Bindings:


i.e. @Output nameChange:EventEmitter<string> 
(nameChange)=“onNameChange()”
i.e. [(name)] =“person.name”
Sub-Components

directives: [subComponent1, subComponent2,etc]
There’s more…

Pipes (i.e. {{ money | currency }}, {{ name | uppercase }}

Routes

Form Validation

Control Validators

Validation flags

Dirty

Pristine

Error

Valid

Observables (with RxJS) vs Promises

Web Services (Http)
Demo – To Do App

Create ToDo Model

Create ToDoService

Register TodoService with Application Injector

Inject ToDoService, and display the Todo list

Add an input field, when <enter> is pressed, add a Todo item

Add a remove button, when the button is clicked, remove the Todo item

Add a checkbox to toggle the completed state of the Todo item

When a Todo item is completed, strike-through the text so that it appears done

Add a link to clear all the completed items (clear completed)

Add a label “[X of Y complete]”

Hide the label if there are 0 items
Questions?