Building Blocks - Components

• Angular 2 applications are built from Components
• Components are a combinaton of a view (template) and behaviour
• The main application component is the Root Component
• Each component can have Child Components
• The resulting Angular 2 application is a tree of components

Building Blocks - Directives

• In Angular 2, Directives are Components without a view
• Directives are used to attach behaviour to DOM elements
• Each Component is actually an extended Directive (with view)
• Directives can be used inside the Component's view (template) as needed

Building Blocks - Services / Dependency Injection

• Angualr 2 uses Services (providers) for business logic (no view)
• Angular 2 uses dependency injection to inject Services (providers) into componets
• Dependency injection in Angular 2 is hierarchical, resolving from child to parent

Building Blocks - Summary

Change Detection

• ​Angular 2 change detection
  • Detecting changes that required view updates
  • View updates changes are triggered by async operations (events, http requests, timer, user intervention)
  • In Angular 2, all browser async operations are "monkey-patched" for hooks using zone.js​​​
    • Zone.js implements an exectuion context that enables hooks on the executed context (start, end, error, async operations, etc.)
    • Angular 2 uses an extended zone.js version called ngZone

Change Detection

• ​Angular 2 change detection
  • ​Change detection is done at Component level (for each component's template bindings)
  • Change detection is executed from Root Component to all childs. (by default on all childs and on every change detected by ngZone)
  • Change detection strategy for each component can be controlled/skipped
  • Change detection is predicatable as it runs on a directed graph of components tree
  • Change detection is significantly
    more performant and predictable
    (no "digest" loop)

Communication - Observavles (RxJS)

• ​Angular 2 uses data streams for different types of communication
  • Stream is an async continuous data flow mechanism
• Angular 2 uses the RxJS framework, using Observable objects as streams
• Angular 2 uses RxJS for
  • Server communications (HTTP)
  • Component communication
  • Forms - user inputs data flow
  • Creating communication/custom data flows

Communication - Observavles (RxJS)

• Observables (RxJS) provide extended control over data flow
• Include built-in operators like: map, merge, filter, debounce, etc.
• Observables can be used instead of Promises (where appropriate)