使用angular-cli腳手架
生成ng8項目
對於angular-cli生成項目的實踐非本文重點，請移步這裏官網
先貼一份配置
這裏是我生成項目的package.json的配置。
對各種基本需求的實現
本文的重點在於描述，我們新手如何根據新生成的框架去添加一些項目中的基礎實踐，如：路由配置/國際化/自定義的webpack/src裏面基本結構搭建/http使用（解決跨域請求）/使用less等等。
本文針對新手快速上手ng8框架，少走彎路，大牛請繞道。
github，喜歡的給個star 傳送門：ng8-ts
1.國際化
針對國際化的需求，我選用比較火的 @ngx-translate
附 @ngx-translate 學習地址
好了我們開始實踐：
1） 我們執行安裝，版本信息本文最上面可以看到。
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
2）在跟模塊中去導入，並配置
// app.module.ts
/**
* 國際化引入
*/
import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
// 引入國際化配置
import {TranslateService} from '@ngx-translate/core';
在ngModule的import中注入
注意：這裏記得導入HttpClientModule否則可能會報錯哦！
然後在跟模塊去初始化語言類型，
3）說了這麼多其實我們還差一步，啥呀？沒有寫國際化文件唄，傻呀，哈哈
我們在app的同級目錄assets目錄中創建國際化文件，我們在assets目錄中創建一個i18n的文件夾，裏面創建
zh.json和en.json 其他語言，請照貓畫虎自己實踐哦。
國際化支持兩層，什麼意思呢？就是這樣，明白了把。
4）好了配置工作已經完成，我們去嘗試如何使用它把
找到app.component.html
就是這樣：三種方法隨你喜歡咯。
5）另外在多說i點，國際化動態傳參的實踐
請看3）的截圖中的projectName中的寫法就是動態傳一個那麼的參數，在html裏面請這樣寫
此處的obj就是一個你可以在ts裏面隨便定義修改的變量了。怎麼樣好玩把。
6）需要語言切換的話，可以在對應的ts文件中引入
import { TranslateService } from "@ngx-translate/core";
在這裏注入
this.translate.use("zh");
或者
this.translate.use("en");
去修改就好了
2.src中的基本結構搭建
基於經驗及個人習慣我們的所要搭建的結構是這個樣子的
以下是app文件夾下的結構定義。要問我爲啥這樣定義，我的回答是
別問，問就是習慣，問就是經驗。哈哈瞎扯淡，其實是有道理的，不過這不是重點，有興趣我們在聊。
│ app-routing.module.ts
│ app.component.html
│ app.component.less
│ app.component.spec.ts
│ app.component.ts
│ app.module.ts
│ gurade.service.ts
│
├─index
│ │ index-router.module.ts
│ │ index.component.html
│ │ index.component.less
│ │ index.component.spec.ts
│ │ index.component.ts
│ │ index.module.ts
│ │ index.ts
│ │
│ ├─home
│ │ │ index.ts
│ │ │
│ │ ├─component
│ │ │ home.component.html
│ │ │ home.component.less
│ │ │ home.component.spec.ts
│ │ │ home.component.ts
│ │ │ index.ts
│ │ │
│ │ └─service
│ │ home.service.ts
│ │ index.ts
│ │
│ ├─manager
│ │ │ index.ts
│ │ │
│ │ ├─component
│ │ │ index.ts
│ │ │ manager.component.html
│ │ │ manager.component.less
│ │ │ manager.component.spec.ts
│ │ │ manager.component.ts
│ │ │
│ │ └─services
│ │ index.ts
│ │ manager.service.ts
│ │
│ └─system
│ │ index.ts
│ │
│ ├─component
│ │ index.ts
│ │ system.component.html
│ │ system.component.less
│ │ system.component.spec.ts
│ │ system.component.ts
│ │
│ └─service
│ index.ts
│ system.service.ts
│
├─login
│ index.ts
│ login.component.html
│ login.component.less
│ login.component.spec.ts
│ login.component.ts
│
├─pagenotfound
│ index.ts
│ pagenotfound.component.html
│ pagenotfound.component.less
│ pagenotfound.component.spec.ts
│ pagenotfound.component.ts
│
└─shared
│ index.ts
│ shared.module.ts
│
└─components
│ index.ts
│
├─directives
│ grid-item-image.directive.ts
│ grid-item-title-directive.ts
│ grid-item.derective.ts
│ index.ts
│
└─horizontal-grid
horizontal-grid.component.html
horizontal-grid.component.less
horizontal-grid.component.spec.ts
horizontal-grid.component.ts
index.ts
3.路由配置
其實我覺得搭建一個框架路由是最重要的，只有學會了路由如何配置，如何加載才能說你能寫業務了。
話不多說，先看思路
基於第二部分的代碼結構可以看出，路由部分我是按照forRoot和forChild分開寫的，好管理，配置清晰。
首先不管你路由文件咋寫要注入跟模塊，才能生效。
這裏有人會問了爲啥兩個路由注入寫的不一樣呢，容我先賣個關子，哈哈，請往下接着看哈，文中自有彩蛋。
跟路由配置就很簡單了只要重定向到login就好了
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { LoginComponent } from './login';
const routes: Routes = [
{ path: "", pathMatch: "full", redirectTo: "/login" },
{
path: "login",
component: LoginComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
子路由的配置呢，其實也很簡單，就是將index下的頁面都包括進來
如果你的某個模塊下的業務依舊複雜的話，路由還是可以繼續拆分的。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IndexComponent } from './index.component';
import { HomeComponent } from './home';
import { ManagerComponent } from './manager';
import { SystemComponent } from './system';
import { guradeService} from '../gurade.service'
const routes: Routes = [
{
path: "index",
component: IndexComponent,
children: [
{ path: "", redirectTo: "home", pathMatch: "full" },
{
path: "home",
component: HomeComponent
},
{
path: "manager",
component: ManagerComponent,
canActivate: [guradeService]
},
{
path: "system",
component: SystemComponent
},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class IndexRouterModule { }
4.index文件的優雅實踐
大家看到第2節的代碼結構可以發現，我每個模塊下面都帶有一個index.ts文件，有些人會問了，寫這麼個額外的index文件有啥好處呢，其實是這樣的，index文件的存在呢，有兩個好處,先來看看index的文件裏面寫了啥
其實就是將自己的component導出去
好處1）業務開發者專注自己的業務，如果某一天本模塊需要改名字，或者業務變動，無需通知模塊管理者更換路徑，
好處2）模塊管理者可以引用的路徑變短，更加清晰，不用擔心業務開發者替換路徑，造成引用路徑404
彩蛋：此處揭祕了第3部分扽問題，路由引入爲啥名字不一樣呢，其實這就是index的作用了。在子模塊的index裏面我們導出了子模塊的路由，所以我們在跟模塊中只需要引入子模塊的Module即可。
5.less的使用
less的使用就很簡單了。我們也習慣less的寫法，實在不怎麼喜歡css了。
有兩種情況：
- 第一種情況是新建項目的時候:
可以使用angular的腳手架,然後選擇樣式類型爲less文件新建
ng new [appname] --style less
- 第二種情況,也是我要說明的是已有的項目,怎麼添加less:
- 將*.css文件以及引用處的後綴名改爲.less;
- 在angular.json文件的schematics中添加如下配置：
"schematics": {
"@schematics/angular:component": {
"styleext": "less"
}
}
6.http交互（跨域解決方案）
@angular/common/http 中的 HttpClient 類爲 Angular 應用程序提供了一個簡化的 API 來實現 HTTP 客戶端功能。它基於瀏覽器提供的 XMLHttpRequest 接口。
我們需要了解 httpClient 類的以下幾點：
- 強類型的請求和響應對象
- 發起請求與接收響應時的攔截器支持
- 更好的、基於可觀察（Observable）對象的 API
- 流式錯誤處理機制
首先我們在跟模塊中導入並注入
基於最佳實踐，我們將http請求的service抽離出來，具體可以看2部分的代碼結構。
然後我們在ts中引入這個服務，
import {IndexService} from './index.service.ts'
然後在constructor(indexService:IndexService ) {}注入這個服務。
最後我們就這樣使用
this.indexService.get().subscribe()
this.indexService.post().subscribe()
this.indexService.delete().subscribe()
this.indexService.put().subscribe()
.....
基於rxjs的Observable改造請求
我們的service就可以這樣寫
我們的ts就可以這樣用
攔截器，使用內置的httpInterceptor可以攔截請求前後，做一寫額外的出來，這類似於axios的一些實踐。
在這裏注入你的攔截器使他生效。
最後我們再來講講跨域
在通過angular自身的代理轉發功能，我們可以在根目錄創建proxy.config.json
這裏我們就將請求/api 全部定向到target的地址，這一點類似於vue的proxy跨域配置。
然後我們修改package.json的啓動項
然後我們就能愉快的發送跨域請求了。
7.自定義的webpack配置項
有時候我們的項目打包需要一些額外的配置項，這時我們就可以用到自定義的webpack配置項了。這時候一定要注意安裝版本配套的插件
npm install @angular-builders/custom-webpack --save-dev
npm install @angular-devkit/build-angular --save-dev
完成後在項目根目錄創建webpack.config.js
這個就是我們可以寫自定義webpack配置的文件了
然後在angular.json文件中修改這裏
和這裏
然後重啓你的serve即可。
好了基本上所需要的骨架都有了，接下來就愉快的寫業務把，如果還有什麼基本需求，歡迎留言，我好加進去。