在開始閱讀我這個(gè)系列教程之前茅特，強(qiáng)烈建議想學(xué)習(xí)angular框架的先通讀一遍中文版官方文檔甲馋，并且搭建好開發(fā)環(huán)境凳寺。這個(gè)系列教程的示例代碼會(huì)基于我的另一個(gè)系列教程Springboot入門教程中的后臺(tái)代碼摹菠，所以有條件的話最好先把后臺(tái)的代碼跑起來景图。
預(yù)備環(huán)境：Node.js 版本 10.9.0 或更高版本，并且安裝了安裝 Angular CLI搪缨。

首先我們利用angular cli創(chuàng)建一個(gè)新項(xiàng)目食拜，在命令行運(yùn)行ng new angular-schoolmanager-cli
創(chuàng)建的時(shí)候有兩個(gè)需要選擇：1. 是否導(dǎo)入angular的route模塊，選是副编，2. 選擇樣式的文件類型负甸，推薦選擇scss，當(dāng)然也可以用最常見的css痹届。

創(chuàng)建新項(xiàng)目

angular cli是官方的腳手架工具呻待，可以幫助我們自動(dòng)構(gòu)建一個(gè)基于angular框架的前端項(xiàng)目框架，自動(dòng)引入了angular相關(guān)的各個(gè)庫(kù)队腐。所以等命令行下載完所有依賴庫(kù)蚕捉，我們就可以直接用npm start來運(yùn)行這個(gè)項(xiàng)目了。

下面我依然推薦用IntelliJ IDEA來作為開發(fā)工具柴淘，2019以上的版本對(duì)angular的支持很好迫淹，可以用快捷的菜單自動(dòng)創(chuàng)建angular的組件。并且用idea打開我們創(chuàng)建的angular項(xiàng)目之后为严，可以看到開發(fā)工具已經(jīng)為我們配置好了啟動(dòng)項(xiàng)敛熬。

啟動(dòng)配置

然后我們來簡(jiǎn)單了解一下這個(gè)項(xiàng)目結(jié)構(gòu)，這樣我們就知道應(yīng)該從哪開始著手編寫代碼了梗脾。

angular cli項(xiàng)目結(jié)構(gòu)

src目錄控漠，這個(gè)自然就是項(xiàng)目代碼的主目錄了蔓倍，這個(gè)后面再說。
其余的下面的那些文件其實(shí)我們都不用過多關(guān)注盐捷，那些都是angular cli官方為我們配置好的偶翅，不需要修改。唯一需要注意的一個(gè)是package.json這個(gè)文件碉渡，我們可以打開看一下

package.json

再回來看src目錄筹误，因?yàn)閍ngular官方推薦使用typescript作為標(biāo)準(zhǔn)開發(fā)語言，所以這個(gè)目錄下面的大部分都是typescript的文件癣缅。
app目錄厨剪，是整個(gè)項(xiàng)目的核心目錄，后面我們需要編碼都是在這里面添加修改友存。這里創(chuàng)建項(xiàng)目的時(shí)候默認(rèn)創(chuàng)建了根模塊app祷膳，我們下面再分析。
assets屡立，類似于android開發(fā)中的assets目錄直晨，用來存放一些原始的靜態(tài)文件，例如圖片文件等膨俐。
environments勇皇，用來配置不同環(huán)境的，默認(rèn)有開發(fā)和生產(chǎn)兩個(gè)環(huán)境的配置文件焚刺。
index.html敛摘，因?yàn)閍ngular cli構(gòu)建的是單頁應(yīng)用，所以只有一個(gè)html文件乳愉，所有頁面都會(huì)被渲染到這個(gè)html中兄淫。
main.ts，項(xiàng)目的主入口蔓姚，可以看到里面引入了app這個(gè)根模塊捕虽。
styles.scss，全局的樣式文件坡脐，在這里面寫的樣式會(huì)被應(yīng)用到整個(gè)項(xiàng)目中泄私。
test.ts，單元測(cè)試的入口。

再來看app目錄挖滤，angular項(xiàng)目是模塊化（module）的，叫作NgModule浅役，每個(gè)項(xiàng)目至少有一個(gè)根模塊斩松，就是這里的appmodule，我們先看app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

這里定義了一個(gè)AppModule觉既，其中由這幾個(gè)部分構(gòu)成
declarations惧盹，聲明了該模塊中的各個(gè)組件（component），現(xiàn)在只有一個(gè)AppComponent瞪讼，后續(xù)如果創(chuàng)建了新的組件钧椰，需要在這里聲明。
imports符欠，引入的模塊嫡霞，可以是在這個(gè)項(xiàng)目中創(chuàng)建的模塊，也可以是引入的第三方庫(kù)的模塊希柿，都在這邊引入诊沪。
providers，貢獻(xiàn)的全局服務(wù)曾撤，我的理解是不屬于組件的其他類別的公共服務(wù)端姚，如log的模板。
bootstrap挤悉，這里引用一下官方的說法“應(yīng)用的主視圖渐裸，稱為根組件。它是應(yīng)用中所有其它視圖的宿主装悲。只有根模塊才應(yīng)該設(shè)置這個(gè) bootstrap 屬性昏鹃。”

以app.component命名的都是AppComponent這個(gè)組件的相關(guān)文件衅斩，其中
app.component.html是模板視圖文件盆顾，里面都是用html標(biāo)簽構(gòu)成的視圖，當(dāng)然除了標(biāo)準(zhǔn)的html標(biāo)簽畏梆，angular還支持一些擴(kuò)展型的標(biāo)簽和語法您宪。
app.component.ts，里面是AppComponent組件的邏輯代碼奠涌，我們看一下這個(gè)代碼

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-schoolmananger-cli';
}

@Component注釋代表的是這個(gè)類是一個(gè)組件宪巨，其中
selector表示這個(gè)組件應(yīng)用到html標(biāo)簽時(shí)的名稱，我們可以看到在index.html中就引入了這個(gè)標(biāo)簽<app-root></app-root>溜畅。
templateUrl就是這個(gè)組件引用的模板文件捏卓，即app.component.html。
styleUrls就是這個(gè)組件引用的樣式文件，即app.component.scss怠晴，在這個(gè)樣式文件中引用的樣式只會(huì)在該組件中生效遥金，這個(gè)文件目前是空的，如果不需要的話也可以刪除蒜田。
class AppComponent中定義了一個(gè)變量title稿械，說明所有關(guān)于這個(gè)組件的邏輯代碼都要在這里添加。app.component.html和app.component.ts的關(guān)系就有點(diǎn)類似于android開發(fā)中xml布局文件和activity的關(guān)系冲粤，因?yàn)閍ngular同樣也是遵循mvc架構(gòu)模式的框架美莫。
最后還有一個(gè)app-routing.module.ts，這個(gè)文件是在項(xiàng)目創(chuàng)建時(shí)第一個(gè)選擇路由為是的時(shí)候創(chuàng)建的梯捕，里面包含了項(xiàng)目的路由模塊厢呵，這個(gè)我們下一篇教程再詳細(xì)講述。

這篇教程中我簡(jiǎn)單介紹了一下整個(gè)angular項(xiàng)目的基本結(jié)構(gòu)傀顾，挑出了一些需要重點(diǎn)關(guān)注的部分做了分析襟铭，具體想要更清楚的知道項(xiàng)目的結(jié)構(gòu)內(nèi)容的還是請(qǐng)參考官方文檔項(xiàng)目文件結(jié)構(gòu)