第二章
第一節(jié)：Angular? 程序架構：
component: 組件的嵌套
service: 用來封裝可重用的業(yè)務邏輯代碼
指令： 向HTML元素添加自定義行為
module: 用來實現(xiàn)功能：登錄、注冊
第二節(jié) 搭建Angular 開發(fā)環(huán)境：
安裝 node.js? Angular CLI? Webstorm
Angular CLI :
1.查看 Angular CLI版本? ng -v
2.全局安裝： npm install -g @angular/cli
3 生成項目： ng new 項目名
路徑：src/app/app.component.ts
src文件：
component.ts: App應用的基礎
// 引入組件裝飾器：
import { Component } from "@angular/core";
// 輸出一個typescript 類：
export class AppComponent { title = 'app works' };? // 其中定義了組件的控制器
// 通過 組件元數(shù)據(jù)裝飾器 Component的元數(shù)據(jù) 將上述類 注解為一個組件：
@Component ({
selector: 'app-root',? //? 即該組件可以通過一個標簽來調(diào)用
templateUrl: './app.component.html',? // 定義組件的模板
styleUrls: ['./app.component.css']? // 定義組件的樣式
})
Component: 組件的概念
必備要素：
1.裝飾器（組件元數(shù)據(jù)裝飾器）：@Componet()? 用來告知框架如何處理typescript類，包含多個屬性，這些屬性的值叫做元數(shù)據(jù)澳厢，
框架根據(jù)這些元數(shù)據(jù)來渲染組件敌蚜、執(zhí)行相應的邏輯工碾。
2.模板：Template? 即視圖
3.控制器：Controller 控制數(shù)據(jù)岸啡、執(zhí)行代碼
4.數(shù)據(jù)綁定：讓模板和控制器相互作用鸵赖。
可選元素：
1.輸入屬性： @inputs)()? 接收外部傳入的數(shù)據(jù)? 使父組件可以直接將數(shù)據(jù)傳遞給子組件
2.提供器： providers? 做依賴注入
3.生命周期鉤子： Lifecycle Hooks? 組件從創(chuàng)建到銷毀會產(chǎn)生多個鉤子毕贼，從而用來觸發(fā)多個業(yè)務邏輯
4.樣式表： styles
5.動畫： Animations
6. 輸出屬性? @Outputs? 與輸入屬性相對
路徑： src/app/app.module.ts
@NgModule({? // 使用模塊裝飾器聲明一個模塊
declarations: [? //聲明模塊中有什么東西? 包括組件温赔、管道、指令
AppComponent
],
imports:[? // 聲明該模塊依賴的模塊? 可以使用其他模塊的組件帅刀、服務等
BrowserModule? // 瀏覽器模塊
FormModule,? // 表單模塊
HttpModule? ? // http 服務模塊
],
providers: [],? // 聲明模塊中提供了什么服務
bootstrap: [AppComponent]? // 聲明模塊的主組件
})
export class AppModule {}
第三節(jié)： 啟動Angular過程介紹：
angular-cli.json 文件解讀：
"project": {
"name": "angular-study"? ? // 項目名稱
},
"apps": [
{
"root": "src",? ? ? ? ? // 文件根路徑
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",? ? // 所在目錄： src/index.html
"main": "main.ts",? ? ? ? // 所在目錄： src/main.ts
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
......
main.ts? 文件解讀：
import { enableProdMode } from '@angular/core';
// 核心模塊的方法? 用來關閉Angular的開發(fā)者模式
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';? ? //告知瀏覽器用哪個模塊啟動Angular 項目
import { AppModule } from './app/app.module';? ? // 導入Angular應用的主模塊
import { environment } from './environments/environment';? // 引入環(huán)境配置
if (environment.production) {? // 若為開發(fā)環(huán)境让腹，則啟動該方法
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)? // 啟動應用? 這里是整個應用開始的起點
.catch(err => console.log(err));
應用啟動過程：
（1）在main.js文件中啟動應用，運行AppModule模塊
（2）在 app.module.ts文件應用主模塊中扣溺，加載相應的引入方法骇窍、依賴模塊，
并找到“主組件”：AppComponent.
（3）在src/index.html文件中找到主組件的css選擇器： 锥余，
（4）接著腹纳，在主組件AppComponent，即文件：src/app/app.component.ts中找到對應
的模板：app.component.html，用于替換該css選擇器嘲恍，并加載相應的樣式足画。
第四節(jié)： 開發(fā)準備：
安裝? admin-lte? 以及相關依賴的工具，生成框架模板佃牛。
第五節(jié)： 開發(fā)項目組件：
（1）angular-cli 生成相應組件： ng g component header
在app文件夾下生成header文件夾并生成4個文件：
src/app/header/header.component.css (0 bytes)? ? // 組件樣式
src/app/header/header.component.html (25 bytes)? // 組件HTML模板
src/app/header/header.component.spec.ts (628 bytes)? // 組件檢測文件
src/app/header/header.component.ts (329 bytes)? ? // 組件ts文件
同時更新了文件： app.module.ts 文件： 在該文件中引入header 組件
（2）在app-content 中插入表單組件淹辞，製造假數(shù)據(jù)，并渲染頁面：
在stock-manage.component.ts 文件中：
創(chuàng)建類：Stock:
export class Stock {
constructor (
public id: number,
public name: string,
public price: number,
public rating: number,
public desc: string,
public categories: Array) {
}
}
初始化通過中俘侠，創(chuàng)建數(shù)據(jù)：stocks:
private? stocks: Array;
// 初始化數(shù)據(jù)：
ngOnInit() {
this.stocks = [
new Stock(1,"第一支股票",1.99,3.5, "我的第一支股票象缀，哈哈哈哈", ['IT',"互聯(lián)網(wǎng)"] ),
new Stock(2,"第一支股票",1.99,4.5, "我的第一支股票，哈哈哈哈", ['IT',"互聯(lián)網(wǎng)"] ),
new Stock(3,"第一支股票",1.99,1.5, "我的第一支股票爷速，哈哈哈哈", ['IT',"互聯(lián)網(wǎng)"] ),
new Stock(4,"第一支股票",1.99,2.5, "我的第一支股票央星，哈哈哈哈", ['IT',"互聯(lián)網(wǎng)"] ),
new Stock(5,"第一支股票",1.99,1.5, "我的第一支股票，哈哈哈哈", ['IT',"互聯(lián)網(wǎng)"] )
];
第六節(jié)： 數(shù)據(jù)的嵌套與傳入：
實現(xiàn)功能： 股票評級
stock-manage.componnet.html:
{{ i + 1 }}
{{stock.name}}
{{stock.price}}
55%
遍歷數(shù)組? stocks;引入app-stars 組件并傳遞數(shù)據(jù)：[rating]="stock.rating"
stars組件：
[class.glyphicon-star-empty]="star">
根據(jù)數(shù)據(jù)判斷 選擇哪個類名
import { Component,Input, OnInit, ViewEncapsulation } from '@angular/core';? // 引入Input功能模塊
@Component({
selector: 'app-stars',
templateUrl: './stars.component.html',
styleUrls: ['./stars.component.css'],
encapsulation: ViewEncapsulation.None
})
export class StarsComponent implements OnInit {
@Input()
rating: number = 0;? // 定義引入? rating? 并初始化數(shù)據(jù)為0
stars: boolean[];
constructor() { }
ngOnInit() {
this.stars = [];
for (let i = 1;i<=5;i++) {? ? // 生成stars數(shù)據(jù)
this.stars.push(i>this.rating);
}
}
}
