angular2－总览

angular1和angular2大的变动部分：
广义上讲：
angular1包含5部分：

• Directives
• Controllers
• Scopes
• Services
• Dependency Injection

然后angular干掉了：

• $scope (双向数据绑定，当然angular2通过'([value1])=value2'的方式也可以实现双向数据绑定)
• Directive Definition Objects
• Controllers
• angular.module

• Components (可以想象成“directives”)
• Services;(当然相应的引进了DI，zones等。)

Checking for changes:
In order to evaluate what changed, Angular provides differs. Differs will evaluate a given property of your directive to determine what changed.
There are two types of built-in differs: iterable differs and key-value differs.
Iterable differs
Iterable differs should be used when we have a list-like structure and we’re only interested on knowing things that were added or removed from that list.
Key-value differs
Key-value differs should be used for dictionary-like structures, and it works at the key level. This differ will identify changes when a new key is added, when a key removed and when the value of a key changed.
Zones确实很强大了，Zones检测的场景一般在如下几方面，
1.当Dom Event触发的时候。（例如click，change等）
2.当一个HTTP请求被解析的时候。
3.当一个计时器被触发的时候。（例如SetTimeout或者SetInterval）
但是有几个方面Zones是检测不到了，主要是如下场景
1.当异步执行一个第三方库的时候。
2.对于不可改变的数据（immutable data）
3.Observables（是Rxjs的一部分，也是异步的解决方案，同时是处理数据的一种方案。）
这时候ChangeDetectionStrategy.OnPush就可以解决这些场景。

angular2核心库常用组件：
@angular/common：
CORE_DIRECTIVES,FORM_DIRECTIVES,FormBuilder,ControlGroup,Validators,AbstractControl,Control， ROUTER_DIRECTIVES,ROUTER_PROVIDERS,RouteDefinition,RouterLocationStrategy,HashLocationStrategy,APP_BASE_HREF,CORE_DIRECTIVES,NGIF,

@angular/core核心库常用组件：
生命周期类型：
Oninit,OnDestroy,DoCheck,Onchanges,AfterViewInit,AfterViewChecked,AfterContentinit,AfterContentChecked,
DI类型：Injectable,bind,Inject,provide,ReflectiveInjector,
常用类型：Directive,Query,QueryList,ContentChildren,EventEmitter,
Ref类型：ElementRef,viewContainerRef,TemplateRef,
detection类型：ChangeDetectionStrategy,ChangeDetectorRef,

@angular/http核心库常用组件：
HTTP,Response,HTTP_PROVIDERS,BrowserXhr,Headers,RequestOptions,URLSearchParams.

@angular/router-deprecated核心库常用组件：
常用部分：@RouteConfig,RouterLink,RouterOutlet
ROUTER_PROVIDERS,ROUTER_DIRECTIVES,RouteRegistry,Location,RouteParams,
Router,ROUTER_PRIMARY_COMPONENT.
尤其是：RouterOutlet对应angular1的ui-view;routerLink对应angular1的ui-sref;
定义basehref的两种方式：
1.bootstrap(RoutesDemoApp,[ROUTER_PROVIDERS,provide(APP_BASE_HREF,{useValue:’/’})]);
2.在index.html中，.

Dependency Injection

Dependency Injection in Apps
When writing our apps there are three steps we need to take in order to perform an injection:
1. Create the service class
2. Declare the dependencies on the receiving component and
3. Configure the injection (i.e. register the injection with Angular)
configure the injection
• Inject a (singleton) instance of a class
• Call any function and inject the return value of that function
• Inject a value
• Create an alias

typescript:
1.constructor中，当用public定义变量的时候，例如，

    "constructor(
        @inject('pinService') public pinService: pinService
      )"

这里public的用法是，首先在这个class上定义变量pinService，把解析@inject(‘pinService’)后的值赋给pinService，其次是下面就可以直接用this.pinService来调用这个变量了，也就是直接把变量绑定到this上。

Built-in Components:
1.
ngIf:used when you want to display or hide an element based on a condition
example:“<div *ngIf=“false”>”
2.
NgSwitch:Sometimes you need to render different elements depending on a given condition.
example:

    "<div class="container">
      <div *ngIf="myVar == 'A'">Var is A</div>
      <div *ngIf="myVar == 'B'">Var is B</div>
      <div *ngIf="myVar != 'A' && myVar != 'B'">Var is something else</div>
    </div>"

or “<div class=“container” [ngSwitch]=“myVar”>

    "<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
    Uses fixed white text on blue background
    </div>
    <div [style.background-color]="colorinput.value" style="color: white;">
    {{ colorinput.value }} background </div>
    "

4.
NgClass:The first way to use this directive is by passing in an object literal. The object is expected to have the keys as the class names and the values should be a truthy/falsy value to indicate whether the class should be applied or not.
example:

    ".bordered {
    border: 1px dashed black; background-color: #eee;
    }
    <div [ngClass]="{bordered: false}">
      This is never bordered</div>
      <div [ngClass]="{bordered: true}">
      This is always bordered</div>
    </div>
    "

5.
NgFor:The role of this directive is to repeat a given DOM element (or a collection of DOM elements), each time passing it a different value from an array.
examples:

      this.cities = ['Miami', 'Sao Paulo', 'New York'];
      <h4 class="ui horizontal divider header"> Simple list of strings
      </h4>
      <div class="ui list" *ngFor="let c of cities";let num = index">
      <div class="item">{{ c }}</div></div>

6.
NgNonBindable:We use ngNonBindable when we want tell Angular not to compile or bind a particular section of our page.
examples:

    "<div>
      <span class="bordered">'{{'content '}}'</span>
      <span class="pre" ngNonBindable>&larr; This is what'{{ 'content' }}'rendered </span>
    </div>"

Angular2 Router:
1.改变路由从一个url到另一个url的过程如下：