Transcription
One Framework. AngularWeb 2.0Marc Dangschat dangschat@fh-muenster.de
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: 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();}.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 {{item.name}} with ID {{item.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: https://vcs.zwuenf.org/droelf/web20 angulargit clone https://vcs.zwuenf.org/droelf/web20 angularcd web20 angularnpm installnpm startOutput: localhost:3000Marc Dangschat27
Angular Web 2.0 Marc Dangschat dangschat@fh-muenster.de 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 .
