Angular 2

Route mount of controller $routeProvider .when when( ( /msg , { controller: controller : MessageForYouSir , templateUrl :  messageT  messageTemplate.ht emplate.html ml }); 











Angular2 component import   { Compo Componen nent t } from from

angular2/angular2 ;





@Component Component({ ({ selector: selector :  message-w  message-widget idget , template: template : {{ messa message ge }} , inputs: inputs : [  message ] }) export expo rt clas class s   MessageForYouSir MessageForYouSir { constructor (public   message: message : stri string ng) ) { // do st start artup up th thing ings s her here e } } 







•

•





 That’s ES6 and TypeScript, folks  You  You can use use ES5, ES5, too. . .

Angular2 Component - ES5 MessageForYouSir r = ng ng. . var   MessageForYouSi Component({ Component ({ selector: selector :  message-w  message-widget idget , 



4

}) .View View({ ({ template: template : {{ mes messa sage ge }} }) .Class Class({ ({ constructor: constructor :   function(message (message) ) { this. message   = message; message; } }); 



Angular1 Services (one of many ways) angular . module angular.  module( ( foo ) .service service( ( getTasks ,   function($http) ($http) { this.getTasks =   function() { $http.get get(); ();   // se return   $http. seve vera ral l wa ways ys to do th this is.. ... . } }); 



•

•





  Dependency injection in the creating function   Services are singletons

Angular1 Using a service Using it angular . module angular.  module( ( foo ) .controller controller( ( TaskListCtrl ,   function($scope, ($scope, taskServ taskService) ice) { taskService .getTasks getTasks(). ().then then(success, (success, error); }); function   success(pay success (payload load) ) { $scope. $scope .tasks tasks= =   payload. payload .data data; ; } error(error) or) { function   error(err $log. $log .error error( (error error. .data data, ,   error. error.status status); ); } 







A model object in TypeScript export clas export class s   TaskMode TaskModel l { description : string; string;

5

priority : number; priority: number; dueDate: dueDate : Date; Date; complete: complete : boolean; boolean; completedDate : Date; Date; constructor (description : string, string, priority: priority : number, number, dueDate: dueDate : Date, Date,   complete: complete : bool boolea ean) n) { this.description   = descript description; ion; priority; ; this.priority   = priority this.dueDate   = dueDate; dueDate; complete; ; this.complete   = complete } }

TypeScript = Type Safety •

•

•

And navigation navigation of classes, classes, methods, inheritenc inheritence, e, etc. . .  Most of this is part of ES6   TypeScript adds types, annotations

Static Static methods? Yep // pa pars rse e fr from om St Stri ring ngs s in JS JSON ON, , do don  n  t sull sully y cons construc tructor  tor  fromJsonData (description: ion: string, static   fromJsonData(descript priority priority: : string, string, dueDate: dueDate: string, string, complete complete: : string) string) { let   npriorit npriority y =   Number. Number.parseInt parseInt(priority); (priority); ddueDate = new   Date(dueDate); Date(dueDate); let   ddueDate // bl blech ech Ken Ken, , rea really lly?  ?  bcomplete e = new   Boolean(complete). Boolean(complete). valueOf valueOf(); (); let   bcomplet let   taskMode taskModel l = TaskModel (description, ion, npriority, npriority, new   TaskModel(descript ddueDate, bcomplete) bcomplete) return   taskModel; } 

Angular2 services @Injectable Injectable() () export expo rt clas class s   TaskServi TaskService ce {

6

tasks:Array; public   tasks:Array; constructor (private   http:Ht http:Http) tp) { this.tasks   = []; this.fetchTasks fetchTasks(); (); } } •

•

  @Injectable()  - Allow other objects to inject this service into them priv privat ate e http: http: Http Http  as a parameter - establishes the invisibility of the data element

(canno (cannott access access as a propert property y of taskServ taskService ice.. . . )

A sample method in TaskService fetchTasks () { fetchTasks() this.http http. .get get( ( /todo/data/todos.data.json ) . map  map(( ((re res) s) => {   return res res. .json json() (); ; }) . map  map(( ((tas tasks) ks) => { result:Array > = []; let   result:Arr 



tasks .forEach tasks. forEach(( ((ta task sk) ) => { result. result .push push( ( TaskModel. TaskModel .fromJsonData ( task. task .description , ...) ...) ); }); } •

•

•

an   Observable  is emitted from   http.get  You may provide functional processing methods to the Observable   We use  map  here to transform the input to a single output

For Observables (RxJavaScript) and Angular - READ THIS Rob Wormald’s fantastic Wormald’s fantastic talk - Everything is a Stream Stream  - http://slides.com/robwormald/everythingis-a-stream#/

7

Using from a component @Component Component({ ({ selector: selector : task-list , bindings: bindings : [TaskService] [TaskService] }) @View View({ ({ templateUrl : /todo/task-list.html , directives: directives : [CORE_DIRECTIVES, [CORE_DIRECTIVES, TaskEntry] }) TaskList { export expo rt clas class s   TaskList tasks: tasks : Array< Array > = []; 







constructor (private   taskService: constructor( taskService : TaskSe TaskServi rvice) ce) { this.tasks =   taskService. taskService .tasks tasks; ; } } •

•

  bindings  - What services can be injected into us private private taskServi taskService: ce: TaskServ TaskService ice  - injecting an   Injectable()

Key features / benefits of Angular2 •

•

  Typescript No more $scopes or controlle controllers, rs, custom ng-xxx directiv directives es for events, events, etc. . .

•

 No digest cycle - single top-down DAG updates

•

 Two-way binding not the default

•

 ES6 Modules

•

  Components are EASY

•

 Shadow DOM for component updates

•

  New Router (getting there)

•

  Decoupled rendering engine

8

Why Angular2 •

  Quicker

•

  More responsive

•

 Modular (use what you want only)

Why TypeScript? •

 Targets ES6 language features

•

 Adds typings to JavaScript

•

•

Developm Development ent team wrote Angular2 in TypeScrip TypeScriptt and transpiles transpiles to ES5, Dart, ES6  You can use lightweight editors with typings files (Vim, Sublime) to provide code fill-in and navigation

Things you’ll need to learn •

 Creating/using npm packages, npm install, etc (that’s where the build tools are)

•

  Basic TypeScript language features

•

  TypeScript tooling (the npm TypeScript transpiler - tsc/tsconfig.json)

•

•

•

The  tsun  package - a shell for TypeScript for experimenting   ES6 langua language ge featur features es - module module system system,, constr construct uctor or functi functions ons and classe classes, s, arrow arrow functi functions ons,, etc. . . - upgrade upgrade to Node.JS Node.JS > 4.1 to get this native natively ly in the node shell The Microsoft Microsoft Reactive Reactive Extensions Extensions project for JavaScri JavaScript pt - observ observables etc. . .

Tools to play •

•

•

 Gitter (http://gitter.im/angular/angular) - great resource where the developers hang out and answer questions from all comers (A+!)  Plunker (http://plnkr.co) - now provides ES6, ES5, TypeScript starters for Angular2 applications (HUGE)

  The GitHub repo for Angular2 (http://github.com/angular/angular)

9

Reading and Videos •

•

•

Lots of blog entries, look lo ok at Chariot’s entries at (http://chariotsolutions.co (http://chariotsolutions.com/tags/ang m/tags/angular2/) ular2/)  Egghead - (http://egghead.io) - lots of Angular tutorials, Angular2 content started up (subscription but cheap)  Angular2 book from Ari Lerner (http://ng-book/2/) - he’s working real-time to catch up to the github project and developers and it’s a great intro

Demo - Tour of features •

 Plunker starters and my TypeScript Angular seed

•

  Components and Bootstrap

•

  Services

•

 The http packages and Observables

•

  The router, basics

Interesting sub-projects to watch •

•

 Benchmark suite - BenchPress - baked into Angular for all testing for metrics, you can use too Web Workers orkers for mobile mobile applications applications - puts the DOM updates on a Worker orker to speed up responsiveness

•

Angular Angular + NativeScr NativeScript ipt for potential potential fast binaries binaries for mobile? mobile?

•

Ionic2 Ionic2 is moving moving forward forward with thier Angular2 version version

What isn’t done yet? •

•

•

•

 Router isn’t finished with all cases  Testing framework seems still not ready for TypeScript developers - but getting closer to reality - tooling needed Real documentatio documentation n is far from complete complete - they are working working on dev guides, documentadocumentation  Some tools are being reworked - they recently dropped the  tsd  tool and DefinitelyTyped but are now talking about another one (egads) 10

Bottom line - PLAY •

Try using Angular2 Angular2 and giving feedback feedback to the team via gitter, gitter, GitHub issues, etc. etc. . .

•

 Get ahold of Ari Lerner’s book and exercises and work through them

•

 Play around in Plunker

•

 DO NOT use it in production yet!!! But we’re closer! (Early 2016?)

11