1.与Angular1的异同

  几乎完全不同（什么鬼~

  1）保留一些特性 表达式仍旧用{{}}。

  2）属性指令变为驼峰式 ng-if ---> ngIf

  3）ng-repeat被ngFor代替

  4）ng-model ------> [(ngModule)] 注意符号

  5）Angular2中，自带原始指令要加哈希前缀 #

  6）Angular2新增了对移动端的设计

  7）Angular2摒弃了1中的核心：$scope

  8）Angular2使用zone.js来检测变化。

  9）新增组件类component

        可以说是取代了1中的controller： template&directive+controller = component。

        承担视图部分的工作，这一点类似于react中，组件可以相互嵌套，父子组件之间的通信的主要途径即组件的属性（react中组件间通信依靠props，也是组件的属性），但是component好像要与模板（module）配合插入视图，比较麻烦，隐约是个坑

   10）数据绑定stronger，绑定的机制也完全不同，新增属性的双向、单项绑定以及函数绑定等

   11）主要性能优化改进（有待深究），使用了分层依赖注入系统；基于单向树的变化检测；体积小；在移动端应用中，流量方面占优势；支持影子DOM

2. typeScript

   TypeScript是微软开发的自由和开源的编程语言，它是js的超集，扩展了js语法。typeScript文件后缀.ts。ts支持es6标准。

   推荐使用typeScript编写angular2代码。

   1）类型批注（目的？）：给参数、函数等增加静态类型声明，eg：

        function Area(width:number, right:number) : number {....}

        常用的批注类型：number,bool,string,没有类型被推断出时即默认为动态的any类型

   2）接口

        interface Shape{

             name:string;   //这里都是类型批注

             width:number;

             height:number;      

         }

         //将接口作为参数传入，接口本身也可以作为类型批注。shape的类型批注是shape

         Function Area(shape : shape){.....}

         console.log(area({ width:30, height:15}));

  3）箭头函数 （）=>

       详情见es6小记

  4)接口

   class Shape{

      area:number;

      color:string;

      //构造器 参数声明为public，以便在外部访问类中的成员 否则会报错~

      constructor( public name:string, width: number, height:number){

          this.area = width*eight;

      };

      functionName(){...}

   }

   //在外部调用该类

   import {user} from 'url'

   var square = new Shape('square' , 30, 30)

   类成员有public和private修饰符，类似于Java中，public成员可以在任何地方访问，private成员只允许在类中访问。

   5）继承

   类似于Java，类可以被继承并创建一个派生类，关键字extend,派生类继承基类的属性可以用super方法调用基类的构造函数与方法，也可以重写基类的方法

   class Shape3D extends Shape{
        volume:number;
        constructor:(public name:string,width:number,height:number){
             super(name,width,height);//调用基类的构造函数
             this.volume = length*this.area;
         };
         shoutout(){...}//重写基类的shoutout函数
         superShout(){
               return super.shoutout(); //调用基类的构造函数
         }
   }

3.ngModules模块

   Angular用ngModule来创建不同的功能相关的代码块（angular模块），在需要的时候只导入需要的angular模块

   每个angular应用至少需要一个root module 

   import {NgModule} from '2angular/core';

   @NgModule({

        imports:[ ],    //需要载入的其他模块

        providers: [ ],   //服务的创建者

        declarationa:[ ],   //视图类属于这个模块

        export:[ ],    //到处可在外部使用该模块

        bootstrap: [ ]  //应用的主视图，所有视图的宿主，只在根模块中声明

   })

4.component组件

   每个angular应用至少需要一个root component，在angular中，组件本质上是带有模板的一种指令

   import { component } from '@angualr/core';

   @Component({

       selector: 'my-app',   //CSS选择器，可以以<mg-app>标签的形式将组件引入父模板

       template: '<h1>hello angular<h1>'  //这里也可以填模板的URL

       directives:[ ]  //数组，包含此模板需要依赖的组件或指令

       provider:[ ]    //数组，包含组件所依赖的服务的提供者

   })

   //组件可以在文件外被使用 :   import {Appcomponent} from 'url'

   export  class  AppComponent{

       相关逻辑处理，这里相当于component的控制器

   }

   @component是angular的装饰器，它会把一份元数据（即组建的配置项）关联到AppComponent上

5.数据绑定

  1）插值：表达式仍旧是双括号的形式{{ }}，可以用getValue( )获取表达式的值 {{ 1+1+getValue() }} 

       表达式语法类似js，但不是全部，有的表达式是禁止的：赋值表达式（=，+=），new ,++,--, 位运算符（ | &）

  2）属性双向绑定：把元素的属性设置为组件中属性的值 形式： [ ]

       <img [src]='image'>  //这里img的src属性会被绑定到组件的属性imgUrl上

      a: angular自带指令：[hidden],[disable],[ngClass]...

      b: 自定义组件的属性：（实现父子组件之间的通讯的重要途径）

      c: HTML原生属性绑定

          html原生属性只是纯粹的属性，它们没有对应的属性可供绑定，所以不能直接给原生属性绑定东东，angular在此场景下，以单项数据绑定的形式（难道就是表达式？）提供解决办法：

          <tr><td [attr.colspan]='1+1' > </td></tr>

   3）CSS类绑定

        <button [style.color]=" isActive? 'red' : 'green' "></button> 这里样式属性可以是中线命名也可以是驼峰命名

   4）事件绑定 形式：（）

         <input (keyup) = 'onSave($event)'  (blur) =''>   这里也可以用 on-keyup的形式

         a: 获取用户输入值的方法：

             1.这里angular把事件对象存入$event中，可以用$event.target.value来获取用户输入的值

              2.从模板引用变量中获得<input #box (keyup)='0' >  这里box就是模板引用变量，它引用的是input元素本身，所以取值直接是box.value

         b:按键事件过滤

            key:enter  只在用户按下回车键时触发

    5）双向绑定

         <input [value]="" (input)=""  [(ngModel)] > 这里[ ]实现数据流从模板到组件，( )实现数据流从组件到模板，两者结合即实现双向绑定

6.指令

   属性指令：ngModel,ngIf,ngFor等

   结构指令：用来改变DOM树的结构

7.服务 Service

   封装的某一特定功能以供复用，复用形式是依赖注入（injector控制反转？）貌似类似于angular1中的？但是代码形式不同

   @Injectable()

    Export class Service{

        Add(){....}  //功能函数

    }

    服务调用：

    import {ServiceName} form 'url'

    再设置component的providers属性

    providers: [Userservice]

8.表单

   1）使用angular自带CSS类来更新控件状态

         控件已被访问过： ng-touched / ng-untouched

         控件值已发生变化：ng-dirty/ng-pristine

   2）提交表单 ngSubmit

        <form (ngSubmit)='onSubmit()'></form>