One Framework. Angular - Fh-muenster


One Framework. AngularWeb 2.0Marc Dangschat

IntroductionAngularJS (1) released in 2009Angular (2) released OctoberShort: ngFrameworkTypeScript, JavaScript, DartMIT licenseDeveloped by GoogleMarc Dangschat2

IntroductionFocus on speed & performanceCross platformFocus on testabilityMarc Dangschat3

ECMAScript 5 with TypeScriptTS is superset JavaScript (ECMAScript 5 )CompilerSome features that are provided:Type annotations and compiler type-checkingClassesModulesOptional parameters and defaults.Marc Dangschat4

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 Dangschat5

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 Dangschat6

Model-View-ViewModel (MVVM)Variation of the Model-View-Controller (MVC) design patternSeparation of business logic and user interfaceAdditional information on MVVM next weekEmber.js uses it as wellProvides Two-Way Data BindingMarc Dangschat7

One-Way Data BindingMarc Dangschat8

Two-Way Data BindingMarc Dangschat9

Creating a new Angular ProjectInstall:npm install -g angular-cliCreate project:ng new my projectcd my projectng serveMarc Dangschat““ This project is very much still a work in progress.10

ArchitectureHTML- Templates with special Angular markupComponent -classes manage the templatesServices provide the business logic, database access, .Components and Services can be bundled in a ModuleMarc Dangschat11

Architecture ModuleEncapsulationTestabilityAll apps have at least one module, the Root-ModuleNaming convention:AppModuleAngular Libraries are modulesFormsModule , RouterModule , HttpModule ,.Import 3rd-party librariesMarc Dangschat12

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 Dangschat13

Architecture ServiceServices encompass any constant, method and feature the appneedsLogging serviceData serviceApp con gurationIncome tax calculator.Marc Dangschat14

@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();}}Marc Dangschatprivate static getUUID(): number {return Math.floor(Math.random()*1000000000);}15

Architecture ComponentOne Component controls one ViewProvides attributes and methodsInterface between business logic and viewImports the required services via Dependency InjectionMarc Dangschat16

Components & TemplatesMarc Dangschat17

@Component({moduleId:,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();}.Marc DangschatfilterCompleted(): Todo[] {return this.todos.filter(item !item.completed);}18

Architecture TemplateA Template is the view for a ComponentClassic HTML with additional Angular template-syntax ul li *ngFor "let item of items" This is {{}} with ID {{}} /li /ul Marc Dangschat19

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 Dangschat20

Data BindingMarc Dangschat21

ArchitectureMarc Dangschat22

Naming ConventionsModules: classAppModuleComponents: classTemplates: les:Services: class:in le:AppComponentapp.module.tsin leapp.component.tsapp.component.html , app.component.cssTodoServicein le:todo.service.ts.Marc Dangschat23

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

Outlook TestingRequired tools are being installed with the CLI toolThe CLI base project contains some basic testsJasmine: Basic testing framework. HTML test runnerAngular Testing Utilities: Mock-services, network simulator, etc.Karma: Test runner (continuous integration)Protractor: End-to-end tests (e2e)Marc Dangschat25

cs/ts/latest/cookbook/aot-compiler.htmlDeep Tree Benchmark DME.mdMarc Dangschat26

The Fun PartTasks: angulargit clone angularcd web20 angularnpm installnpm startOutput: localhost:3000Marc Dangschat27

Angular Web 2.0 Marc Dangschat Introduction AngularJS (1) released in 2009 Angular (2) released October Short: ng Framework TypeScript, JavaScript, Dart MIT license Developed by Google M a r c D n g s h t 2. Introduction Focus on speed & performance Cross platform Focus on testability M a r c D n g s h t 3. ECMAScript 5 with TypeScript TS is superset JavaScript .