AngularJS2 学习笔记——angularjs2架构

学习资源：
http://www.runoob.com/angularjs2/angularjs2-architecture.html

Angular 2 应用程序主要由以下8个部分组成：

1、模块 (Modules)
2、组件 (Components)
3、模板 (Templates)
4、元数据 (Metadata)
5、数据绑定 (Data Binding)
6、指令 (Directives)
7、服务 (Services)
8、依赖注入 (Dependency Injection)

模块 Module

模块由一块代码组成，可用于执行一个简单的任务。
Angular 应用是由模块化的，它有自己的模块系统：NgModules。
每个 Angular 应该至少要有一个模块(根模块)，一般可以命名为：AppModule。
Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象。

几个重要的属性：

• declarations （声明） - 视图类属于这个模块。 Angular 有三种类型的视图类： 组件 、 指令 和 管道 。
• exports - 声明（ declaration ）的子集，可用于其它模块中的组件模板 。
• imports - 本模块组件模板中需要由其它导出类的模块。
• providers - 服务的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。
• bootstrap - 应用的主视图，称为根组件，它是所有其它应用视图的宿主。只有根模块需要设置 bootstrap 属性中。

app/app.module.ts 示例

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],providers:    [ Logger ],declarations: [ AppComponent ],exports:      [ AppComponent ],bootstrap:    [ AppComponent ]
})
export class AppModule { }

通过引导根模块来启动应用：
app/main.ts

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

platformBrowserDynamic().bootstrapModule(AppModule);

组件 Components

组件是构成 Angular应用的基础和核心，可用于整个应用程序中。
组件知道如何渲染自己及配置依赖注入。

创建Angular组件的方法：

1. 从 @angular/core 中引入 Component 修饰器
2. 建立一个普通的类，并用 @Component 修饰它
3. 在 @Component 中，设置 selector 自定义标签，以及 template 模板

模板 Templates

<div> 网站地址 : {{site}} </div>

元数据 Metadata

元数据告诉Angular 如何处理一个类。

@Component({
   selector : 'mylist',template : '<h2>菜鸟教程</h2>'
   directives : [ComponentDetails]
})
export class ListComponent{...}

在TypeScript中，使用装饰器(decorator)来附加元数据。

@Component 装饰器能接受一个配置对象，并把紧随其后的类标记成了组件类。
Angular 会基于这些信息创建和展示组件及其视图。
@Component 中的配置项说明：
- selector - 一个 css 选择器，它告诉 Angular 在 父级 HTML 中寻找一个 <mylist> 标签，然后创建该组件，并插入此标签中。
- templateUrl - 组件 HTML 模板的地址。
- directives - 一个数组，包含 此 模板需要依赖的组件或指令。
- providers - 一个数组，包含组件所依赖的服务所需要的依赖注入提供者。

数据绑定

插值 : 在 HTML 标签中显示组件值。

<h3> {{title}} <img src="{{ImageUrl}}"> </h3>

属性绑定: 把元素的属性设置为组件中属性的值。

<img [src]="userImageUrl">

事件绑定: 在组件方法名被点击时触发。

<button (click)="onSave()">保存</button>

双向绑: 使用Angular里的NgModel指令可以更便捷的进行双向绑定。

<input [value]="currentUser.firstName"
       (input)="currentUser.firstName=$event.target.value" >

指令 Directives

<li *ngFor="let site of sites"></li>
<site-detail *ngIf="selectedSite"></site-detail>

服务 Services

示例：一个日志服务。

export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

依赖注入

Angular 能通过查看构造函数的参数类型，来得知组件需要哪些服务。 例如， SiteListComponent 组件的构造函数需要一个 SiteService:

constructor(private service: HeroService) { }

当 Angular 创建组件时，会首先为组件所需的服务找一个注入器（ Injector ） 。 注入器是一个维护服务实例的容器，存放着以前创建的实例。 如果容器中还没有所请求的服务实例，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular 。 当所有的服务都被解析完并返回时， Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!