Angular2 intro

Angular2 intro

• 1.
  IntrotoAngular 2 @Sh_McK
• 2.
  Angular 1.x Now
• 3.
  2009 Libraryfor Web Designers Framework for WebDevelopers
• 4.
  1.3-> 1.4-> 1.5->1.6-> 2.0
• 5.
  What do youthink about ?
• 6.
  Angular 2 The Future
• 7.
  Pop Quiz! What’s thedifference between a factory & Service? In directives, whendo you use the compile, link,or controller?
• 8.
  Easier to Reason Fewerconcepts SimplifiedDI One-way data flow Tree structure Automatic Change detection
• 9.
  Easier to Maintain Betterstack traces Improved testability Style zones(Shadow DOM)
• 10.
  Pop Quiz! What advantagesdoes React have over angular?
• 11.
  BetterPerformance Faster Memory Management Lazy-loading Server-side Rendering NativeMobile Rendering Service workers ?
• 12.
  Quick Example TodoMVC withFirebase
• 13.
  import {Component, View,bootstrap, NgFor, bind} from 'angular2/angular2'; import {AngularFire, FirebaseArray} from 'firebase/angularfire'; @Component({ selector: 'todo-app', appInjector: [ AngularFire, bind(Firebase).toValue(new Firebase('https://webapi.firebaseio-demo.com/test')) ]}) @View({ templateUrl: 'todo.html', directives: [NgFor] }) class TodoApp { … } bootstrap(TodoApp); Todo.TS/ Todo.js
• 14.
  class TodoApp { todoService:FirebaseArray; todoEdit: any; todoFilter: Boolean; constructor(sync: AngularFire) { this.todoService = sync.asArray(); this.todoEdit = null; this.todoFilter = null; } enterTodo($event, newTodo) { if($event.which === 13) { // ENTER_KEY var todoText = newTodo.value.trim(); if (todoText) { this.addTodo(todoText); newTodo.value = ''; } } } … } Todo.TS/ Todo.js
• 15.
  <h1>todos</h1> <input id="new-todo" placeholder="What needs tobe done?" autofocus #newtodo (keyup)="enterTodo($event, newtodo)"> <li *ng-for="#todo of todoService.list"> <div class="view" [class.hidden]="(todoEdit == todo || todoFilter == todo.completed)"> <input class="toggle" type="checkbox" (click)="completeMe(todo)" [checked]="todo.completed"> <label (dblclick)="editTodo($event, todo)">{{todo.title}}</label> <button class="destroy" (click)="deleteMe(todo)"></button> </div> </li> Todo.html
• 16.
  What toStudy? Because theweb isn’t waiting for you.
• 17.
  ES6 /TypeScript Import /Export Class Templatesyntax
• 18.
  WebComponents <Template> Shadow DOM
• 19.
  Module Loader Webpack JSPM+System.js Meteor
• 20.
  Online Study Group www.tryangular2.com
• 21.
  Resources Webpack-Starter ES6-Starter Plunker Why Will Angular2 Rock? Twitter: @Sh_McK Kakao: Shawnmckay
• 22.
  What do youthink about ?