27
IntroductionAngularJS (1) released in 2009
Angular (2) released October
Short: ng
Framework
TypeScript, JavaScript, Dart
MIT license
Developed by Google
Marc Dangschat 2
IntroductionFocus on speed & performance
Cross platform
Focus on testability
Marc Dangschat 3
ECMAScript 5+ with TypeScriptTS 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
Classesclass 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
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
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
One-Way Data Binding
Marc Dangschat 8
Two-Way Data Binding
Marc Dangschat 9
Creating a new Angular ProjectInstall:
npm install -g angular-cli
Create project:
ng new my_projectcd my_projectng serve
This project is very much still a work in progress.“ “
Marc Dangschat 10
ArchitectureHTML-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
Architecture > ModuleEncapsulation
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
import {NgModule} from "@angular/core";import {BrowserModule} from "@angular/platform-browser";import {FormsModule} from "@angular/forms";
import {AppComponent} from "./app.component";import {TodoService} from "./todo.service";
@NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [AppComponent], providers: [TodoService], bootstrap: [AppComponent]})export class AppModule {}
Marc Dangschat 13
Architecture > ServiceServices encompass any constant, method and feature the appneeds
Logging service
Data service
App con guration
Income tax calculator
...
Marc Dangschat 14
@Injectable()export class TodoService { getTodos(): Promise<Todo[]> { return Promise.resolve(TODOS); }
add(text: string): Promise<Todo> { return Promise.resolve({id: TodoService.getUUID(), text: text, completed }
remove(todo: Todo): Promise<void> { return Promise.resolve(); }
private static getUUID(): number { return Math.floor(Math.random()*1000000000); }}
Marc Dangschat 15
Architecture > ComponentOne Component controls one View
Provides attributes and methods
Interface between business logic and view
Imports the required services via Dependency Injection
Marc Dangschat 16
Components & Templates
Marc Dangschat 17
@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
Architecture > TemplateA 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
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
Data Binding
Marc Dangschat 21
Architecture
Marc Dangschat 22
Naming ConventionsModules: 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
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 areincluded
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
Outlook > TestingRequired 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
Sourcesdocs.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 2015-02-09
angular.io/docs/ts/latest/guide/testing.html
github.com/angular/angular-cli/blob/master/README.md
Marc Dangschat 26
The Fun Part
Tasks: https://vcs.zwuenf.org/droelf/web20_angular
git clone https://vcs.zwuenf.org/droelf/web20_angularcd web20_angularnpm installnpm start
Output: localhost:3000
Marc Dangschat 27
