該文章主要面向?qū)?angular感興趣前端童鞋餐胀。在國內(nèi)哟楷，大多企業(yè)使用的技術(shù)棧是vue、react否灾，鮮有公司使用angular卖擅，而我恰好用到，故記錄并分享。
通過這篇文章惩阶，你能了解到以下幾點(diǎn)：
- angular環(huán)境配置
- 開發(fā)工具配置
- CLI工程結(jié)構(gòu)
- 工程源碼文件結(jié)構(gòu)
- 項(xiàng)目創(chuàng)建
一挎狸、angular環(huán)境配置：
Node => NPM/CNPM => Angular CLI
1.安裝node.js是使用npm管理項(xiàng)目依賴的軟件包，由于網(wǎng)絡(luò)原因断楷，可使用cnpm作為替代的包管理工具锨匆，使用angular CLI 使我們無需理會(huì)復(fù)雜的配置，更專注Angular.
2.安裝完畢后冬筒，在控制臺(tái)輸入：
npm install -g @angular/cli
3.查看版本
angular version
二恐锣、開發(fā)工具配置：
-
Vscode 的推薦拓展：
image.png - Chrome 的推薦擴(kuò)展：Angular DevTools
方便調(diào)試程序，可在 Chrome 網(wǎng)上應(yīng)用店中找到 Angular DevTools舞痰。
三土榴、CLI工程結(jié)構(gòu)：
| -- myProject
| -- .editorconfig // 用于在不同編輯器中統(tǒng)一代碼風(fēng)格
| -- .gitignore // git中忽略文件列表
| -- .README.md // Markdown格式的說明文件
| -- .angular.json // angular 的配置文件
| -- .browserslistrc // 配置瀏覽器兼容的文件
| -- .karma.conf.js // 自動(dòng)化測試框架Karma的配置文件
| -- .package.json // NPM包定義文件
| -- .package-lock.json // 依賴包版本鎖定文件
| -- .tsconfig.app.json // 用于app項(xiàng)目的TypeScript的配置文件
| -- .tsconfig.spec.json // 用于測試的TypeScript的配置文件
| -- .tsconfig.json // 整個(gè)工作區(qū)的TypeScript的配置文件
| -- .tsconfig.spec.json // 用于測試的TypeScript的配置文件
| -- .tslint.json // TypeScript的代碼靜態(tài)掃描配置
| -- .e2e // 自動(dòng)化集成測試項(xiàng)目
| -- .src // 源代碼目錄
| -- .favicon.ico // 收藏圖標(biāo)
| -- .index.html // 收藏圖標(biāo)
| -- .main.ts // 入口 ts文件
| -- .polyfill.ts // 用于不同瀏覽器兼容版本加載
| -- .style.css // 整個(gè)項(xiàng)目的全局的css
| -- .test.ts // 測試入口
| -- .app // 工程源碼目錄
| -- .assets // 資源目錄
| -- .environments // 環(huán)境配置
| -- .environments.prod.ts // 生產(chǎn)環(huán)境
| -- .environments.ts // 開發(fā)環(huán)境
四、工程源碼文件結(jié)構(gòu)
1.app目錄：
app目錄是要編寫的代碼目錄响牛。在新建項(xiàng)目時(shí)命令行已經(jīng)默認(rèn)生成出來了玷禽。
2.app目錄中的app.component.ts：
該文件表示組件，組件是Angular應(yīng)用的基本構(gòu)建模塊呀打，可理解為一段帶有業(yè)務(wù)邏輯和數(shù)據(jù)的html
import { Component,} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
接下來矢赁，我們來分析app.component.ts文件中的每一段代碼：
import {Component} from '@angular/core';
這段代碼是從Angular核心模塊里面引入了component裝飾器
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
這段代碼是用裝飾器定義了一個(gè)組件以及組件的元數(shù)據(jù) 所有的組件都必須使用這個(gè)裝飾器來注解，組件元數(shù)據(jù) Angular會(huì)通過這里面的屬性來渲染組件并執(zhí)行邏輯
-
selector是一個(gè)css選擇器聚磺。表示該組件可通過app-root的HTML標(biāo)簽來調(diào)用坯台，index.html中有個(gè)<app-root>Loading...</app-root>標(biāo)簽炬丸，這個(gè)標(biāo)簽用來展示該組件的內(nèi)容瘫寝。 -
templateUrl指定了一個(gè)html文件作為組件的模板，定義了組件的布局和內(nèi)容稠炬。在這里定義app.component.html焕阿，最終在index.html中<app-root>/<app-root>這個(gè)標(biāo)簽的內(nèi)容將展示app.component.html里面的內(nèi)容。也就是templateUrl所定義的頁面定義了用戶最終看見的頁面的布局和內(nèi)容首启。 -
styleUrls指定了一組css文件暮屡。可以在這個(gè)css中編寫這個(gè)組件模板要用到的樣式毅桃。也就是app.component.html和app.component.css兩個(gè)文件褒纲。
export class AppComponent {
title = 'hello Grit';
}
這個(gè)類實(shí)際上就是該組件的控制器，我們的業(yè)務(wù)邏輯就是在這個(gè)類中編寫
-
AppComponent本來就是一個(gè)普通的typescript類钥飞，但是上面的組件元數(shù)據(jù)裝飾器告訴Angular莺掠，AppComponent是一個(gè)組件，需要把一些元數(shù)據(jù)加到這個(gè)類上读宙，Angular就會(huì)把AppComponent當(dāng)組件來處理
3.app文件中的app.module.ts：
該文件表示模塊
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ScrollableTabComponent,ImageSliderComponent } from './components';
@NgModule({
declarations: [
AppComponent,
ScrollableTabComponent,
ImageSliderComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Angular 應(yīng)用是模塊化的彻秆，它擁有自己的模塊化系統(tǒng)，稱作 NgModule。每個(gè) Angular 應(yīng)用都至少有一個(gè) NgModule 類唇兑，也就是根模塊酒朵，在app.module.ts文件中，這個(gè)根模塊就可以啟動(dòng)你的應(yīng)用扎附。
declarations（可聲明對(duì)象表） —— 那些屬于本 NgModule 的組件蔫耽、指令、管道留夜。exports（導(dǎo)出表） —— 那些能在其它模塊的組件模板中使用的可聲明對(duì)象的子集针肥。imports（導(dǎo)入表） —— 導(dǎo)入其他模塊providers—— 依賴注入bootstrap—— 設(shè)置根組件
五、項(xiàng)目創(chuàng)建香伴、運(yùn)行
ng new myProject //項(xiàng)目默認(rèn)會(huì)新建一個(gè)目錄（項(xiàng)目工程）
cd myProject
ng serve //會(huì)啟動(dòng)開發(fā)環(huán)境下的Http 服務(wù)器
參考文獻(xiàn)：Angular官網(wǎng)
