Angular 2 Michael C Kang Angular 2 Framework

Angular 2 Michael C. Kang

Angular 2 - Framework Java. Script 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 5 x Faster than Angular 1 Efficient Change Detection Simple, Expressive, and Consistent Template Syntax Cross Platform Flexible Choices for Development ES 5, ES 2015 (ES 6), Type. Script, Dart Comprehensive Support for Routing (similar to Angular 1) Dependency Injection Legacy Browser Support (i. e. IE 9+, Android 4. 1+) Animation Support Internationalization and Accessibility

Angular 2 – Features and Benefits View Encapsulation with Shadow DOM (https: //toddmotto. com/emulated-native-shadow-dom -angular-2 -view-encapsulation) Isolated DOM Isolated CSS Simple, Expressive, and Consistent Data Binding Syntax [input], (output), #localvar Form Validation Support (https: //medium. com/@daviddentoom/angular-2 -form-validation 9 b 26 f 73 fcb 81#. 2 sz 64 we 3 k) Built-in Validators (required, min. Length, max. Length, etc) Custom Validators Asynchronous Validators Dependency Injection (http: //blog. thoughtram. io/angular/2015/05/18/dependency-injection -in-angular-2. html) Hierarchical Injectors Testability (https: //medium. com/google-developer-experts/angular-2 -unit-testing-withjasmine-defe 20421584#. uvjkbm 7 yq)

Angular 2 vs Angular 1 Upgrade Path (https: //angular. io/docs/ts/latest/guide/upgrade. html) Comparison (http: //blog. jhades. org/introduction-to-angular 2 -the-main-goals/) More Efficient Change Detection Strategy Improved Dependency Injection Observables (Angular 2) vs Promises (Angular 1) 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 jq. Lite

Angular 2 vs Angular 1 Yes, it’s faster… Figure from http: //angularjs-v 2. com/

Angular 2 vs Other Libraries Yes, it’s gaining popularity Community Support (http: //sotagtrends. com/) Angular 2 vs Ember vs Knockout vs Ext. JS

Angular 2 Framework written in Type. Script Your App can use ES 5, ES 2015 (ES 6), or Type. Script

ES 2015 (ES 6) Next version of Java. Script supported by all major browsers

ES 2015 Features Full Feature List: https: //github. com/lukehoban/es 6 features Classes Arrow Functions Promises Module Loaders Template Strings Map, Set etc

Type. Script Superset of Javascript Type. Script = Java. Script + Types = ES 5 + Language Features All Java. Script is valid Type. Script 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 ES 2015 standards es 6 -shim script is available as an NPM package: npm install es 6 -shim Allows you to write ES 6 Java. Script and run it on non-compliant browsers To use, just include the script: <script src="node_modules/es 6 -shim. min. js"></script>

Type. Script Transpiler Transpilation – Process of compiling one language into another language Type. Script Transpiler = Transpiles Type. Script into Java. Script (ES 5/ES 6) Two ways to transpile Type. Script: 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/SE 0 M 7 Zc. Lp 8 ce. Gl. RAo. GZQ? 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 ES 6 (ES 2015) browser compatibility 2. shims_for_IE. js Shims for IE compatibility (IE 9+) 3. angular 2 -polyfills. js Zone. js and Reflect-metadata. js 4. system. js Universal Module Loader 5. typescript. js Client-side transpilation of typescript to Java. Script 6. rx. js Library for supporting observables (programming with asynchronous observable event streams) 7. angular. js Angular 2 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, {use. Factory: () => { return function() { return… } }) Services provide(Engine, {use. Class: Other. Engine}) Values provide(String, {use. Value: '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(todo. Service: To. Do. Service) { … }

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 [inner. Text] Input Bindings

Template Syntax

Angular 2 – Try It Yourself Local Template Variables Output Event binding to native DOM events (keyup. enter)=“add. Todo()” Input Model Binding to native DOM or CSS properties Access to DOM element [style. background-color]=“todo. Text==‘’? ’aqua’: ’’ Two-Way model binding [(ng. Model)]=“todo. Text”

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 Data flows from parent to child

Output Bindings Events flows from child to parent

Two-Way Model Binding <div [(ng. Model)]=“todo. Text” /> Equivalent to: <div (ng. Model. Change)=“todo. Text=$event” [ng. Model]=“todo. Text” />

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. Event. Emitter)

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 name. Change: Event. Emitter<string> (name. Change)=“on. Name. Change()” i. e. [(name)] =“person. name” Sub-Components directives: [sub. Component 1, sub. Component 2, etc]

There’s more… Pipes (i. e. {{ money | currency }}, {{ name | uppercase }} Routes Form Validation Control Validators Validation flags Dirty Pristine Error Valid Observables (with Rx. JS) vs Promises Web Services (Http)

Demo – To Do App Create To. Do Model Create To. Do. Service Register Todo. Service with Application Injector Inject To. Do. Service, 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?