Angular 程序架構(gòu)
組件（Component）
是Angular的基本構(gòu)建塊，可以把它理解為包含業(yè)務(wù)邏輯和數(shù)據(jù)的交集。
組件的基本組成
-
裝飾器 @Component
組件元數(shù)據(jù)裝飾器
@Component({ selector: 'app-root', //被用作html標(biāo)簽調(diào)用 templateUrl: './app.component.html', //作為了組件的模版 styleUrls: ['./app.component.css'] //指向了一組CSS文件 })
模版 Template， 展現(xiàn)控制器的邏輯
-
控制器， 與模版實(shí)現(xiàn)數(shù)據(jù)綁定
export class AppComponent { title = 'app'; } -
可選的注入屬性
- 輸入屬性@inputs(),允許父組件可以傳遞數(shù)據(jù)到子組件
- 提供器 providers，提供依賴注入的
- 生命周期鉤子 lifecycle hooks
-
可選的輸出屬性
- 輸出屬性@Outputs()，組件間共享數(shù)據(jù)，向外傳播
- 樣式表 styles
- 動(dòng)畫 Animations
服務(wù)（Service）
用來封裝可重用的業(yè)務(wù)邏輯。服務(wù)可以被組件調(diào)用也可以被服務(wù)調(diào)用。
指令
允許你向html添加自定義行為。
模塊（Module）
是將上面三個(gè)部分整合起來成一部分的一個(gè)概念，如果說組件，服務(wù)，指令比作是大小形狀顏色不同的樂高積木的話，那么模塊就是可以把這些積木拼裝成不同玩具的分類形式。
模塊的基本組成
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- declarations 聲明模塊中有什么組件，在這里只能聲明組件，指令，管道
- imports 這個(gè)模塊依賴了哪些其他模塊
- providers 聲明模塊中應(yīng)用了什么服務(wù)
- bootstrap 聲明了模塊的自組件是什么
Angular 啟動(dòng)過程
main.ts 是啟動(dòng)的起點(diǎn)
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
這個(gè)過程是先找到主模塊 ==> AppModule，然后鏈?zhǔn)降膶⑺械囊蕾嚨腗odule都給加載進(jìn)來。
當(dāng)所有的Module加載完了之后，就會(huì)去尋找對(duì)應(yīng)的模版，默認(rèn)的root模版為 index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularTest</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
如何導(dǎo)入自己需要的包
這里使用bootstrap 和 jquery 舉例子：
npm install jquery --save
npm install bootstrap --save
//因?yàn)閍ngular 支持typescript， 所以原生的是不知道的，得下下面兩個(gè)包。
npm install @types/jquery --save
npm install @types/bootstrap --save
基本的命令
//生成新的項(xiàng)目
ng new 項(xiàng)目名稱
//生成帶有路由的項(xiàng)目
ng new 項(xiàng)目名稱 --routing
//生成新的組件
ng g component 組件名稱
