Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 2 - Komponentenbasierte HTML5-Anwendungen

Angular 2 - Komponentenbasierte HTML5-Anwendungen

Mit Angular 2 als Webanwendungsframework können wir nun Anwendungen auf Komponentenbasis entwickeln und dadurch immer mehr in Windows- und desktopähnlichen Programmiermustern denken und agieren. Zusätzlich bietet sich die Integration von Angular mit TypeScript als Programmiersprache auch und vor allem für den .NET-verwöhnten Entwickler an. In dieser Session zeigt Christian Weyer, wie man mit Googles neuem Open-Source-SPA-Projekt echte Cross-Plattform-Business-Anwendungen schreiben und dabei die aktuellen mächtigen Features des Browsers und des Webs nutzen kann.

Christian Weyer

September 20, 2016
Tweet

More Decks by Christian Weyer

Other Decks in Programming

Transcript

  1. Christian Weyer • Co-founder, co-owner and principal consultant at Thinktecture

    AG • Focus on – Mobile & web-based application architectures – Interoperability, cross-device – Pragmatic end-to-end solutions • Microsoft MVP for ASP.NET (Architecture) ASP.NET Web API / vNext Advisory Board Member ASPInsider, AzureInsider • Google GDE for Web Technologies • [email protected] • @christianweyer 2
  2. 2016 • We want applications – real applications! • For

    any device • For any platform • Easy, eh? 3
  3. But… how? • .NET? • Web Stack – HTML5 –

    CSS3 & Flexbox – JavaScript / TypeScript – Angular – Tooling
  4. TypeScript • Typed superset of JavaScript that compiles to plain

    JavaScript – Compiles to ES5 or ES2015 • Preferred approach by the Angular team – Is not needed to build applications with Angular 2 • Types are optional – Pick and choose wisely – Metadata makes tooling strong 5
  5. Components in plain JavaScript 10 var AppComponent = ng.core .Component({

    selector: 'my-app', template: '<h1>My Angular 2 App</h1>' }) .Class({ constructor: function () { } });
  6. Component vs. Directive • Directives add behavior to a DOM

    element – Component can consist of directives • A component is a directive with a view 12 @Directive({ selector: '[x-large]' }) export class XLargeDirective { constructor(public el: ElementRef) { this.el.nativeElement.style.fontSize = 'x-large'; } } <span x-large>Extra Large Text</span>
  7. Dependency Injection 14 @Injectable() export class MyService { constructor(private _otherService:

    OtherService) { } public GetMyData() { this._otherService.doSomething(); } }
  8. Modules • Modularity system • Every Angular app has at

    least one module – Root module, conventionally named AppModule • Most apps have many more feature modules @NgModule({ imports: [ BrowserModule ], providers: [ Logger ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
  9. Bootstrapping an Application – ng 2 16 @Component({ selector: 'my-app',

    viewTemplate: '<div>This app is called {{ title }}</div>' }) // needs to be in AppModule class AppComponent { this.title = 'My super app'; } import ... from 'angular'; import {AppModule} from 'appModule'; platformBrowserDynamic().bootstrapModule(AppModule); <html> <body> <my-app></my-app> </body> import ... from 'angular'; import {AppModuleNgFactory} from 'appModuleNgFactory'; platformBrowser().bootstrapModuleFactory(AppModuleNgFactory); AOT
  10. Routing • Routing configuration 17 export const APP_ROUTING: ModuleWithProviders =

    RouterModule.forRoot(appRootRoutes); export const GAMES_ROUTING: ModuleWithProviders = RouterModule.forChild(gameRoutes); const appRootRoutes: Routes = [ { path: 'login', component: LoginComponent, name: 'Login' }, { path: 'list', component: DataList, name: 'List' } ]; const gameRoutes: Routes = [ { path: 'games', component: GamesRootComponent, children: [{ path: 'all', component: GameListComponent }] } ];
  11. Routing • Module imports @NgModule({ imports: [ BrowserModule, APP_ROUTING ],

    providers: [ Logger ], declarations: [ AppComponent ], exports: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
  12. Routing • Routing placeholder in view <div class="content-wrapper" style="min-height: 100%;">

    <section class="content scrolling-module"> <router-outlet></router-outlet> </section> </div>
  13. Data Flow & Component Public API • Data flows into

    a component via inputs • Data flows out of a component via outputs 20
  14. Change Detection with Zones • In Angular 2 no need

    to call $scope.$apply • Magic resides inside special library named zone.js – Overrides all standard browser APIs that are considered asynchronous – Injects its own implementation & uses it to monitor start and completion of any asynchronous activity • Async – Events: user events like click, change, input, submit – XMLHttpRequests: e.g. fetching data from REST API – Timers: setTimeout(), setInterval() 21
  15. Observables & HTTP • Angular heavily builds on observables –

    Observable object represents a push-based collection – Leverages RxJS • Angular 2 has a native HTTP service – Can use any HTTP functionality like the Fetch API in modern browsers – Returns observable streams 22
  16. Template Syntax 24 @Component({ selector: 'name-change', templateUrl: 'name-change.html' }) export

    class NameChange { constructor() { this.name = ''; } changeName(newName) { this.name = newName; } } <div> My name is {{ name }} </div> <div> <input #newname type="text"> <button (click)="changeName(newname.value)" [disabled]="newname.value == 'CW'"> Change Name </button> </div>
  17. Two-Way Bindings • One-time bindings by default – Simplification and

    performance • Two-way binding is syntactic sugar – ng-model uses combination of property and event binding 25
  18. Two-Way Binding Explained 26 <input [value]="name"> <p>Hello {{name}}</p> <input [value]="name"

    (input)="name = $event.target.value"> <p>Hello {{name}}</p> <input [ng-model]="name" (ng-model)="name = $event"> <p>Hello {{name}}</p> <input [(ng-model)]="name"> <p>Hello {{name}}</p>
  19. Build Process • In real projects we have a build

    process • Tools like gulp.js make life easier – Transpilation – Concatenation – Minification – and so on… • Angular 2 is agnostic to actual underlying build process • Angular CLI tool: https://cli.angular.io/ 27
  20. More Topics • View encapsulation • Forms in depth •

    Animations • AOT • Universal Angular • … and more ... 28
  21. Summary • Angular 2 builds heavily on the idea of

    Components – Well-known concepts for Windows developers • TypeScript feels familiar to C# developers • Tooling can strongly support development • Build process is a major asset • Start building today J 29
  22. Resources • Angular 2 – https://angular.io – https://github.com/angular/angular • The

    Core Concepts of Angular 2 – http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2 • Two Phases of Angular 2 Applications – http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications • Change detection in Angular 2 – http://victorsavkin.com/post/110170125256/change-detection-in-angular-2 • Angular 2 Template Syntax – http://victorsavkin.com/post/119943127151/angular-2-template-syntax • Augury – Chrome DevTools Plugin – https://augury.angular.io/ 30
  23. Resources • [email protected] • http://www.thinktecture.com • BoardZ Sample Application –

    https://github.com/thinktecture/boardz-cross-platform-sample • Thinktecture’s GitHub Repositories – https://github.com/thinktecture 31