前言

接到一個(gè)pc端后臺(tái)項(xiàng)目，還會(huì)加入兩個(gè)安卓同事一起學(xué)習(xí)和做這個(gè)項(xiàng)目，需要帶一下他們。 既ng1之后，我就沒(méi)怎么有過(guò)其它后臺(tái)框架的實(shí)際項(xiàng)目經(jīng)驗(yàn)了，期間用的移動(dòng)端框架也并非vue、angular系列、react，包括es6、webpack等也都并不熟悉。 公司一個(gè)其它后臺(tái)項(xiàng)目使用了vue，偶爾我會(huì)維護(hù)一下但是總體來(lái)說(shuō)對(duì)體系不熟悉。 一直比較喜歡angular，應(yīng)該是有過(guò)ng1框架搭建的經(jīng)驗(yàn)的原因（前面也有寫過(guò)博客），學(xué)習(xí)過(guò)ng2和ng4的官方demo，總的來(lái)說(shuō)照著抄寫一遍意義不大，必須要用于實(shí)際項(xiàng)目才能真正吸收。 目前ng1肯定不要用了，我要重新熟悉和搭建一個(gè)架子，從自我喜好和前期一些基礎(chǔ)來(lái)講，ng4是最好的選擇，剛好typescript的語(yǔ)法對(duì)安卓同事也比較友好。 向領(lǐng)導(dǎo)請(qǐng)示了之后，也得到了允許。

入坑之初，問(wèn)題一般比較多，使用的是官方angular-cli創(chuàng)建項(xiàng)目。 中途完善cli的功能，理解整個(gè)框架是比較費(fèi)精力的事情。 總的來(lái)說(shuō)這次就花了兩三天時(shí)間，梳理好了框架，配置好了一些基本功能和依賴，比如環(huán)境部署，路由嵌套，主頁(yè)面布局（側(cè)邊欄，導(dǎo)航欄，內(nèi)容，底部），公共服務(wù)（loading，http請(qǐng)求封裝，全局服務(wù)title，用戶信息存取）。 而后就直接和同事一起開(kāi)發(fā)了。 最開(kāi)始還有點(diǎn)沒(méi)底，不知道搭架子要花多久時(shí)間，現(xiàn)在來(lái)看這個(gè)進(jìn)度和時(shí)間還是很滿意的，當(dāng)然過(guò)程中參考了一些網(wǎng)上的同行分享的資源和代碼。 非常感謝兩位同事的積極支持，他們學(xué)習(xí)的也很快。

問(wèn)題細(xì)節(jié)點(diǎn)

scss

angular-cli.json 設(shè)置 styleExt為scss之后，在組件里寫Styles，并不會(huì)編譯把scss編譯成css，必須要寫在獨(dú)立的scss，然后通過(guò)styleUrls引入。

routes path

routes path前面不能加 / 否則會(huì)報(bào)錯(cuò)

const routes: Routes = [
  { path: '', redirectTo: '/main', pathMatch: 'full' },
  { 
   path: 'main', 
   component: MainComponent
  },
]

<router-outlet>

<router-outlet> 的意思是當(dāng)通過(guò)路由訪問(wèn)component的時(shí)候，component的selector會(huì)找到 <router-outlet></router-outlet> ，@Component定義的selector會(huì)直接生成一個(gè)標(biāo)簽，載入到<router-outlet></router-outlet>下方，如果不設(shè)置selector標(biāo)簽名就是默認(rèn)的ng-component。

RouterModule

1. forRoot creates a module that contains all the directives, the given routes, and the router service itself.
2. forChild creates a module that contains all the directives and the given routes, but does not include the router service.

總的來(lái)說(shuō)forRoot是定義一級(jí)路由，forChild是定義二級(jí)路由或者說(shuō)是子路由。比如我們的引導(dǎo)模塊（命名一般是app.module.ts），也就是根模塊，里面注冊(cè)路由假設(shè)是 /main，就需要使用forRoot。根模塊通過(guò)forRoot注冊(cè)的路由/main，需要嵌套路由成為 /main/home,那home的module就需要用forChild去注冊(cè)路由。

routes的loadChildren屬性

ng4的提供了路由懶加載，如下，我們有個(gè)一級(jí)路由/main，/main有個(gè)二級(jí)路由/home對(duì)應(yīng)home組件，我們可以通過(guò)，下面的方法來(lái)定義子模塊的路由和組件，但是這種寫法就需要把路由寫在一起，而我們希望home組件的路由是一個(gè)單獨(dú)的home.routes.ts文件存在于home文件夾中，通過(guò)在類似父模塊中引入子模塊的方式注冊(cè)home路由

{
 path: 'main',
　compontent: MainComponent,
 children: [
   {
    path: 'home',
    component: HomeComponent,
   }
  ] 
}

所以就要使用loadChildren，通過(guò)它來(lái)注冊(cè)子模塊和子路由，代碼如下。loadChildren會(huì)找到路徑文件app/home/home.module，#隔開(kāi)，后面是exports的模塊名。 下面的HomeModule, 定義了home的路由和組件關(guān)系，因?yàn)槭嵌?jí)路由，所以這里用的是RouterModule.forChild，最后通過(guò)框架的處理，就達(dá)到了上面代碼里的 children 屬性的效果。 ps: 原本是訪問(wèn)/main/home就會(huì)載入main和home組件，但是發(fā)現(xiàn)直接訪問(wèn)路徑 /home 能直接載入home組件，似乎也注冊(cè)了一個(gè)根域名。 原來(lái)是使用了loadChildren之后，HomeModule模塊就已經(jīng)被注冊(cè)了到main模塊下了，而我在AppModule里又通過(guò)imports注冊(cè)了一次HomeModule，這樣就重復(fù)注入了，而且還是一次和父模塊同級(jí)的注冊(cè)，這一點(diǎn)要小心。

{
 path: 'main',
 compontent: MainComponet,//注意這里加載的是Main
 loadChildren: 'app/home/home.module#HomeModule',
}

//HomeModule
const routes: Routes = [
  { path: '', component: HomeCompontent}
]
@NgModule({
declarations: [
　　HomeCompontent
],
imports: [
　　RouterModule.forChild(routes)
],
providers: []
})
export class HomeModule { }

總結(jié)一下上面的router相關(guān)內(nèi)容 ：

假設(shè)一個(gè)場(chǎng)景，根模塊注冊(cè)兩個(gè)路徑，一個(gè)是/login，一個(gè)是/main。/login這個(gè)路由訪問(wèn)就是單純的一個(gè)登陸頁(yè)面，/main下面的路由都將是對(duì)應(yīng)核心頁(yè)面和業(yè)務(wù)，因?yàn)樵趍ain組件里包含了公用的側(cè)邊欄、導(dǎo)航欄、內(nèi)容容器和底部欄，所以 /main路由加載的main組件的內(nèi)容容器里需要嵌套子模塊。 舉個(gè)實(shí)例，當(dāng)我訪問(wèn)/main/home的時(shí)候main組件會(huì)加載home組件到content容器中，當(dāng)我訪問(wèn)/main/manager，manager組件又會(huì)替換content中的home。這樣我們的公共頁(yè)面部分就是不變的main組件，根據(jù)子路由的變化，去加載不同的組件到content里。

以下是main組件的html大致代碼和實(shí)際頁(yè)面截圖：

這里也有一個(gè)知識(shí)點(diǎn)是<router-outlet>標(biāo)簽的嵌套，上面的代碼中<div>下面有一個(gè)<router-outlet>標(biāo)簽，home等二級(jí)組件會(huì)被載入到父組件main的<router-outlet>標(biāo)簽下。而main組件的父組件是引導(dǎo)組件AppCompontent，所以main組件是通過(guò)一級(jí)路由被載入到AppCompontent的html模板的<router-outlet>下方，以下是AppCompontent組件部分代碼：

那么打開(kāi)調(diào)試器，我們就能從dom節(jié)點(diǎn)上看清楚，router-outlet的嵌套關(guān)系：

目錄結(jié)構(gòu)

再看下src的目錄結(jié)構(gòu)，component文件夾是存放一些公共的組件，login和main組件是注冊(cè)的一級(jí)路由，home和另一個(gè)馬賽克組件是注冊(cè)為main的二級(jí)路由，實(shí)際后面會(huì)注冊(cè)很多組件到main下，但是他們的文件夾劃分都是同級(jí)。

使用hash路由

RouterModule.forRoot(routes, { useHash: true });使用hash路由，后端不用修改配置，這樣比較方便，省去很多麻煩

title

引入了platform-browser的Title，使用它的setTitle方法改標(biāo)題

APP_BASE_HREF

在非hash路由情況下，有時(shí)候環(huán)境的原因布置靜態(tài)資源路徑的時(shí)候可能不是根域名,同時(shí)還要?jiǎng)h除index.html的<base>標(biāo)簽，否則會(huì)有問(wèn)題

import { APP_BASE_HREF } from '@angular/common';

在app.module里注冊(cè)providers: [{provide: APP_BASE_HREF, useValue: environment.publicBase}],

http

使用http相關(guān)API，需要注入HttpModule，否則會(huì)報(bào)錯(cuò): No provider for Http

import { HttpModule } from '@angular/http';

引入了三方JS，三方JS定義的全局變量，在引入到代碼里，編譯會(huì)報(bào)錯(cuò)：沒(méi)有定義。需要在前面加個(gè)申明declare let thirdVar:any;

規(guī)范

文件命名service，component，route，module，主要類型的文件種類不多，每次新建文件命名太長(zhǎng)，引入的時(shí)候也麻煩，所以除了根目錄命名保持xx.component.ts這種格式，其他文件統(tǒng)一為xx.c.ts，xx.s.ts。

xx.s.ts == xx.service.ts | export class xxS
xx.r.ts == xx.routes.ts | export class xxR
xx.m.ts == xx.module.ts | export class xxM
xx.c.ts == xx.component.ts | export class xxC

bootstrap4

考慮引入boostrap4來(lái)作為css庫(kù)布局。

關(guān)于rem，我們一般用rem作為單位的時(shí)候，是更希望利用它的特性改變font-size達(dá)到自適應(yīng)效果，會(huì)先定義一個(gè)font-size的范圍和對(duì)應(yīng)的屏幕寬度范圍，根據(jù)設(shè)計(jì)稿的寬度得到一個(gè)基數(shù)，再用設(shè)計(jì)稿中元素的實(shí)際像素去除以基數(shù)得到rem，最后根據(jù)屏幕寬度動(dòng)態(tài)設(shè)置font-size的相應(yīng)值達(dá)到自適應(yīng)效果。bootstrap4以瀏覽器字體默認(rèn)大小16px，直接定義了元素的rem值，它的源碼里沒(méi)有任何計(jì)算，我想他們是參照16px來(lái)設(shè)置的元素大小，然后求出的rem值，當(dāng)頁(yè)面根font-size的值是16px的時(shí)候，所有的bootstrap4的元素大小就是標(biāo)準(zhǔn)大小，如果我們想讓頁(yè)面的元素整體放大或者縮小，我們只需要去改變font-size的大小，font-size設(shè)置為多少，需要我們自己計(jì)算和定義規(guī)則。因?yàn)槭侨綆?kù)，所以這塊的實(shí)現(xiàn)方法和我們自己實(shí)際項(xiàng)目使用rem的時(shí)候，會(huì)有些反差。

如果項(xiàng)目中引入了它，我們給自定義元素直接設(shè)置px值的話，就會(huì)出現(xiàn)問(wèn)題，如果我們需要改變font-size的大小，就必須統(tǒng)一使用rem，否則font-size改變的時(shí)候，自定義的px元素并不會(huì)改變。那么自定義元素需要設(shè)置為rem值。

NG-ZORRO

想了想，需要快速開(kāi)發(fā)，還是需要一個(gè)UI插件庫(kù)，自己去造輪子開(kāi)發(fā)成本太高，經(jīng)擼哥介紹，知道了螞蟻金服的ng庫(kù)ng-zorro，支持ng4，https://ng.ant.design。 看了下很全，還提供了柵格布局和按鈕樣式，轉(zhuǎn)眼一想，如果用bootstrap4，相互之間可能有沖突，比如boostrap的reset相關(guān)的，而且用boot的按鈕樣式和螞蟻的樣式可能看起來(lái)不搭調(diào)。所以我在引入ng-zorro之后，先注釋了對(duì)bootstrap4的引用，一些公用樣式，后面可以考慮自己寫。

部署打包

src目錄下有個(gè)environments文件夾，這里的文件是配置環(huán)境的，.angular-cli.json文件有配置兩個(gè)默認(rèn)環(huán)境，一個(gè)是開(kāi)發(fā)一個(gè)是發(fā)布環(huán)境，在我們開(kāi)發(fā)的時(shí)候，默認(rèn)選擇的是dev環(huán)境

在src下的main.ts里有這么一段代碼，這里的意思是切換到生產(chǎn)模式時(shí)禁用開(kāi)發(fā)環(huán)境下特有的檢查（雙重變更檢測(cè)周期）來(lái)讓應(yīng)用運(yùn)行得更快。

我們?cè)陂_(kāi)發(fā)項(xiàng)目的時(shí)候，也必然需要配置開(kāi)發(fā)，測(cè)試和生產(chǎn)環(huán)境，不同的環(huán)境的接口或者其他設(shè)置肯定是不一樣的。 我需要配置一個(gè)apiBase變量，代表不同環(huán)境的接口域名，在開(kāi)發(fā)的時(shí)候ng4會(huì)運(yùn)行ng serve在本地運(yùn)行一個(gè)服務(wù)，域名是localhost，那么后端部署的接口肯定不在我們這個(gè)開(kāi)發(fā)域名下，所以這個(gè) apiBase 就是我們后端接口的域名 apiBase='http://www.xxxx.com' （需要后端支持跨域）。 當(dāng)我們把打包好的代碼部署到QA或者生產(chǎn)環(huán)境后，訪問(wèn)前端頁(yè)面的url和后端接口都在同一域名，所以 apiBase='/' 。 那么dev和prod的environment代碼分別如下：

//dev
export const environment = {
 production: false,
 apiBase: 'http://www.xx.com/'
};

//prod
export const environment = {
 production: true,
 apiBase: '/'
};

angular-cli 創(chuàng)建的 environment.ts 里有一段注釋，如下圖。 意思是如果我們用 ng build 命令打包的時(shí)候，加上--env=prod(如果是自定義environment文件，必須是ng build --environment=xxx命令)，將會(huì)把 environment.ts 替代為 environment.prod.ts ，那么 main.ts 里的代碼 import { environment } from './environments/environment'; 實(shí)際變成了import { environment } from './environments/environment.prod'; 可以通過(guò)在 main.ts 打印日志查詢當(dāng)前環(huán)境變量是否是我們需要的

因此，我們就只需要把相應(yīng)的環(huán)境變量配置好，如下API接口的代碼和 main.ts 文件一樣，我引入了 environment，在開(kāi)發(fā)或者打包的時(shí)候，angular 配置的打包工具會(huì)自動(dòng)載入相應(yīng)的環(huán)境變量

結(jié)語(yǔ)

因?yàn)闃I(yè)務(wù)需求原因，太久沒(méi)真正學(xué)習(xí)搭建新框架了，心里也一直不踏實(shí)，感覺(jué)再不學(xué)點(diǎn)都跟不上時(shí)代了， 所以這次項(xiàng)目的機(jī)會(huì)也算是了卻自己一個(gè)心愿。 對(duì)比ng4和ng1，開(kāi)發(fā)模式有了很大的變化，給我的感覺(jué)就是ng4的模塊劃分更干凈，寫法更舒服。 也可能是因?yàn)橛幸恍゛ngualr系列的基礎(chǔ)， 能力也應(yīng)該比前年學(xué)習(xí)ng1的時(shí)候更強(qiáng)，這次入門很快。 es6和typescript語(yǔ)法有時(shí)候分不清誰(shuí)是誰(shuí)，落后的知識(shí)趁著這次盡快補(bǔ)起來(lái)。 因?yàn)樾迈r感的原因，寫代碼變得更有樂(lè)趣了，在頁(yè)面細(xì)節(jié)和動(dòng)畫(huà)上，稍微多搞了一點(diǎn)東西進(jìn)去（后臺(tái)項(xiàng)目沒(méi)有設(shè)計(jì)師，自由發(fā)揮）。轉(zhuǎn)眼3個(gè)多月沒(méi)寫博客了，這之間學(xué)的新東西不多，但是回頭補(bǔ)了一下基礎(chǔ)的一些知識(shí)，也算是有很多收獲和新的理解。 設(shè)計(jì)模式的博客寫了一部分，后面會(huì)抽時(shí)間一步步完成，是一篇希望大家都能看懂的博客，盡請(qǐng)期待！

PS：這篇博客不定期更新,更新的寫到下面吧。

1. [ngClass]="item.fromAccount == webimS.userId ? 'me':'other'" ，ngClass可以這樣寫，官網(wǎng)沒(méi)有這種示例
2. 按照縮寫規(guī)則，指令directive我應(yīng)該寫成xx.d.ts的，但是d.ts這個(gè)格式的文件似乎會(huì)被框架其他程序處理，就會(huì)報(bào)錯(cuò)，所以指令的命名我就沒(méi)用d.ts這樣的縮寫了
3. 指令在父模塊declarations之后，發(fā)現(xiàn)在子模塊里使用指令，根本沒(méi)有反應(yīng)。折騰了很久，發(fā)現(xiàn)declarations申明的只在當(dāng)前模塊才能使用，而我的懶加載的子模塊無(wú)效，所以為指令定義一個(gè)獨(dú)立的module，在需要使用指令的地方import這個(gè)module，如下圖

在指令directive中要拿到當(dāng)前使用指令的dom，需要使用ViewContainerRef

import { Directive, EventEmitter, ViewContainerRef, AfterViewInit, OnDestroy} from '@angular/core';
constructor(public viewContainerRef: ViewContainerRef) { }

如果我們需要拿到當(dāng)前控制器下某個(gè)dom節(jié)點(diǎn)，需要使用@ViewChild

//compontent
@ViewChild('xxx')
 xxx: ElementRef;

getXXX(){
  console.log(this.xxx)
}

//html
<div #xxx></div>

表單驗(yàn)證指令封裝

ng提供表單驗(yàn)證 FormGroup 可以定義每個(gè)表單的驗(yàn)證條件，定義好之后，需要在表單下面寫很多的ngIf dom來(lái)判斷和展示當(dāng)前表單的錯(cuò)誤填寫提醒，這樣很不好的一點(diǎn)是提醒的文字是需要占位置的，在處理頁(yè)面的時(shí)候需要兼容這些提醒文案，給他們做兼容布局（如果表單全部是獨(dú)立的一排一排的還好，如果一行里有很多表單，每個(gè)表單的寬度可能也不一樣，這時(shí)提醒文案就不好放了），而且每次寫那么多條件和dom真的很麻煩。

寫了一個(gè)指令組件，提醒文案作為彈出層展示出來(lái)，把當(dāng)前表單的formControl對(duì)象傳入指令，把所有的條件統(tǒng)一文案，比如說(shuō)required 文案為‘'必填‘'。那需要做4件事情，1:動(dòng)態(tài)為指令里加入組件（參考了官網(wǎng)核心知識(shí)->模板與綁定->動(dòng)態(tài)組件），2:讓組件絕對(duì)定位到表單右上角，需要用一個(gè)div包裹一下表單，并獲取表單的寬度，把寬度傳給組件，組件給提示框設(shè)置絕對(duì)定位。3:傳入formControl對(duì)象，指令組件需要判斷顯示隱藏，4:統(tǒng)一文案，條件滿足后給顯示框展示對(duì)應(yīng)文案，因?yàn)閒ormControl的errors是一個(gè)對(duì)象，所以需要配置一個(gè)管道pipe來(lái)把errors轉(zhuǎn)換為對(duì)應(yīng)文案。

一個(gè)報(bào)錯(cuò)：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'false'.

我寫的每一個(gè)指令都會(huì)有這個(gè)報(bào)錯(cuò)，一般報(bào)錯(cuò)在數(shù)據(jù)變化后觸發(fā)，網(wǎng)上查了一下，說(shuō)是沒(méi)有使用 enableProdMode();方法就會(huì)觸發(fā)這個(gè)報(bào)錯(cuò)，在main.ts中判斷了環(huán)境，如果是開(kāi)發(fā)環(huán)境的話就不使用enableProdMode();方法，所以目前開(kāi)發(fā)環(huán)境會(huì)報(bào)錯(cuò)，但是也不影響邏輯，所以這個(gè)報(bào)錯(cuò)暫時(shí)忽略

formreset：

一個(gè)頁(yè)面可能會(huì)有一個(gè)彈窗來(lái)填寫表單，填寫的時(shí)候有兩種狀態(tài)，編輯和新增，但是都是用的同一個(gè)彈窗對(duì)象，表單做了驗(yàn)證、錯(cuò)誤條件達(dá)到并且dirty屬性為true的時(shí)候，就會(huì)展示錯(cuò)誤提醒。在新增和編輯切換的時(shí)候如果直接修改表單的值，dirty就會(huì)一直是true，就可能一直有錯(cuò)誤提示。所以需要在一定情況下使用 formGroup 的 reset來(lái)重置表單，dirty就會(huì)是false了。每個(gè)表單自己也有reset方法。當(dāng)使用formGroup重置表單的時(shí)候，textarea有可能并不會(huì)被重置，如果沒(méi)有被重置，需要單獨(dú)處理下textarea，給textarea的formControl對(duì)象單獨(dú)reset一下。

正式環(huán)境打包的檢查：

使用ng build --prod命令時(shí)，打包的檢查比較嚴(yán)格。開(kāi)發(fā)時(shí)候使用的private定義可以在模板里使用對(duì)象，在開(kāi)發(fā)環(huán)境就會(huì)報(bào)錯(cuò)。一些模板里綁定的對(duì)象數(shù)據(jù)，是需要后端返回了數(shù)據(jù)才會(huì)傳值給對(duì)象，在打包的時(shí)候就會(huì)檢測(cè)到當(dāng)前對(duì)象屬性不存在就無(wú)法通過(guò)，這時(shí)就不能用{{xxx.atrr}}這種形式輸出數(shù)據(jù)，得用{{xxx['attr']}}這種方式，才能跳過(guò)檢查。

某些情況使用this編譯會(huì)報(bào)錯(cuò)：

直接上圖，圖一會(huì)報(bào)錯(cuò)編譯無(wú)法通過(guò)，代碼邏輯是正確的。圖二能編譯通過(guò)

ng5出來(lái)后，我會(huì)把當(dāng)前項(xiàng)目升級(jí)，到時(shí)候項(xiàng)目也比較完善了，我會(huì)抽出核心部分，分享到github上，敬請(qǐng)期待。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。