Angular2 初学小记

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>