-- # Objekte --- # Angular 2 * RIP * $scope * HTML template syntax * Dirty checking * Controllers * angular.module * jqLite * Interceptoren * Welcome * Object.observe hybrid * ECMAScript 6 / TypeScript * Komponenten * @ngModule * Reactive Programmierung (RxJs) * Hello Again * Services * Directives * Dependency Injection MVC -- # Warum die Änderungen? * Browserentwicklung * ECMAScript 6 * Web Components * Performance * Mobile * Wartbarkeit/Refactoring -- # Konzepte * Angular 2 nicht beschränkt auf (Web-)Browser * Server-Implementierung * Webbrowser * Einfach zu lernen und zu nutzen * Migration von AngularJS 1.x möglich * Architekturkonzepte * Wiederverwendbare Komponenten * Module * Routing * Pipes * Properties -- # Komponenten ```typescript import { Component } from '@angular/core'; @Component({ selector: 'my-component', template: `` }) export class MyComponent { constructor() { this.name = 'Max' } sayMyName() { console.log('My name is', this.name) } } ``` * ES6-Template Syntax -- # Template bindings * {{ }} - interpolation * [] - property binding * () for event binding * # for variable declaration * * for structural directives -- # Beispiel ```javascript // event handling // Two-Way-Binding // variable

``` * Komponenten Daten übergeben: ``` import { Component, Input } from '@angular/core'; @Component({ selector: 'user-profile', template: '

{{user.name}}

' }) export class UserProfile { @Input() user; constructor() {} } ``` -- # Output ```typescript import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'user-profile', template: '

Hi, my name is

' }) export class UserProfile { @Output() userUpdated = new EventEmitter(); constructor() { // Update user // ... this.userUpdated.emit(this.user); } } ``` ``` ``` ```typescript export class SettingsPage { constructor(){} userUpdated(user) { // Handle the event } } ``` --- # Services ```typescript import {Injectable} from '@angular/core'; import {User} from '@common/domain'; @Injectable() export class UserService { getUsers():User { ... } } ``` * ES6-Klassen + Injector-Annotation -- ```typescript @Component({ selector: 'user-root', providers: [UserService], template: ` Anzahl an Nutzern: {{users.length}} ` }) export class AppComponent { public users = User[]; constructor(private userService: UserService) { this.users = this.userService.getUsers(); } } ``` * Services lassen sich in Komponenten injecten * Singelton pro Modul * private Konstruktur-Parameter dank TypeScript -- # Beispiel für Interfaces in Services ```typescript import {Injectable} from '@angular/core'; import {SettingsService} from '@common/settings'; @Injectable() export class WebSettingsService implements SettingsService { ... getString(key: string): string { return sessionStorage.getItem(key); } setString(key: string, value: string): void { sessionStorage.setItem(key, value); } removeString(key: string): void { sessionStorage.removeItem(key); } ... } ``` --- # Module ```typescript import { HttpModule } from '@angular/http'; @NgModule({ // ... imports: [ BrowserModule, FormsModule, HttpModule ] // ... }) export class AppModule { } ```
* Module haben eigenen Scope * SharedModules to the Rescue! --- # Component Lifecycle * **ngOnInit** - Komponente wird Initialisiert (nach erstem ngOnChanges → Eigenschaften initialisiert) * **ngOnDestroy** - bevor Komponente zerstört wird * **ngDoCheck** - eigene Änderungserkennung * **ngOnChanges(changes)** - Änderungen in Bindings wurden erkannt * **ngAfterContentInit** - Inhalt wurde initialisiert * **ngAfterContentChecked** - jedes Mal, wenn Inhalt überprüft wurde * **ngAfterViewInit** - Views wurden initialisiert * **ngAfterViewChecked** - jedes Mal, wenn Views überprüft wurden -- * Implementierung des Lifecycle-Hooks * Observable in Service nutzen ```typescript import {Component, OnInit} from '@angular/core'; import {UserService,User} from '@common'; ... export class AppComponent implements OnInit { constructor(private userService: UserService) { } ngOnInit() { this.userService .getUsers() .subscribe((users: Array) => this.users = users); } } ``` --- # Los gehts ```javascript npm install -g angular-cli ng new PROJECT_NAME cd PROJECT_NAME ng serve ``` -- # Angular CLI * schneller Einstieg Scaffold | Usage --- | --- Component | `ng g component my-new-component` Directive | `ng g directive my-new-directive` Pipe | `ng g pipe my-new-pipe` Service | `ng g service my-new-service` Class | `ng g class my-new-class` Interface | `ng g interface my-new-interface` Enum | `ng g enum my-new-enum` Module | `ng g module my-module` --- # Angular 2 * TypeScript öffnet bereits jetzt für viele PHP und Java Entwickler die Tür in die JavaScript Welt * Klare Semantik, weniger Magie * Flexible Architektur * MVC --- # NativeScript * Open-Source-Framework zur Entwicklung mobiler Apps * JavaScript * TypeScript * Angular 2 * Plattform-Unterstützung * Android * iOS * (Universal Windows Platform)* * Native UI * Performance * Look and Feel * Reuse Code -- # App gehts ...  -- # Da geht noch mehr ...  -- # Demo * Desktop (**npm run start.desktop**) * Web (**npm run start.deving**) * App (**npm run start.livesync.ios**) -- # Best Practices / Lessons Learned * Stabilisierung der Angular2-Integration * Nativ * Fluch und Segen zugleich * iOS "einfacher" * Android * TypeScript hilft bei CodeSharing * Java2TS * WebPack Build --- >*“Angular 2 wird sein ganzes Potential wohl erst in einigen Jahren entfalten können”* > **Robin Böhm**, angularjs.de --- # Links * [eBook](https://www.gitbook.com/book/basarat/typescript/details) * [Two-Way-Binding](http://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html) * [AngularJS-Projekte sicher auf Angular 2 migrieren](http://heise.de/-3319156) * [Angular 2 Cheat Sheet](https://angular.io/docs/ts/latest/guide/cheatsheet.html) * [NativeScript-Demos](http://www.nativescriptsnacks.com/video.html) * [Groceries-Demo](https://github.com/NativeScript/sample-Groceries) * [Sharing Code Between Web and Native Apps](https://www.youtube.com/watch?v=R3nyG2xtzeQ) * [Advanced Code-Sharing mit Web-,Desktop- und Mobile-App](https://github.com/SoKaHH/angular-seed-advanced) * [Beispiel-App mit NativeScript](http://bit.ly/nativescript-angular-seed) * [Java2TS](https://github.com/vojtechhabarta/typescript-generator) ---  * [Präsentation](https://holisticon.github.io/presentations/devfest2016HH_angular2/) holisticon.github.io/presentations/devfest2016HH_angular2