[Day03]Angular 2教程:03 当个好的建筑师之Angular2架构

最新推荐文章于 2025-06-15 09:38:41 发布

opensourceLab

最新推荐文章于 2025-06-15 09:38:41 发布

阅读量497

点赞数 1

分类专栏： 30天精通Angular2 文章标签： angular javascript 前端框架架构

30天精通Angular2 专栏收录该内容

8 篇文章

订阅专栏

说明:本系列是30天精通Angular2系列，此教程会第一时间发布在最三方平台，希望给你带来帮助！

本文出自最三方Angular系列教程，转载请注明出处！

Angular2 架构

Angular2 主要的元素是 Components。 Angular2 的主要架构就是一堆的 Components。不过当然，组成 Angular的东西还包含 Module、Template、Metadata、Data Binding、Service、Directive、Dependency Injection，从下面这张图可以清楚看到彼此的关系。

开始画设计图啰

Component

Component 是一个用 TS 写出来的 Class，这个 Class 之后会被编译成 JS。而这些 Component 最后可以被包装变成独立的 Module 让其他 Mudule 使用。
一个 Component可能长得像这样：

 
        01//app.component.ts
 
        02import { Component } from '@angular/core';
 
        03 
 
        04@Component({
 
        05  moduleId: module.id,
 
        06  selector:  'my-app',
 
        07  templateUrl: 'app.component.html',
 
        08  styleUrls: ['app.component.css']
 
        09})
 
        10export class AppComponent implements OnInit {
 
        11    //Do Something
 
        12}

而他负责包装它的 Module 则可能长这样：

 
        01//app.module.ts
 
        02import { NgModule }      from '@angular/core';
 
        03import { AppComponent } from './app.component'; //引入 Component
 
        04import { BrowserModule } from '@angular/platform-browser';
 
        05@NgModule({
 
        06  imports:      [ BrowserModule ],
 
        07  providers:    [ Logger ],
 
        08  declarations: [ AppComponent ],
 
        09  exports:      [ AppComponent ],
 
        10  bootstrap:    [ AppComponent ]
 
        11})
 
        12export class AppModule { }

一个 Module可以包装很多 Component 给其他 Module 使用。

Metadata
再回来看简单的 Component：

 
        1import { Component } from '@angular/core';
 
        2 
 
        3@Component({
 
        4  selector:  'my-app',
 
        5  templateUrl: 'aa.component.html',
 
        6  styleUrls: ['app.component.css']
 
        7})
 
        8export class AppComponent { name = 'Angular'; }

Component 用称作 decorator function的 @Component来表示为 Metadata物件。 Metadata 用来绑定 HTML template 、CSS 和 Component。

至于 selector 则是告诉 Angular 这个 Component 要放在 index.html 里的自订标签 <my-app>。

 
        1//index.html
 
        2<body>
 
        3...
 
        4<my-app>Loading AppComponent content here ...</my-app>
 
        5...

Directive

共有三种 Directive：

Components directives：用来控制 HTML Template。是我们最常用到的 Directive。
结构性 directives：例如 ngFor (用来改变 HTML DOM，可以是增加或删掉) <div *ngFor="let hero of heroes">{{hero.fullName}}</div>
属性 directives：例如 ngStyle (用来改变 Elements 的 Style) <p [style.background]="'lime'">I am green with envy!</p>

我们用 Directives 来对 Metadata 做一些功能。

至于实际怎么用，可以使用@Directive或是@Component。简单区分的话：

@Directive适合直接用在已经存在的 DOM element。可以重复使用，一个 DOM element 可以有很 Directive。 @Component适合创建一个可以重复使用的 DOM element，通常用来创建 UI工具，此外一个 DOM elelment 只能有一个 Component，而且必须搭配@View或是templateUrl。

Data Binding

Interpolation

直接在 HTML 中插入变量

`1`	`<h1>{{employee.name}}</h1>`

One Way Binding 可以是任何 HTML property。像是innerText style。

 
        1<h1 [innerText]="employee.name"></h1>
 
        2<span [style.backgroundColor]="employee.favouriteColor"></span>

Two Way Binding

可以由使用者控制，像是选单、输入，也可以由程控。

`1`	`<input [(ngModel)]="employee.name"/>`

Event Binding 绑定事件，像是click、focus或blur <button (click)="sendForm()">Send</h1>

本文由最三方开源平台( http://www.zuisanfang.com/archives/view-2085-1.html)原创，转载请保留版权和链接!