angular2

Angular

1.      Angular简介

Angular简称Angular，作为Angular.js1.x的升级，其表现了以下四点优势：

a. 改用组件式开发；

b. 性能更好（渲染更快、变化监测效率更高）；

c. 优先为移动应用设计；

d. 更加贴合未来标准（es6/es7，WebComponent）。

 

2.     开发环境：

a.       Node.js;

b.      Typescript:是JavaScript的一个超集，在es6的基础上做了进一步增强，主要有类型校验（Type+JavaScript，如privategreeting: string;）、接口（interface，如interfaceFullName{}）、装饰器（@符号紧接一个函数名称，如@Component）等特性。这使得代码编写更规范有利于项目开发。

c.       编码工具：

VS Code（微软推荐、TypeScript集成度最强）、Webstorm、Sublime、Atom

d.      打包工具

Webpack/gulp

 

3.         Angular的组织架构

①  package.json：Angular一系列基础的依赖包；

②  node_modules：npminstall 会根据package.json配置文件安装所有的依赖包；

③  tsconfig.json：配置了Typescript编译器的配置文件；

④  src    4.1 app.component.ts

      4.2 app.component.html

      4.3 app.module.ts  

4.4 main.ts 入口文件，通过这个文件串联整个项目

 

调用platformBrowserDynamic().bootstrapModule()方法来编译启动AppModule模块。

 

4.     Angular的八大核心概念

组件   模板   元数据 ；  数据绑定 ； 指令 ； 服务  依赖注入 ； 模块

 

4．1组件/模板/元数据

 

组件是构成Angular应用的基础单元，

 

组件主由三大部分构成

 

a.       导入部分（ import ）

要定义一个组件，我们总是要先导入符号Component

 

b.      装饰器（@Component）  

赋予一个类更丰富的信息（元数据）

 

c.       组件类（export class AppComponent）

组件业务逻辑

 

组件——生命周期钩子

 

ngOnInit：用于数据绑定输入属性之后初始化组件；

ngOnChanges：用于响应组件输入值发生变化时触发的事件；

ngOnDestroy：在销毁指令/组件之前触发。

 

其他：ngDoCheck、ngAfterContentInit、ngAfterContentChecked、ngAfterViewInit、ngAfterViewChecked

 

 

组件渲染：selector是一个css3选择器，当程序运行时，匹配到html中的hello标签；当组件逻辑执行完之后，p标签嵌入到hello标签里，而模板里的变量也会替换成具体的值。

 

模板：

内联模板：template

    外联模板：templateUrl

 

 

子组件获取父组件的数据，通过属性绑定

父组件获取子组件的数据，通过事件绑定，子组件发送。

 

4.2   数据绑定

4.2.1       插值

{{ }}

可直接使用组件类里的成员变量

4.2.2       属性绑定——单向

把组件类的数据传递到组件模板上

<input [value] = “data”  />

 

4.2.3       事件绑定——单向

把模板里产生的数据通过函数调用的方式传递到组件类

<input (keyup) = “handle($event)”  />

 

4.2.4       双向绑定

<input  [(NgModule)] = “myData”  />

实现数据双向流动

4.3   指令

 

4.3.1属性指令

改变组件模板的外观或者行为，如样式等。

// textColor= “red”

template:“<p  [style.color]=“textColor”>  hello, ng2! </p> ”

 

 

<p  style=“ color: red ”>  hello, ng2! </p>

4.3.2结构指令

改变组件模板的DOM结构，如ngIf用来插入或者移除DOM节点。

 

template:“<p  ngIf=“textColor”>  hello, ng2! </p> ”

 

当组件类中textColor存在是，DOM中存在此p标签

 

4.4   服务、依赖注入

服务是实现专一目的的逻辑单元，如日志服务

 

服务被组件使用需要引入依赖注入

 

组件引入服务实际引用的是服务类的实例，所以服务在被引入之前会有一个实例化的过程，并且这个实例通常需要被缓存起来，以被其它组件使用

因此管理实例化和实例缓存的过程正是依赖注入机制所实现的

 

 

 

4.5   模块

4.5.1文件模块

框架代码以模块形式组织。

4.5.2应用模块

功能单元以模块形式组织。

 

 

 

 

exports 可以将某些对象声明为公开的。