ARCHITECTURE OVERVIEW

• Module
• Component
• Template
• Metadata
• Data Binding
• Service
• Directive
• Dependency Injection

Shadow DOM

Shadow DOM is part of the Web Components standard and enables DOM tree and style encapsulation.

Web Component

• Shadow DOM
• Template
• Custom Element
• Packaging

• ViewEncapsulation.None
  No Shadow DOM at all. Therefore, also no style encapsulation.
• ViewEncapsulation.Emulated
  No Shadow DOM but style encapsulation emulation.
• ViewEncapsulation.Native
  Native Shadow DOM with all it’s goodness.

Articles

• Shadow DOM 101 http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
• Shadow DOM 201 http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
• Shadow DOM 301 http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/
• Custom Elements http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

Questions:

• SEO
• Global styles sharing

Dependency Injection

Constructor injection

              
@Component({
  providers: [HeroService]
})
export class AppComponent {
  constructor(private _heroService: HeroService) { }
}
              
            

Hierarchical injectors

              
@Component({
  providers: []
})
export class HeroComponent {
  constructor(private _heroService: HeroService) { }
}
              
            

Component Interaction

• Parent <-> Children
• Space-travel

Reactive Programming

Change Detection

Two Phases

1. Developer is responsible for updating the application model.
2. Angular is responsible for reflecting the state of the model in the view.
   (The framework does it automatically on every VM turn.)

• TTL === 1(0)
• immutable
• observable
• zone.js