Biegral Blog

Angular是由google开发维护的一个开发跨平台应用的框架，同时适应PC端和移动端。

两个大版本 1.5 和4.0:4.0完全重写，1.5之前的叫angularJS，4.0叫angular.

Angular有两种环境搭建的方法，一种是使用angular提供的种子工程进行开发，另一种是使用Angular-cli的命令行进行开发。

种子工程的地址：https://github.com/angular/quickstart，clone到本地进行开发即可。

Angular-cli搭建本地开发环境：

打开命令行，检查自己本机是否已经安装node和npm，确保node在6.0以上，以及npm在3.0以上。安装成功后的效果如下图所示：

在自己本机全局安装angular-cli：命令如下：npm install -g @angular/cli，安装好之后使用ng -v检查是否安装成功。安装成功后的截图如下所示：

e2e文件夹：测试代码       

其他：项目的配置文件等

模块：angular的应用是模块化的，称为angular模块或者ngModules,angular至少有一个模块，称为根模块，通常称为AppModules，在大型应用中可能也会包含很多小的模块, angular中有很多的库也是模块化的，比如httpModule,FormModule以及routerModule等等。

组件：组件负责屏幕上的一小块区域。比如网页中的header、aside、footer、search、form等都可以作为一个组件。我们在组件的应用类中定义一些逻辑来支持视图的显示。

模板：我们通过组件的自带的模板来定义组件视图。模板以 HTML 形式存在，告诉 Angular 如何渲染组件。它看起来和html很像，有时候会添加

元数据：元数据告诉 Angular 如何处理一个类，以AppComponent为例，去掉@Component装饰器，它就是一个普通的ES6类，我们添加了@Component装饰器类之后angular才知道要把这个类渲染成组件，@Component中传入的参数就叫做元数据。angular根据元数据来渲染该类。

数据绑定：Angular 支持数据绑定，一种让模板的各部分与组件的各部分相互合作的机制。 我们往模板 HTML 中添加绑定标记，来告诉 Angular 如何把二者联系起来。

在jQuery时代，我们要手动的去获取dom中的数据或者值，并且手动的将后台传回的json数据append到html视图中，手动的去写这些逻辑太繁杂冗长，并且效率底下，容易出错，所以angular框架支持数据绑定。即之前需要手动写的逻辑框架帮我们实现了。

declarations - 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。
exports - declarations 的子集，可用于其它模块的组件模板。
imports - 本模块声明的组件模板需要的类所在的其它模块。
providers - 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
bootstrap - 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。

数据绑定的四种方式：   

      

指令：Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令提供的操作对 DOM 进行转换。

组件是一个带模板的指令；@Component装饰器实际上就是一个@Directive装饰器，只是扩展了一些面向模板的特(templateUrls,styleUrls)。

// angular/packages/core/src/metadata/directives.ts
export interface Directive {
  selector?: string; // 用于定义组件在HTML代码中匹配的标签
  inputs?: string[]; // 指令的输入属性
  outputs?: string[]; // 指令的输出属性
  host?: {[key: string]: string}; // 绑定宿主的属性、事件等
  providers?: Provider[]; // 设置指令及其子指令可以用的服务
  exportAs?: string; // 导出指令，使得可以在模板中调用
  queries?: {[key: string]: any}; // 设置指令的查询条件
}

export interface Component extends Directive {
  changeDetection?: ChangeDetectionStrategy; // 指定组件使用的变化检测策略
  viewProviders?: Provider[]; // 设置组件及其子组件(不含ContentChildren)可以用的服务
  moduleId?: string; // 包含该组件模块的 id，它被用于解析 模版和样式的相对路径
  templateUrl?: string; // 为组件指定一个外部模板的URL地址
  template?: string; // 为组件指定一个内联的模板
  styleUrls?: string[]; // 为组件指定一系列用于该组件的样式表文件
  styles?: string[]; // 为组件指定内联样式
  animations?: any[]; // 设置组件相关动画
  encapsulation?: ViewEncapsulation; // 设置组件视图包装选项
  interpolation?: [string, string]; // 设置默认的插值运算符，默认是"{{"和"}}"
  entryComponents?: Array<Type<any>|any[]>; // 设置需要被提前编译的组件
}