Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Angular 2: What's New?

1.583 Aufrufe

Veröffentlicht am

Presentation from Digicomp DevDay 2016

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

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?

×