Ganztages-Block Montag, 27.06.2016 - Angular 2

1. flatMap
2. switchMap
3. map
4. filter

• flatMap 

  transform the items emitted by an Observable into Observables, then flatten the emissions from those into a single Observable

• switchMap
  convert an Observable that emits Observables into a single Observable that emits the items emitted by the most-recently-emitted of those Observables

• map
  transform the items emitted by an Observable by applying a function to each item

• filter
   emit only those items from an Observable that pass a predicate test

1. in Http Module
2. in Router Module
3. in Async Pipe
4. in Reactive Forms
5. in Template driven Forms

right answer: all but 5.

• An Observable is an Iterable (Collection) which is constructed with 2 parts:
• With Observables Events become first class citizens in the language. 
  You can capture Events (data points in time) and compose stream of events
• Events can be mouse clicks, stock ticks, sensor messages....
• This structure allows for combining stock ticks with sensor messages because these 2 data streams
  are capture in the same format of an observables which can be composed in many ways.
• Part1: The Observable is the data producer which pushes values to the consumer
• Part2: The Observer is the data consumer. The observer subscribes to the observable
• The Observable is a lazy data structure . Lazy means you declare first the Observable with the operators
  and only when you subscribe to the Observable the data is pushed at you over time.
• Without subscription no data is pushed to the consumer.
• The Observable is a declarative structure. You describe with Operators like map, filter, flatmap... how
  the structure should look like and what result it should provide. It can be compare to Sql Statement
  creation where you declarative specify what you want: "Select title, Id from Document Where title = 'Observables

• Angular 2 makes havy use of Observables:

The following Modules are based on Observables:

• The Router
• The Http Module
• Change Detection is based on Observables
• The Reactive Forms Module

• Treeshaking is possible because Angular 2 is written in Es6 Module Format.
• In Es6 Module Import and Export are statically bound. Webpack 2 can now follow these 
  statically bound Import's and Export's and determine which code is not used and can be shaked out.

• Dead Code Elimination is happening when a minifyer tool detects what code is not run at runtime and can
  eliminate it

• AOT is just a build step: The Offline Compiler (outside the browser) compiles the appliation.
• The compiler is now not needed when the application is deployed (Size reduction of about 100 KB)

• The Angular 2 Compiler is written in Typescript
• The Compiler produces an Abstract Syntax Tree (AST)
• The AST allows for the possibility to render the Application on different Platform: Server, Desktop, Browser, Mobile
• The Compiler can run in the browser  (Just in Time Compilation) or outside the browser (Ahead of Time Compilation) 

With the help of select attribute it is possible to project more than one Html Block.:

@Component({

selector: 'tabs',

styles: […],

template: `

<div class="tab">

<div class="tab-nav">

<ng-content select="tab-title"></ng-content>

</div>

<ng-content select="tab-content"></ng-content>

</div>

`

})

Correct Answer: Content 1

a is correct, The Directive-Decorator has no template

• Everything is a Component (Component derives from Directive)
• The Application is a Tree of Components
• There is only one Root-Component (mostly called AppComponent) and 0 or more Feature-Components
• Angular 2 is a system of well defined Interfaces ( Component: @Input, @Output, Module:(Declarations, Imports, Exports, Providers
  Pipes)
• Angular 2 is statically typed with the help of Typescript.
• The Data flow is only one way: From Top down with the help of Property-Binding( [] ) and Bottom Up with the help of
  Event-Binding (  () ). Two-Binding is the combination of Property Binding and Event-Binding (  [()]  ) and should seldom be used.
• Projection (Transclusion in Angular 1) is an important concept in writing reusable Components. It allows for nesting Components.

• Rich Client Applikation im Browser
• Reines HTML5 und JavaScript (kein Plugin)
• Kein erneuter Page reload
• Die URL ändert nur hinter # (oder wie gewohnt)
• Back-Button funktioniert
• Links sind Bookmark-bar 
• “Funktionalität offline zu gehen”
• Harmoniert perfekt mit Restful Web Services

Components verwenden Services

Componenten (@Component)

• realisieren die User-Experience mit html und css
• sind das Bindeglied zwischen Aplikationslogik und view.
• Stellen Attribute und Methoden für das Data Binding
• Delegieren Aufgaben an Services

Services 

• Holen und Schreiben Daten vom Server
• Realisieren das Logging
• Erledigen alle Aufgaben, die nicht trivial sind.

Antwort:

1 - B

2 - C

3 - D

4 - A

Es gibt folgende zwei Ansätze:

• Template Driven
• Model Driven

Template Driven

Das Databinding und die Validierung geschehen direkt im Template. Der Controller hat damit nichts zu tun.

Model Driven 

Das Databinding und die Validierung geschiet ausschliesslich im Controller. Das Template wird somit "schlanker" und das Testing wird somit ebenfalls erleichtert.

Man kann diese beiden Methoden auch "mischen" indem man das Binding und die Meldungen im Template realisiert aber die Validierung im Controller macht.

• Modules
• Components
• Templates
• Metadata
• Data binding
• Directives
• Services
• Dependency injection

Pipes unter Angular2 entsprechen den "Filter" aus Angular 1.x

Mit den verschiedenen Pipes kann die Ausgabe im DOM formatiert werden.

Beispiel Currency: <p>{{totalAmount()}} | currency:'EUR':true</p>
Resultat: €5.55

Weitere bereits verfügbare Pipes:

• date

• uppercase

• lowercase

Es können zudem auch eigene Pipes geschrieben werden.

4)

Beschreibung:

https://angular.io/docs/ts/latest/guide/template-syntax.html

Die Komponente importieren

import { HeroDetailComponent } from './hero-detail.component';

Die Komponente als Direktive registrieren

@Component({
selector: 'my-app',
template: `...`
  directives: [HeroDetailComponent]
})

Die Komponente im template verwenden

<hero-detail [hero]="selectedHero"></hero-detail>

Bei ng-show wird der Dom gerendert, jedoch über das Displayproperty angezeigt oder nicht. Bei ngIf erscheint der Content nicht im Dom, falls der Value false entspricht. Dabei ist ngIf performanter, da nicht auf jedes Element ein "watcher" registriert wird.