Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular 2: What's New?

1,551 views

Published on

Presentation from Digicomp DevDay 2016

Published in: Software

Angular 2: What's New?

  1. 1. Angular 2:What’s new? Jonas Bandi, IvoryCode GmbH
  2. 2. Once upon a time …
  3. 3. … the world was peacefully creating applications with AngularJS …
  4. 4. …but change was lurking in the maze of a mailing list … https://groups.google.com/forum/#!search/misko$20Hevery$20may$2022$202013/polymer-dev/4RSYaKmbtEk/uYnY3900wpIJ
  5. 5. … then the threat became real … ng-europe, October 2014 https://www.youtube.com/watch?v=gNmWybAyBHI
  6. 6. https://twitter.com/kevindente/status/527500820603232257
  7. 7. Forget anything you know about AngularJS?
  8. 8. About me … Jonas Bandi
 jonas.bandi@ivorycode.com Twitter: @jbandi - Freelancer: www.ivorycode.com - Dozent an der Berner Fachhochschule seit 2007 - Trainer bei Digicomp für AngularJS und Angular 2 - In-House Kurse & Coachings für Web-Technologien im Enterprise (UBS, Postfinance, Mobiliar, BIT, SBB ... )
  9. 9. AngularJS is a powerful Framework … … but it is old!
  10. 10. 1995 2006 2009 2011 2013 20162012 AngularJS Bootstrap LoDash React Angular 2
  11. 11. https://en.wikipedia.org/wiki/Usage_share_of_web_browsers
  12. 12. The web has changed since 2009… 2015
  13. 13. Angular 2 is a new implementation of the concepts behind AngularJS … … for the modern web. … but Angular 2 is not an update to AngularJS.
  14. 14. Angular 2 is built upon the modern web: 2015 - web workers - shadow dom Angular 2 is built for the modern web: • mobile browsers • modern browsers • server-side rendering Angular 2 improves over AngularJS: • faster • easier to use & learn • built on proven best practices (i.e. ui- components, unidirectional data flow …)
  15. 15. The core concepts of Angular 2 are clean and easy to learn …
  16. 16. Angular Key Concepts controllers components data-binding data-binding / data-flow directives directives services dependency injection services dependency injection components (ng 1.5) components AngularJS Angular 2
  17. 17. Angular Key Concepts controllers components components (ng 1.5) AngularJS Angular 2 ES2015 class JavaScript Function DDO
  18. 18. ToDo-App Component New-ToDo Component ToDo-List Component
  19. 19. Angular 2 Components Template Class Metadata + + = Component @Component Components are the main building-block of Angular 2.
  20. 20. A Simple Component import {Component} from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { }
  21. 21. var app = angular.module('todoApp');
 app.controller('todoController', ToDoController);
 
 ToDoController.$inject = ['ToDoService'];
 function ToDoController(todoService) {
 var ctrl = this;
 
 ctrl.newToDo = new ToDoItem();
 ctrl.todos = todoService.getToDos();
 ... @Component({
 selector: 'td-todo-app',
 template: require('./app.component.html'),
 directives: [NewTodo, ToDoList],
 providers: [ToDoService]
 })
 export class TodoApp implements OnInit {
 
 todos: Array<ToDo> = [];
 
 constructor(private todoService:ToDoService){}
 
 ngOnInit() {
 this.todos = this.todoService.loadToDos();
 } ... AngularJS Angular 2 Controller -> Component
  22. 22. var app = angular.module('todoApp');
 
 app.component('TodoApp', {
 templateUrl: 'todo-app.html',
 controller: TodoAppComponent
 });
 
 ToDoController.$inject = ['ToDoService'];
 function TodoAppComponent(todoService) {
 var ctrl = this;
 
 ctrl.newToDo = new ToDoItem();
 ctrl.todos = todoService.getToDos();
 
 ... @Component({
 selector: 'td-todo-app',
 template: require('./app.component.html'),
 directives: [NewTodo, ToDoList],
 providers: [ToDoService]
 })
 export class TodoApp implements OnInit {
 
 todos: Array<ToDo> = [];
 
 constructor(private todoService:ToDoService){}
 
 ngOnInit() {
 this.todos = this.todoService.loadToDos();
 } ... AngularJS Angular 2 Component(ng 1.5) -> Component
  23. 23. Directives & Components A directive is a construct, that is embedded into html and has a special meaning for the framework. Directives Components Structural
 Directives Attribute
 Directives Component Directive is a composes
  24. 24. Angular Key Concepts directives directives AngularJS Angular 2 many directives from ng1 are not needed in ng2 templates a lot of directives 
 (i.e ng-click, ng-focus, ng-blur, ng-keyup …)
  25. 25. AngularJS vs.Angular 2: Directives The generic binding capabilities of Angular 2 makes many directives from AngularJS obsolete. https://docs.angularjs.org/api/ng/directive https://angular.io/docs/ts/latest/api/ <div ng-style={color:'red'}> <img ng-src="{{ctrl.path}}"> <a ng-href=“{{ctrl.link}}"> <div [style.color]="color"> <img [src]="path"> <a [href]="link"> ng-click="savePerson(person)" ng-focus="updateSummary()" ng-blur="commit()" ng-keyup="updateCalculation()" (click)="savePerson(person)" (focus)="updateSummary()" (blur)="commit()" (keyup)="updateCalculation()" AngularJS Angular 2
  26. 26. Structural Directives Use html as a template <ul class="todo-list" >
 <li ng-repeat="todo in ctrl.todos">
 {{todo.title}}
 <button class="remove-button" ng-click="ctrl.removeToDo(todo)">
 x
 </button>
 </li>
 </ul> <ul class="todo-list" >
 <li *ngFor="let todo of todos">
 {{todo.title}}
 <button class="remove-button" (click)="removeToDo(todo)">
 x
 </button>
 </li>
 </ul>
 AngularJS Angular 2 ng-repeat, ng-if *ngFor, *ngIf
  27. 27. Angular Key Concepts data-binding data-binding / data-flow AngularJS Angular 2 interpolation & 2-way databinding interpolation & 2-way databinding uni-directional data-flow$scope generic property & event binding
  28. 28. Databinding Interpolation Property Binding Event Binding Two Way Binding {{value}} [property]="value" (event)="handler" [(ngModel)]="value" DOM (Template) component
  29. 29. Nested Components: Uni-Directional Data-Flow State should be explicitly owned by a component. • A parent component passes state to children • Children should not edit state of their parent • Children “notify” parents (events, actions …) Child Component Child Component Parent Component state properties 
 go in logic eventscomeout update @Input() @Output() Angular formalises unidirectional data-flow with @Input() and @Output() properties.
  30. 30. Angular Key Concepts services services AngularJS Angular 2 a function registered as factory, service or provider ES2015 class
  31. 31. Services Objects that perform a specific job. Instantiated by Angular. var app = angular.module('todoApp');
 app.factory('toDoService', toDoService);
 
 function toDoService() {
 'use strict';
 
 return {
 getToDos: getToDos,
 addToDo: addToDo,
 removeToDo: removeToDo
 }; ... @Injectable()
 export class ToDoService {
 
 loadToDos():Array<ToDo> {
 var loadedToDos = JSON.parse( localStorage .getItem(TODOS_KEY) );
 return loadedToDos || [];
 }
 ... AngularJS Angular 2
  32. 32. Angular Key Concepts dependency injection dependency injection AngularJS Angular 2 DI based on naming DI based on types (usingTypeScript and Decorators) Singletons Hierarchical DI
  33. 33. Dependency Injection var app = angular.module('todoApp');
 app.factory('toDoService', toDoService);
 
 function toDoService() { ... } @Injectable()
 export class ToDoService {
 ... } AngularJS Angular 2 @Component({
 selector: 'td-todo-app',
 template: require('./app.component.html'),
 directives: [NewTodo, ToDoList],
 providers: [ToDoService]
 })
 export class TodoApp implements OnInit {
 constructor(private todoService:ToDoService){} ... } app.controller('todoController', ToDoController);
 
 ToDoController.$inject = ['toDoService'];
 function ToDoController(todoService) { ... } registration: injection:
  34. 34. Angular Key Concepts controllers components data-binding data-binding / data-flow directives directives services dependency injection services dependency injection components (ng 1.5) components AngularJS Angular 2 Many key concepts remain the same. But the implementation has changed.
  35. 35. There is more … filters Pipes AngularJS Angular 2 http with Promises http with RxJs (Promises still supported) Routing (template centered) Hierarchical Component Router … …
  36. 36. The core concepts of Angular 2 are clean and easy to learn … … but setting up a full Angular project can be quite complicated today.
  37. 37. Angular JS
  38. 38. AngularJS: an effective tool but not elegant …
  39. 39. SystemJS 2015 webpack jspm Angular 2
  40. 40. Angular is distributed through NPM Node Package Manger To get Angular on your development machine, you have to install Node.JS. https://www.npmjs.com/
  41. 41. 2015 ES5 Multi-Language
  42. 42. Language Choices ES5 2015 weakly typed strongly typed (optional) no com-
 pilation compilation
  43. 43. Angular for ES2015 &TS relies on ES2015 modules.
 There is no support for ES2015 modules in browsers today.
 A module-system is mandatory. VS. SystemJS To pack or (not) to pack?
  44. 44. Build Toolchain Typically you need a front-end build for transpilation and module bundling.
  45. 45. Angular 2 aspires to be a platform progressive web-apps for mobile
 (web workers, cache, push, offline) https://mobile.angular.io/ classic web-apps for desktops installed mobile apps (hybrid) installed mobile apps (native integrations) server side rendering https://universal.angular.io/ installed desktop apps https://github.com/NathanWalker/angular2-seed-advanced dev tooling https://cli.angular.io/
  46. 46. Is Angular 2 ready for production? October 2014: Initial announcement of Angular 2 December 2015: Angular 2 released as beta May 2016: Angular 2 Release Candidate 0 June 2016: Angular 2 Release Candidate 2 What is missing: - Router (!) - Offline Compilation & BuildToolchain - internationalization - 3rd Party Ecosystem https://www.reddit.com/r/angularjs/comments/4i2n3k/angular_2_was_never_ready_for_a_release_candidate/
  47. 47. The Router Debacle http://blog.jonasbandi.net/2016/06/ng2-router.html - Dez 2014: New Router announced for Angular 1.4 and Angular 2 - June 2015: New Router is deprecated - Angular 2 beta is developed with the Component router - March 2016: Component Router is released for Angular 1.5 - May 2016: Component Router is deprecated. Router 2.0 is part of Angular 2 RC1 - June 2016: Router 2.0 is deprecated, Router 3.0 is announced
  48. 48. Jonas Bandi
 jonas.bandi@ivorycode.com Twitter: @jbandi Tomorrow: DevDay Workshop - Hands On Angular 2 Digicomp Course: Front-End-Entwicklung mit Angular 2, JavaScript und TypeScript Questions?

×