One Framework. Angular

Transcription

1 One Framework. Angular Web 2.0 Marc Dangschat

2 Introduction AngularJS (1) released in 2009 Angular (2) released October Short: ng Framework TypeScript, JavaScript, Dart MIT license Developed by Google Marc Dangschat 2

3 Introduction Focus on speed & performance Cross platform Focus on testability Marc Dangschat 3

4 ECMAScript 5+ with TypeScript TS is superset JavaScript (ECMAScript 5+) Compiler Some features that are provided: Type annotations and compiler type-checking Classes Modules Optional parameters and defaults... Marc Dangschat 4

5 Classes class Greeter { public greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } let greeter = new Greeter("world"); class SuperGreeter extends Greeter { private counter: number; Marc Dangschat 5

6 Single-Page Applications (SPAs) Application runs in the browser. No page reloading required. Resources are dynamically loaded, and integrated into the DOM. Persistent URLs via #location-hashes (e.g. routes) Single-Page Applications are a complex construct. Rise of frameworks like AngularJS and Ember.js. Marc Dangschat 6

7 Model-View-ViewModel (MVVM) Variation of the Model-View-Controller (MVC) design pattern Separation of business logic and user interface Additional information on MVVM next week Ember.js uses it as well Provides Two-Way Data Binding Marc Dangschat 7

8 One-Way Data Binding Marc Dangschat 8

9 Two-Way Data Binding Marc Dangschat 9

10 Creating a new Angular Project Install: npm install -g angular-cli Create project: ng new my_project cd my_project ng serve This project is very much still a work in progress. Marc Dangschat 10

11 Architecture HTML-Templates with special Angular markup Component-classes manage the templates Services provide the business logic, database access,... Components and Services can be bundled in a Module Marc Dangschat 11

12 Architecture > Module Encapsulation Testability All apps have at least one module, the Root-Module Naming convention: AppModule Angular Libraries are modules FormsModule, RouterModule, HttpModule,... Import 3rd-party libraries Marc Dangschat 12

13 import {NgModule} from import {BrowserModule} from import {FormsModule} from import {AppComponent} from "./app.component"; import {TodoService} from imports: [ BrowserModule, FormsModule ], declarations: [AppComponent], providers: [TodoService], bootstrap: [AppComponent] }) export class AppModule {} Marc Dangschat 13

14 Architecture > Service Services encompass any constant, method and feature the app needs Logging service Data service App con guration Income tax calculator... Marc Dangschat 14

15 @Injectable() export class TodoService { gettodos(): Promise<Todo[]> { return Promise.resolve(TODOS); } add(text: string): Promise<Todo> { return Promise.resolve({id: TodoService.getUUID(), text: text, complet } remove(todo: Todo): Promise<void> { return Promise.resolve(); } } private static getuuid(): number { return Math.floor(Math.random()* ); } Marc Dangschat 15

16 Architecture > Component One Component controls one View Provides attributes and methods Interface between business logic and view Imports the required services via Dependency Injection Marc Dangschat 16

17 Components & Templates Marc Dangschat 17

18 @Component({ moduleid: module.id, selector: 'todo-app', templateurl: 'app.component.html' }) export class AppComponent implements OnInit { title: string = "My Todo-List"; todos: Todo[]; selectedtodo: Todo; constructor(private todoservice: TodoService) {}; ngoninit(): void { this.gettodos(); }... filtercompleted(): Todo[] { return this.todos.filter(item =>!item.completed); } Marc Dangschat 18

19 Architecture > Template A Template is the view for a Component Classic HTML with additional Angular template-syntax <ul> <li *ngfor="let item of items"> This is {{item.name}} with ID={{item.id}} </li> </ul> Marc Dangschat 19

20 Architecture > Template <h1>{{title}}</h1> <ul> <li *ngfor="let todo of todos"> <input [(ngmodel)]="todo.completed" type="checkbox" title="completed"> <input [(ngmodel)]="todo.text" type="text" [class.completed]="todo.completed" title="{{todo.text}}"> <button (click)="remove(todo);">x</button> </li> </ul> <todo-details></todo-details> Marc Dangschat 20

21 Data Binding Marc Dangschat 21

22 Architecture Marc Dangschat 22

23 Naming Conventions Modules: class AppModule in le: app.module.ts Components: class AppComponent in le app.component.ts Templates: les: app.component.html, app.component.css Services: class: TodoService in le: todo.service.ts... Marc Dangschat 23

24 Outlook > Ahead-of-Time Compiler (AoT) Just-in-Time (JiT) Compiles at runtime, in the browser (performance) Takes longer to render a page Larger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler ( ngc ) as standin for the TypeScript compiler ( tsc ) Angular (2) is about 5x faster than AngularJS (1) Marc Dangschat 24

25 Outlook > Testing Required tools are being installed with the CLI tool The CLI base project contains some basic tests Jasmine: Basic testing framework. HTML test runner Angular Testing Utilities: Mock-services, network simulator, etc. Karma: Test runner (continuous integration) Protractor: End-to-end tests (e2e) Marc Dangschat 25

26 Sources docs.angularjs.org/guide/databinding angular.io/docs/ts/latest/guide/ngmodule.html angular.io/docs/ts/latest/guide/architecture.html angular.io/docs/ts/latest/cookbook/aot-compiler.html Deep Tree Benchmark angular.io/docs/ts/latest/guide/testing.html github.com/angular/angular-cli/blob/master/readme.md Marc Dangschat 26

27 The Fun Part Tasks: git clone cd web20_angular npm install npm start Output: localhost:3000 Marc Dangschat 27