Angular 2

for angular 1.x developers

Architecture Overview

  • Architecutre main characteristics
    • Modularity
    • Using Web standards
    • Components based
    • Dependency Injection
    • Streamed communication
    • Unidirectional dataflow
  • Works natively with TypeScript
  • Provides a complete "ecosystem" (routing, testing, I18n, etc.) for building robust Web applications

Modularity

  • Angular 2 is built as a modular framework
    • UI rendering is separate from framework core
    • Core is also split into different modules that can be used separately and on demand
    • Communication is based on data streams using separate (RxJS) framework/module
  • Angular 2 modularity allows the framework to run in different ways/platforms:
    • Browser (ui thread)
    • Web-worker thread
    • Server (server side rendering)
    • Native apps (ui) - e.g NativeScript 

Web Standards

  • Angular 2 uses as much of the latest/existing Web standards
    • Support Web Components / Shadow DOM for style encapsulation
    • Support for Web workers
    • Using native DOM properties and events

 

http://webcomponents.org/

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

Component Router

  • ​Angular 2 introduces a new component router
  • The component router is similar in concept to other SPA based routers (known from Angular 1)
  • Angular 2 router is component based, controlling navigation and display of application components
  • Angular 2 component router is implemented as separate module

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)

Architecture stack

Made with Slides.com