angular4-开发指南

angular4-开发指南

var elems = document.querySelectorAll('.original-english');

[].forEach.call(elems, function(el) {
    el.classList.remove("hidden");
});

中英文对比学习。中文网站翻译的不是很好，有些语义不是很明确，需要参考英文学习。

• 使用angular 扩展语法编写HTML模板
• 组件类管理模板
• 服务添加应用逻辑
• 模块打包发布组件和服务
• 引导根模块启动应用
• Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户交互。

架构图：

从以上架构图可以看出主要由八大部分：

• 模块-module
• 组件-component
• 模板-template
• 元数据-metadata
• 数据绑定-data binding
  • 单向绑定
  • 双向绑定
• 指令-directive
• 服务-service
• 依赖注入-dependency injection

模块

1. angular应用是模块化的，有自己的模块系统-NgModules,区别于JavaScript 模块。
2. 至少一个根模块，appModule
3. 每个模块是一个内聚代码块
4. angular模块是带有 @NgModule 装饰器的类,接收一个用来描述模块属性的元数据对象。其中最重要的属性是:
   • declarations:声明本模块中拥有的视图类.三大视图类：component，directive,pipe,在使用ng-cli命令创建时，会自动更新appModule
   • imports - 本模块声明的组件模板需要的类所在的其它模块
   • providers - 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
   • exports - declarations 的子集，可用于其它模块的组件模板。

5、我们通过引导根模块来启动应用

组件

组件控制视图，组件是个特殊的指令
组件通过一些由属性和方法组成的 API 与视图交互。

Angular creates, updates, and destroys components as the user moves through the application.

Your app can take action at each moment in this lifecycle through optional lifecycle hooks。

@angular/core/src/metadata/directives.d.ts

模板

通过模板定义组件视图，告诉angular如何渲染组件。

元数据

Metadata tells Angular how to process a class.

In TypeScript, you attach metadata by using a decorator.

component metadata：

The template, metadata, and component together describe a view.

Apply other metadata decorators in a similar fashion to guide Angular behavior. @Injectable, @Input, and @Output are a few of the more popular decorators.

数据绑定

As the diagram shows, there are four forms of data binding syntax. Each form has a direction — to the DOM, from the DOM, or in both directions.

Two-way data binding is an important fourth form that combines property and event binding in a single notation, using the ngModel directive.

数据绑定在模板与对应组件的交互中扮演了重要的角色。
数据绑定在父组件与子组件的通讯中也同样重要。

指令

• A component is a directive-with-a-template --组件是一种特殊指令
• structural directive-结构型指令通过在 DOM 中添加、移除和替换元素来修改布局。
  • *ngIf
  • *ngFor
  • *ngSwitch
• attribute directive --属性型 指令修改一个现有元素的外观或行为
  • ngModule
  • ngClass
  • ngStyle

服务

• 设计良好的组件为数据绑定提供属性和方法，把其它琐事都委托给服务。

依赖注入

• Angular使用依赖注入来为新组件提供他们需要的服务。
• Angular 通过查看构造函数的参数类型得知组件需要哪些服务
• 当Angular创建一个组件时，它首先要求一个注入器来获取组件所需的服务。
• 注入器维护其先前创建的服务实例的容器
• 如果请求的服务实例不在容器中，则注入器会生成并将其添加到容器中，然后将服务返回给Angular
• 当所有请求的服务都被解析并返回时，Angular可以使用这些服务作为参数调用组件的构造函数
• 注入器如何创建新实例：provider，provider 可以创建或返回服务，通常是服务类本身。
• 可以在模块中或组件中注册提供商
• 把它注册在组件级表示该组件的每一个新实例都会有一个服务的新实例。