摘要：我們的應用由一個或者多個模塊組成，并且必須要有一個根模塊，我們通常命名為，每個模塊都會有一個叫的裝飾器函數，它接收一個用來描述模塊屬性的元數據對象，我們在這個對象屬性上配置我們應用所需的組件路由指令管道服務等。

相信大家在逛技術論壇或者技術博客的時候，都會發現有些寫的很好的文章我們想保存下來以便可以重復翻閱和查看，在一些相對大的站點，比如SegmentFault或者掘金都會提供類似收藏這樣的功能來幫我們做這個保存的工作，我們以后可以回來重復查看，但是我們平時瀏覽的站點肯定不止一個，并且有時候一些個人的技術博客并沒有這樣的功能，我們就只能存瀏覽器書簽這樣做了，這樣我們平時保存下來的一些文章就會比較分散，沒有一個統一的地方來幫我們管理，如果有這樣一個應用，我們只要輸入某篇我們想保存的文章的URL地址就可以幫我們生成這篇文章的正文內容，并且可以支持標簽的分類和搜索等功能就好了，就是基于這個需求和我平時個人的使用經驗開發出了這個應用。大家可以進這個地址先體驗一下，賬號是test，密碼123456。該應用采用Angular4開發，koa2提供數據接口，因為我是Angular的初學者，邊看官方文檔邊把這個應用做了出來的，也遇到了一些問題，下面我大概說一下開發的過程和遇到的一些問題的解決方案。技術方案選型如下

Angular 前端框架

Angular Cli 前端打包構建

koa2 提供數據接口

MongoDB 提供數據儲存

phantom 和 node-readability 提供對文章正文的提取

Angular是一個正式發布于16年九月的一個前端框架（其實Angular的定位是一個平臺了），它和vue、react不太一樣的是，Angular不只是針對視圖層的一個庫，它提供的是一個完整的解決方案和生態，它本身內置了組件化方案、模塊化方案、測試、表單驗證、路由、國際化和HTTP服務等，這些東西我們開發者不用再去糾結怎么選擇，直接按官方的建議說明走就好了，選擇困難癥患者肯定很喜歡這樣的，但相對的它也就沒有vue和react那么靈活了，這個怎么看待得根據我們每個人的項目需求來選擇。既然Angular它本身是這么完整的了，它肯定也有CLI工具，那就是Angular CLI，Angular CLI是一個命令行界面工具，它可以創建項目、添加文件以及執行一大堆開發任務，比如測試、打包和發布。我們可以先執行以下命令全局安裝Angular CLI

npm install -g @angular/cli

然后執行ng new [ProjectName]就可以初始化一個項目了。

Angular 應用是模塊化的，并且 Angular 有自己的模塊系統，它被稱為NgModules。我們的應用由一個或者多個模塊組成，并且必須要有一個根模塊，我們通常命名為AppModule，每個模塊都會有一個叫@NgModule的裝飾器函數，它接收一個用來描述模塊屬性的元數據對象，我們在這個對象屬性上配置我們應用所需的組件、路由、指令、管道、服務等。然后Angular會引導根模塊來啟動應用，有如下代碼

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";

platformBrowserDynamic().bootstrapModule(AppModule);

Angular應用還是組件化的，組件負責控制屏幕上的一小塊區域，稱之為視圖，每個組件也有一個叫@Component的裝飾器函數，它也接收一個元數據對象，我們可以在該對象屬性上配置組件的模板文件，和組件模板的樣式文件等，看如下代碼

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})

這樣我們就可以組合不同的組件拼裝起我們整個應用了。整體架構圖如下

Angular的路由是通過一個叫RouterModule的模塊來配置的，RouterModule在@angular/router這個包里面，所以路由配置模塊RouterModule需要先從@angular/router這個包導出來，然后調用RouterModule的forRoot方法給他傳進去一個數組配置對象就好了，需要注意的是我們還要有一個路由來匹配我們所有路由都不配置的情況，它的path應該寫成兩個星號

import { Routes, RouterModule } from "@angular/router";
const routes: Routes = [
  {
    path: "index",
    component: IndexComponent
  },
  {
    path: "**",
    redirectTo: "index",
    pathMatch: "full"
  }
])
@NgModule({
  imports: [RouterModule.forRoot(routes)]
    ...
})

路由配置好后把它的返回值添加到AppModule的imports數組里面就好了。然后在我們的根組件appComponent的模板里面添加來作為我們的路由渲染出口，到這里基本路由配置就完成了。當然Angular路由的內容還有很多，比如路由守衛，路由模塊的劃分，路由的傳值等等，更加詳細的內容可以查看Angular的中文文檔

目錄的劃分我是根據個人的開發習慣來做的，我們的業務邏輯的開發大多在app文件夾下進行，我一般會在app文件夾下新建一個pages文件來做頁面級別組件的存放，然后會分別新建directive、pip、service、animation、interceptor文件夾來存放我們應用的指令、管道、服務、動畫、攔截器，因為這個應用我沒有用一些第三方的UI組件庫，一些通用的組件都是自己封裝的，所以還需要一個component文件夾來存放整個應用所需的一些通用UI組件，這樣我們整個應用的劃分就很清晰了。最后的目錄說明大致如下

app
├── animations   // 動畫
│?? └── global-router-animation.ts
├── app-routing.module.ts   // 路由的配置文件
├── app.component.html  // 根組件的模板文件
├── app.component.scss // 根組件的樣式文件
├── app.component.spec.ts // 根組件的測試文件
├── app.component.ts  // 根組件
├── app.module.ts  // 根模塊
├── component    // 通用的UI組件
├── button
│?? └── dropdown
├── directives   // 指令
│?? └── markdown-editor
├── interceptor  // 攔截器
│?? └── global-response-interceptor.ts
├── page  // 頁面級別的組件
│?? ├── add-link-note
│?? ├── add-note
│?? ├── classification
│?? ├── edit-note
│?? ├── index
│?? ├── search
│?? ├── tag
│?? └── view-note
└─ services  // 服務
    ├── loading-bar
    ├── msg
    ├── note
    └── tag

跨域問題幾乎是現代前端項目都會遇到的了，在vue，react等項目項目中我們可以通過webpack-dev-server的代理配置來解決，Angular CLI創建出來的項目底層也是通過webpack來進行應用的打包編譯的，但是Angular CLI把webpack的配置給包裝隱藏起來了，我們可以通過執行命令ng eject來暴露出webpack的配置文件，但就為了配置跨域問題就把webpack的配置暴露出來其實沒有必要。我們可以這樣做，先在項目的根目錄地下新建一個proxy.config.json配置文件，在該文件里面寫下如下代碼，告訴Angular，應用里面所有以api開頭的HTTP請求都轉發到localhost的3002端口。

{
  "/api":{
    "target":"http://localhost:3002"
  }
}

寫完該配置文件后我們還需要在package.json的start命令里面加上這個配置

"start" : "ng serve --proxy-config proxy.config.json"

然后執行npm run start重啟服務，這樣我們的跨域問題就很簡單的解決了。

前面有說過這個應用沒有使用一些第三方的UI組件庫，項目中用到的一些UI組件是我自己封裝的，其中有一個LoadingBar組件和message消息提示組件，它的調用方式應該是通過服務的形式來調用的，類似如下代碼

this.loadingBar.start()
this.msg.info("這是消息提示")

但是在Angular里面服務本身是不帶模板的，只有組件才有模板，所以這樣的組件應該是要通過服務去動態的加載一個帶模板的組件，但是我沒有找到相關的實現方案，去看了一下ng-zorro的源碼沒看懂?，這里希望有大神賜教。最后我的實現是通過最不優雅的一種方案，直接在服務里面是操作DOM了。比如我的LoadingBar服務

import { Injectable } from "@angular/core";

@Injectable()
export class LoadingBarService {
  constructor() { }

  public $Loading = {
    start: function(){
      const myLoadingBar = document.querySelector(".my-loading-bar");
      if (myLoadingBar !== null && myLoadingBar instanceof HTMLElement) {
        let LoadingBarDivWidth = 0;
        this.timer = setInterval(() => {
          LoadingBarDivWidth++;
          myLoadingBar.style.width = LoadingBarDivWidth + "vw";
          if (LoadingBarDivWidth >= 100) {
            clearInterval(this.timer);
          }
        }, 25);
      } else {
        const LoadingBarDiv = document.createElement("div");
        LoadingBarDiv.className = "my-loading-bar";
        const bodyEl = document.querySelector("body");
        bodyEl.appendChild(LoadingBarDiv);
        let LoadingBarDivWidth = 0;
        this.timer = setInterval(() => {
          LoadingBarDivWidth++;
          LoadingBarDiv.style.width = LoadingBarDivWidth + "vw";
          if (LoadingBarDivWidth >= 100) {
            clearInterval(this.timer);
          }
        }, 25);
      }
    },
    finish: function(){
      const myLoadingBar = document.querySelector(".my-loading-bar");
      if (myLoadingBar !== null && myLoadingBar instanceof HTMLElement) {
        clearInterval(this.timer);
        myLoadingBar.style.width = 0 + "vw";
      }
    }
  };
}

在我們整個應用開發完成后我們需要build出靜態文件交由node來部署，這里有幾個需要注意一下。在CLI生成的項目的編譯配置命令里面是沒有開啟加--prod配置的，需要我們手動去加上命令開啟，加上--prod之后打包出來的資源就不會再有resource map了，這樣文件體積會小很多，如果Angular Cli用的是1.3.0以上的版本還可以加上--build-optimizer(搖樹優化)，文件體積會更加小，在我做這個項目時用的版本還是1.2.7。最后build的命令配置如下

"build" : "ng build --prod --build-optimizer"

本文只是一個Angular新手做的第一個項目的流水總結，并沒有說到什么新意有深度的東西。Angular是一個很好的框架，上手門檻沒有大多數人想象的那么高，只要你JavaScript基礎扎實，對ES6的語法有基本的了解就可以去學習，相信會給到你不一樣的開發體驗。最后奉上項目的基本信息

體驗地址 https://weiweinote.cn/index

GitHub源碼地址 https://github.com/linguowei/micro-note

其實該應用如果大家有自己的個人服務器的話完全可以部署給自己使用，如果沒有也可以部署到國外的一些免費服務提供商比如heroku上。好啦，如果大家對該項目有什么問題和建議歡迎留言一起討論。