基礎部分：創建投票網站
- building user components
- user input from forms
- lists of objects to views
- user clicks
- deployer app to server
Building Components
ng new XX
目錄結構
根目錄主要是一些設定 config
├── README.md
├── .angular-cli.json // angular-cli configuration file
├── e2e/ // end to end tests
├── karma.conf.js // unit test configuration
├── node_modules/
├── package.json // npm configuration
├── protractor.conf.js // e2e test configuration
├── src/ // 項目源數據
└── tslint.json // linter config file
src 目錄結構
|– app/
| |– app.component.css
| |– app.component.html
| |– app.component.spec.ts
| |– app.component.ts
| |– app.module.ts
|– assets/
|– environments/
| |– environment.prod.ts
| |– environment.ts
|– favicon.ico
|– index.html
|– main.ts
|– polyfills.ts
|– styles.css
|– test.ts
|– tsconfig.json
打開src/index.html
<body>
<app-root>Loading...</app-root>
</body>app-root tag是底層application，位於app之下，
tag可以自定義
loading…會在app-root加載前顯示
創建component
給瀏覽器定義新的tag，就像原生 <select> or <form> <video>
ng generate component hello-world
會在app/目錄下生成 hello-world文件夾 包含
hello-world.component.css
hello-world.component.html
hello-world.component.spec.ts
hello-world.component.ts
同時自動註冊update app.module
導入依賴
hello-world.component.ts
import { Component, OnInit } from '@angular/core'; //導入component OnInit
@Component({ //ts語法 declaring 聲明 helloword 爲component
selector: 'app-hello-world', //註冊<app-hello-world> tag
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}@angular/core where to find the dependencies
templateUrl 導入HTML
template 也可以直接寫入HTML，但是目前IDE不支持對應的HTML語法高亮
@Component({
selector: 'app-hello-world',
template: `
<p>
hello-world works inline!
</p>
`
})styleUrls導入css, 一個style對應一個component
注意app.module.ts 自動生成的路徑可能有問題，
把../src/app/hello-world/hello-world.component換成
./hello-world/hello-world.component
使用component，直接在html文件tag即可
<app-hello-world></app-hello-world>
在組件中添加數據
創建並顯示用戶列表，需要先提交一個獨立用戶。
先新建一個component: user-item
ng generate component user-item
並添加到app.component.html
在user-item.component.ts中添加name屬性
export class UserItemComponent implements OnInit {
name: string; // added name property
constructor() {
this.name = 'Jack'; // set the name
}
ngOnInit() {
}
}- 設置name屬性，type爲string
- 在constucture中， 設置name的值
然後在user-item.component.html中用 {{ }}表達變量
<p>
Hello {{ name }} // 等於 this.name 也就是Jack
</p>*ngFor 遍歷 數組
新建user-list component
新建數組 array
在component.ts中，設置
names:string [];
...
this.names = ['A1','B1','C1']*ngFor
- 遍歷數組每一個值
- 每個值生成一個單獨的tag
<ul>
<li *ngFor="let name of names">Hello {{ name }}</li>
</ul>*ngFor 使用ngFor指定, 類似於for
let name of names 其中names指的是數組，name爲局部變量，也就是把names每一個數值分別分配到name變量中
hello {{ name }} 執行每一個name
連接兩個component
把UserItem作爲子組件導入到UserList中
UserItem作爲template,
- 配置 UserListComponent 渲染 UserItemComponent(in the template)
- 配置 UserItemComponent 接收name變量
- 配置 UserListComponent template 把name傳遞到 UserItemComponent.
在userItem中導入
import {
Component,
OnInit,
Input // <--- added this
} from '@angular/core';
...
export class UserItemComponent implements OnInit {
@Input() name: string; // <-- added Input annotation
...
}在userList中 渲染
<ul>
<li *ngFor="let UserName of names">
<app-user-item [name]="UserName"></app-user-item>
</li>
</ul>在Angular中 [name]表示遞入一個名爲name的值
引導程序
用Angular CLI作爲app主入口
ng serve 會根據 .anjular-cli.json中的配置，打開入口
.anjular-cli.json中main設定爲主入口，默認指定爲src/main.ts- 處理一個Angular module， 使用AppModule引導app， 路徑爲
src/app/app.module.ts - AppModule指定一個默認最高級的組件，默認爲AppComponent
- 其餘子組件依賴於AppComponent
NgMoudle Angular主要概念之一是模塊設計，當啓動一個Angular app,並不是直接啓動組件，而是創建一個NgMoudle指向一個需要加載的組件。本文路徑在src/app/app.module.ts
@NgModule({
declarations: [
AppComponent,
HelloWorldComponent,
UserItemComponent,
UserListComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})declarations 定義在這個模塊中的組件，Angular理念是：
必須把components在NgModule中聲明，才能使用
imports 導入這個模塊所需要的依賴(dependencies),用於templates 或者依賴注入(dependency injection)
providers 用於依賴注入（dependency injection）
bootstrap 啓動app時機，已AppComponent用作最高級別組件啓動