One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are...
Transcript of One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are...
![Page 2: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/2.jpg)
IntroductionAngularJS (1) released in 2009
Angular (2) released October
Short: ng
Framework
TypeScript, JavaScript, Dart
MIT license
Developed by Google
Marc Dangschat 2
![Page 3: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/3.jpg)
IntroductionFocus on speed & performance
Cross platform
Focus on testability
Marc Dangschat 3
![Page 4: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/4.jpg)
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
![Page 5: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/5.jpg)
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
![Page 6: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/6.jpg)
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
![Page 7: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/7.jpg)
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
![Page 8: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/8.jpg)
One-Way Data Binding
Marc Dangschat 8
![Page 9: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/9.jpg)
Two-Way Data Binding
Marc Dangschat 9
![Page 10: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/10.jpg)
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
![Page 11: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/11.jpg)
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
![Page 12: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/12.jpg)
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
![Page 13: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/13.jpg)
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
![Page 14: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/14.jpg)
Architecture > ServiceServices encompass any constant, method and feature the appneeds
Logging service
Data service
App con guration
Income tax calculator
...
Marc Dangschat 14
![Page 15: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/15.jpg)
@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
![Page 16: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/16.jpg)
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
![Page 17: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/17.jpg)
Components & Templates
Marc Dangschat 17
![Page 18: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/18.jpg)
@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
![Page 19: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/19.jpg)
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
![Page 20: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/20.jpg)
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
![Page 21: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/21.jpg)
Data Binding
Marc Dangschat 21
![Page 22: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/22.jpg)
Architecture
Marc Dangschat 22
![Page 23: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/23.jpg)
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
![Page 24: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/24.jpg)
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
![Page 25: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/25.jpg)
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
![Page 26: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/26.jpg)
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
![Page 27: One Framework. Angular - fh-muenster.deLarger download: Angular compiler and unused libraries are included Template errors are thrown at runtime Angular compiler (ngc) as standin for](https://reader034.fdocuments.us/reader034/viewer/2022042305/5ed14dd9ba5b4d48cc0e3e53/html5/thumbnails/27.jpg)
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