Angular 2.0 Overview – angular 2.0 series 1 – ARCHITECTURE OVERVIEW
Angular 2.0 Overview – angular 2.0 series 1 – ARCHITECTURE OVERVIEW
0 0
angular2.overview
Slides: angular2 overviewOn Github jiubao / angular2.overview
Angular 2.0 Overview
angular 2.0 series 1
Agenda
- Architecture Overview
- Shadow DOM
- Dependency Injection
- Decorator
- Component interaction
-
Change Detection
- zone, immutable, observable
- Q & A
- Coding time
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.
Available since Chrome 35+Web Component
- Shadow DOM
- Template
- Custom Element
- Packaging
- ViewEncapsulation.NoneNo Shadow DOM at all. Therefore, also no style encapsulation.
- ViewEncapsulation.EmulatedNo Shadow DOM but style encapsulation emulation.
- ViewEncapsulation.NativeNative 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) { }
}
Decorator
@Component({
selector: 'my-app',
template:`
{{title}}
My Heroes
`, styles:[` .heroes { margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 10em; } `] }) export class AppComponent { ...Component Interaction
https://angular.io/docs/ts/latest/cookbook/component-communication.html- Parent <-> Children
- Space-travel
Reactive Programming
The Reactive Extensions for JavaScript (RxJS)Change Detection
Two Phases
Developer is responsible for updating the application model. 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
Q & A
Let's coding
Angular 2.0 Overview
angular 2.0 series 1
By sxia - https://github.com/jiubao