理解 angular2 基礎概念和結構


前言:

  angular2官方將框架按以下結構划分:

  1. Module
  2. Component
  3. Template
  4. Metadata
  5. Data Binding
  6. Directive
  7. Service
  8. Dependency Injection

  本文簡單介紹一下,這些知識點,以淺入的方式理解angular2的基礎概念和結構。

 

一、Module (模塊)

 

  • Angular 是模塊化的.
  • Modules 導出 classes, function, values , 以便在其他模塊導入使用.
  • angular應用由模塊組成,每個模塊都做此模塊相關的事情

 

 組件、方法、類、服務等,他們都可以成為模塊。

 

 

module基本使用

  自定義一個模塊文件和main入口文件:

    app.component.ts

    main.ts

  

export class AppComponent { }  //新建 app.component.ts 並導出當前自定義模塊:

  

import { AppComponent } from './app.component';  //在入口文件main.ts 引用自定義模塊app.component:

  

import { Component } from 'angular/core';  //引入angular自帶模塊Component:

 

引用自定義模塊,需要加上路徑,ng會根據路徑找到模塊,而框架本身的模塊不需要路徑,它會自動匹配到相應模塊。

學習過node的,相信都應該理解。

 

二、Component (組件)

  在angular2中,Component 是我們構建頁面元素和邏輯的主要方式,而在angular1中要實現這些需要directives, controllers和scope。

在angular2, 他們都被合成到了Component里。

例子:

import {Component} from 'angular2/core'

@Component({
selector:
'my-component',
template:
'<div>Hello my name is {{name}}. <button (click)="sayMyName()">Say my name</button></div>'
})
export class MyComponent {
constructor() {
this.name = 'Max'
}
sayMyName() {
console.log(
'My name is', this.name)
}
}

  selector 指定了自定義標簽,template配置好了dom元素、綁定了數據和事件, this實際代替了angular1中的scope

  最后,在html里我們可以用<my-component></my-component>標簽創建當前Component。

 

三、Template (模板)

  angular2 的 html template大部分還是一般的html,只是會混合一些框架可識別的屬性或者指令,比如:()、{}、 {{}}、 [()] 等。實際就和一般的模板引擎差不多

<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<div *ngFor="let hero of heroes" (click)="selectHero(hero)">
{{hero.name}}
</div>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

 

四、Metadata (元數據)

  什么是元數據?元數據是關於數據的組織、數據域及其關系的信息。

在angular2中,如下例:

selector、templateUrl、directives、providers 他們都是元數據

import {Component} from 'angular2/core';
@Component({
selector:
'hero-list',
templateUrl:
'app/hero-list.component.html',
directives: [HeroDetailComponent],
providers: [HeroService]
})
export class HeroesComponent { ... }

 

  template, metadata, component 相互作用組成視圖,而metadata就是關聯組件和模板的數據。

 

五、Data Binding (數據綁定)

  用過angular的一個特色就是雙向綁定,這個在ng1里就已經赫赫有名了。

  如下圖,

圖中告知了數據的流動方向,

  {{value}}和[property]='value',變量綁定在Component中,只要在Component中控制變量值改變,dom中就會更新,它是單向的。

  (event)是事件綁定,是單向的,在dom中觸發,從而告知Component。

  [(ng-model)]或者[(ngModel)]實現雙向綁定, angular1中,我們要實現雙向綁定是用ng-model="xx",angular2中從用法上來說確實只是多加了兩個括號。

  angular2中有個通用規則,ng-model ngModel,中線分割和駝峰命名相等。

 

六、Directive(指令)

   angular模板是動態的,渲染模板的時候dom根據directive的規則轉換並渲染。

<div *ngFor="let hero of heroes"></div>  //*ngFor循環遍歷heroes

 

<input [(ngModel)]="hero.name">  //[(no-model])雙向綁定
 

  以上這些都是angular2自帶的指令。

  我們也可以自己定義指令。

  單從概念上來說,angular1和2的指令幾乎是一樣的。他們改變的不過是寫法和使用方式。

 

七、Service(服務)

   幾乎一切我們開發的代碼都可以算是服務。比如:一個特定的class、一個工具類或者一個組件。

服務就是一個概念,angular本身沒有為它實現什么基類。angular只是讓我們遵循一個規則,按照規則,我們寫出我們想要的實質代碼,

組成一個個小的服務,最后通過框架把它們組成我們的應用。這些服務都通過 “依賴注入”(Dependency Injection) 的方式為我們的應用提供服務。

 

八、Dependency Injection(依賴注入)

  “依賴注入”連接和應用在整個框架,當你想在一個“組件”里使用一個“服務”時,你需要通過“依賴注入”的方式,把服務載入到當前組件,

並在組件申明使用它。有兩種方法

  第一種:

bootstrap(AppComponent, [TheService]);

  這樣直接把這個service注入到整個app里面。然后這個app-component包括它所有的子模塊都能使用 TheService這個service。

在Angular2里面所有的service是單例的,一旦在當前模塊生成了單例service,它的子模塊都將共同使用它。他們都將操作同一個service。

  如果需要每個子模塊都使用唯一的service,就要使用第二種方式:

@Component({
selector:
'hero-editor',
providers: [RestoreService]
})

  在component的providers里面直接注入service。

  “依賴注入” 就是把我們需要的服務提供給我們應用的其他服務,讓它們之間能夠相互使用。

 

小結:

  我們這里大致介紹了下angular2的結構和這八個基礎知識,從入門來說,我們僅僅是了解一些淺顯的知識。

搞清楚基本結構和它們之間的關系,有利於后期的深入學習和使用。

通過本文, 再實踐一下angular2官網的 5 MIN QUICKSTART 會不會要好理解一些了呢?

最后附一張總結圖:

 

 

  

  以上圖片來自angular2官網,內容經過本人理解過濾,此文僅僅是學習筆記分享, 理解不深, 有望后續更新。

  

 

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com