标签：代码块 自定义组件 zone.js 访问 装饰器 active function 编程 类中访问
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>
标签：代码块 自定义组件 zone.js 访问 装饰器 active function 编程 类中访问
原文地址：http://www.cnblogs.com/jlliu/p/7474322.html
