1.揭秘angular2学习 ------- angualr架构总览

1 核心模块介绍

angluar的六大重要部分：
1. 组件
2. 模版
3. 指令
4. 服务
5. 依赖注入
6. 路由

下面分别简单介绍。

1.1 组件

1. 页面由组件渲染呈现
2. 组件可层层嵌套，形成组件树，父子组件双向数据流动（Input：属性绑定，Output：事件绑定）
3. 组件和模版之间的数据交互成为数据绑定。（组件-模版：属性绑定，模版-组件：事件绑定）
4. 父子组件数据交互，父组件的模版充当桥梁的角色。
5. ng2触发数据流动的驱动是ng2的变化监测机制，ng2是一个响应式系统。angular是以适当的时机去检验对象的值是否被改动。通常是在用户操作事件，setTimeout或XHR回调等这些异步事件触发之后。angular捕获这些异步事件的工作是通过Zones库实现。

1.2 模版

1. angular模版基于HTML
2. 模版有一套强大的语法体系
   
   • 单向数据绑定(属性绑定，事件绑定，插值表达式；)
   • 双向数据绑定[(ngModule)]
   • 管道(数据格式化显示)
   • 自定义标签
   • 指令（属性型指令，结构型指令）

1.3 指令

1. 指令与模版模切相关，可以与DOM灵活交互
2. 组件也是指令的一种，区别在于组件带有单独的模版，即DOM元素。而指令作用域已有的DOM上。
3. 指令分为属性型指令、结构型指令
   
   • 属性型指令：改变元素的外观或行为。[ngStyle]=”“
   • 结构型指令：添加、修改、删除DOM，从而改变布局。*ngIf=”“

1.4 服务

1. 服务类似于工具库，常被引用在组建内部，扩展组件功能
2. 通过依赖注入，将服务注入进组件中。

1.5 依赖注入

1. 通过依赖注入，可将服务注入进组件、模块、其他服务中，而开发者不必关心服务是否初始化，帮助开发者管理模块依赖。
2. 服务每一次注入，该服务都会被创建出新的实例。
3. 组件的所有子组件默认继承父组件的的注入器对象。
4. 若组件的子组件再次注入，则子组件使用的是新创建的服务实例。父子组件的服务互相不会影响。

1.6 路由

1. 路由的作用是建立URL路径和组件之间的对应关系
2. 路由插座，当前活动路由的组件会在该标签后插入
3. 路由支持多重嵌套，实现子路由功能。children
4. 路由支持路径参数。
5. 路由守卫，可以看作是给路由过程中的各个阶段插入拦截。

1.7 应用模块

1. angular模块机制将上述6个重要部分组织起来，形成独立的模块。
2. 每个angular应用都有一个根模块，一般是AppModule，作为引用的入口。
3. 尽量将功能区分设计，不同的功能用不同的模块组织起来，最后用根模块将这些特性模块组织起来。

4. 模块间的交互angular已处理好：

   • 路由：自带路由的特性模块与导入到根模块后，特性模块的路由配置会自动与根模块的路由配置合并。
   • 组件和指令：默认情况下模块内的组件和指令是私有的。除非特性模块显示的暴露了某些组件和指令。
   • 服务：服务可以注入到组件中，也可以注入到模块中，但作用域不同。注入在组件中的服务，只能使用在该组件或其子组件中，而注入到模块里的服务在整个应用里都能使用，因为所有模块都共享着同一个应用级别的根注入器。

5. angular已经封装了不少常用的特性模块

   • ApplicationModule：封装一些启动相关的工具
   • CommonModule：封装一些常用的内置指令和内置管道等
   • BrowserModule：封装在浏览器平台运行时的一些工具库，同时将CommonModule和ApplicationModule打包导出，所以通常在使用时引入BrowserModule就可以了。
   • FormsModule和ReactiveFormsModule：封装表单相关的组件指令等。
   • RouterModule：封装路由相关的组件指令等。
   • HttpModule：封装网络请求相关的服务等。

1.8 angualr引导运行

angular应用的启动过程：编译器对模块、组件等进行编译，编译完成后才开始启动应用并渲染界面。

1. 动态引导：将所有代码加载到浏览器后，在浏览器进行编译。
2. 静态引导：开发时打包阶段进行编译，再将编译后的结果加载到浏览器。

动态引导和静态引导的区别在于编译时机不同。

动态引导示例代码：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

静态引导示例代码：

import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './app.module.ngfactory';

//AppModuleNgFactory 模块是经过AppModule编译后生成的模块。
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

效果对比：
1. 动态引导：开发流程简单明了，适合小型项目或者大型应用的开发阶段使用。
2. 静态引导：需要在开发阶段加入预编译流程，稍显复杂但性能提升明显，推荐使用。

1.9 源码结构介绍

文件模块
1. @angular/core：存放核心代码，如变化监测机制、依赖注入机制、渲染等，核心功能的实现、装饰器等。
2. @angular/common：存放一些常用的内置指令和内置管道等。
3. @angular/forms：存放表单相关的内置组件及内置指令等。
4. @angular/http：存放网络请求相关的服务等。
5. @angular/router：存放路由相关的组件和指令等。
6. @angular/platform-：存放的是引导启动相关的工具。angular可跨平台运行，不同平台对应不同的启动工具。如服务端的启动工具存放在@angular/platform-server下，浏览器的启动工具存放在@angular/platform-browser。

版权说明

本博客内所有揭秘angular2学习的文章都是学习《揭秘Angular2》---广发证券互联网金融技术团队著作这本书的学习总结及部分内容摘抄，若有侵权请与本人联系删除侵权内容。

qq:451354
邮箱：451354@qq.com