初学angular2的一些总结 1.)

先从模块库中引入组件
import {Component} from “angular2/core”;
import {bootstrap} from “angular2/platform/browser”;
然后定义组件

@Component({ 
    Selector:’my-app’,这里的my-app是html上自己写的节点
    Selector:’[my-app]’,这里的my-app是节点属性<any my-app>…</any>
Selector:’[my-app=123]’,这里的my-app是节点属性值<any my-app=’123’>…</any>
    Selector:’.my-app’,这里的my-app是节点css属性<any class=’ my-app’>…</any>
    Styles:[‘h1{background:#fff;color:#ddd}’] 内联样式，作用是改变ui组件的外观
    styleUrls:[‘ez-greeting.css’] 外部样式，作用改变ui组件的外观
    properties:[‘name’,’country’] 为组件增加属性接口，中括号里面是成员变量，由外到内，调用者设置具体属性后才把具体属性值返回到被调用者自身属性中
    directives:[xxApp],在模板中使用自定义指令(组件是一种指令),这个directives属性应该写在最上面，xxApp应该是依赖被调用组件的类名 class xxApp。如果使用多个指令，写法应该是directives:[[xxApp],[ccApp]]
    events:[‘change’] 与properties属性作用方向相反，由内到外，事件触发后才反馈给调用者
    pipes:[xxxPipe]用法跟directives一样，用于自定义管道，需要先@Pipe({name:”xxx”}) 
calss xxxPipe{ 
    //管道类中必须实现的方法，input参数是指需要管道化的左边原始数据，args参数是指若干个可选参数。
transform(input,args){
 
}}
    Template:’xxxxx’ 需要替换的内容
})

定义一个类 class EzApp{}
最后渲染组件 bootstrap(EzApp);

//EzCard 
@Component({
 properties:["name","country"]
})

调用EzCard组件以及使用内容，在模板中注意指令对象的写法

//EzApp
@Component({
 directives : [EzCard],template : `<ez-card [name]="'雷锋'" [country]="'中国'"></ez-card>`
})

属性值绑定常量，两种写法(textContent不能改成其他随意的单词，如果要改样式的单词是style)：

//正确，Angular2识别出常量字符串表达式 'Hello,Angular2'
@Component({template:`<h1 [textContent]="'Hello,Angular2'"></h1>`})
//正确，Angular2识别出常量字符串作为属性textContent的值
@Component({template:`<h1 textContent="Hello,Angular2"></h1>`})

属性值绑定组件模型中的表达式，html属性已中括号形式绑定类中的构造函数的变量:

@Component({template:`<h1 [textContent]="title"></h1>`})
Class EzApp{
    Constructor(){
        This.title = “xxxxxx”
    }
}

(event)事件绑定，相当于on-click

<button (click)="roulette()">ROULETTE</button>

(下面的ngIf不管哪种写法I一定是大写)

[ngIf]=”trial==true”这样的指令一定要写在<template [ngIf]=”trial==true”></template>才有效
*ngIf=”trial==true”跟template=”ngIf  trial==true”指令可以随意写在html任何节点上。

NgFor的原始使用：

<template ngFor [ngForOf]="items" #item #i="index"> <li>[{{i+1}}] {{item}}</li> </template>

NgFor的语法糖使用，一般习惯用第二种写法:

//使用template attribute
<ANY template="ngFor #item of items;#i=index">...</ANY>
//使用*前缀
<ANY *ngFor="#item of items;#i=index">...</ANY>

自定义管道：

@Pipe({name:'ezp',pure:false})//pure为可选参数，用于判断在每个变化检查周期都执行管道的transform()方法，默认true，不检查
class EzPipe{
  transform(input,args){
  return input + " " +args.join(" ");
  }
}

使用上面的管道：

<!--结果："call join mary linda"--> {{ "call " | ezp:'john':'mary':'linda' }}

ngControl=”xxx” //使用控件租获得输入值

 [(ngModel)] = “xxx.ccc”// 实现模型与表单的双向绑定功能。

//在组件模板中使用
[ngFormControl]=”xxx”
//需要先在对应的类构造函数中创建control对象
This.xxx = new Control(“ccccccc”); //作用是初始化控件显示数据。

定义指令相关内容解释说明:

@Directive({
    Selector:”[xxx-cc]”,//括号里面的内容用于在调用该指令的组件模板中作为dom元素
Inputs:[“bgColor:xxx-cc”]//将dom对象的属性映射到指令对象的属性，bgColor需要在类中定义，在调用者组件的模板中使用样板<I [xxx-cc]=”’red’”>good</i>
Host:{//用于监听指令所在dom元素的事件，下面是监听点击、鼠标事件
    ‘(click)’:’onXxx()’,‘(mouSEOver)’:’onCccc()’
}
})

Class xxx{ // xxx将作为调用者组件中directives:[xxx]的指向
    Constructor(@Inject(ElementRef) er,@Inject(Renderer) renderer){//renderer用于代替直接的dom操作，然后在方法中使用
    //执行指令操作
    This.el = er.nativeElement;//获取指令所在的dom元素
    This.renderer = renderer;
}
set  bgColor(v){//这里的set作用是捕捉每个变化的时刻
    this.el.style.color = v;
    this.renderer.setElementStyle(this.el,”background”,v);//这里就使用renderer以及它自己的方法
}
onXxx(){};
onCccc(){};
}

服务的封装：
1.定义一个类，实现类里的方法。然后在需要用到的组件类中的构造器里new出来。(强耦合，不适合)
2.使用providers属性，

@Component({        
    providers : [EzAlgo]  //声明依赖，EzAlgo是封装好的服务类
})
class EzApp{
    //Angular2框架负责注入对象
    constructor(@Inject(EzAlgo) algo){
        //已经获得EzAlgo实例了！
    }
}

路由
1需要import{LocationStrategy,Router,ROUTER_DIRECTIVES,ROUTER_PROVIDERS}from “angular2/router”;
2 在组件中配置

router.config([
    {path:"/video",component:EzVideo,name:”Video”},{path:"/music",component:EzMusic,name:”Music”}
])

其中path值为请求路径，component值为组件类名，name值为这json对象用于作为点击跳转事件的实参。
3 在2组件中调用在构造函数中注入的(@Inject (Router) router)对象，调用router.navigate(ptah); //根据给定的url（path），选中组件并在outlet中激活，router对象其实是指向2中的router.config的配置信息，只不过这个指向处理是由框架去做。
4 在组件的@Component中的模板中使用<router-outlet></router-outlet>
作为组件内容替换展示的地方。另外还要使用属性directives:[ROUTER_DIRECTIVES],进行指令声明。
5 在启动时还要声明下依赖bootstrap(EzApp,[ROUTER_PROVIDERS]);

初学angular2的一些总结 1.)

猜你在找的Angularjs相关文章