angularJs項目搭建，以angular5爲例

9月初，決定用angularJs重構某個vueJs搭建的項目，以擴展技術面。

一、找中文版官方文檔，網址是：https://www.angular.cn/guide/quickstart

二、發現要學習typescript語言，找官方文檔，網址是：https://www.tslang.cn/docs/home.html，只是簡單瀏覽了下，遇到語法問題，再仔細查看相關語法

三、配置開發工具，typescript語法高亮插件安裝，步驟以下：

     TypeScript長直接克隆下來

          3.1進入Sublime Text3插件安裝包所在目錄，如圖：

               

          3.2git中執行以下命令： git clone --depth 1 https://github.com/Microsoft/TypeScript-Sublime-Plugin.git TypeScript

          3.3在sublime中Ctrl + Shift + P 輸入typescript，選中，回車

          參考網址：https://packagecontrol.io/packages/TypeScript；

                         https://blog.csdn.net/qq_20777797/article/details/73459869?locationNum=4&fps=1；

          能夠新建ts文件，寫ts簡單語句，如有高亮則安裝成功，若無，則須要從新安裝

四、搭建angularJs項目-angular5

     angular提供了angular CLI這個命令行工具，能夠建立項目、添加文件、測試、打包和發佈等一大堆開發任務。

     項目開發中，angular CLI命令主要使用 new、generate、build，其詳細介紹，請參考：https://github.com/angular/angular-cli/wiki

     在git或終端中執行以下命令來建立項目：

     4.1 npm install -g@angular/cli

     4.2 ng new xxx

     這時就建立了一個新項目，其各個文件都是作什麼的，可參看angular官方文檔-快速上手-項目文件概覽。

     項目開發過程當中，咱們主要操做src文件夾

     注意：最新版angular CLI須要node8.9以上版本

              可能須要安裝@angular-devkit/core

              命令：npm install @angular-devkit/core --save-dev

五、跟着英雄指南敲一遍代碼，能夠了解一下，angular的一些基本概念如，指令、主從組件、數據綁定、路由、服務、管道、http，雖然仍是有點懵懵懂懂的，可是跟着計劃一步步走

六、開啓重構之旅

    6.1 代理配置

         6.1.1新建proxy.conf.json文件，寫入以下代碼

                 {"/dmss":{

                             "target": "http://10.2.30.191:28080",
                             "secure": false,
                             "changeOrigin":true,
                             "pathRewrite": { "^/dmss": "/dmss"}
                            }
                  }

          6.1.2修改package.json的配置

                 將scripts中start修改成ng serve --port 4201 --proxy-config proxy.conf.json

           6.1.3執行npm start，檢查服務器接口是否已鏈接

    6.2 主路由配置

          6.2.1在src/app/下新建app.route.module.ts文件

          6.2.2引入NgModule、RouterModule、Routes、組件模塊

          6.2.3聲明路由列表變量:const whiteList:Routes = [{path:'xx',component:xx},--其餘路徑

                                                                              {path:'**',component:404},--通配符，用於顯示404

                                                                              {path:'',component:xx}]--默認路徑

          6.2.4在NgModule的imports引入路由列表:imports:[RouterModule.forRoot(whiteList)]

          6.2.5在app.module.ts文件imports內引入AppRouteModule模塊

    6.3 子路由配置

          6.3.1新建子路由文件，如layout.route.module.ts。子路由配置與主路由配置差很少，區別在於在NgModule的imports引入路由列表

                 時，要使用RouterModule.forChild(whiteList)

         6.3.2 在子模塊文件夾下新建子模塊文件，例如在src/app/layout/下新建layout.module.ts，在該文件imports內引入子路由

    6.4 權限控制

         6.4.1動態菜單接口

         6.4.2建立auth服務，命令：ng generate service auth

         6.4.3在auth.service.ts中，利用canActivate路由守衛功能，限制路由跳轉

         6.4.4在子路由配置文件中，引入auth服務，在須要進行限制判斷的路由上，設置canActivate。例如

                 path: 'layout',canActivate: [AuthService],children:[...]

    6.5 本地儲存

          6.5.1 npm install angular-web-storage --save

          6.5.2 其使用方法，請查看https://github.com/cipchk/angular-web-storage

    6.6 MD5自定義組件

         6.6.1在src/assets/下新建md5.js文件，使用js實現md的功能

         6.6.2在src/assets/下新建md5.d.ts聲明文件，寫入以下代碼：

                export declare class MD5 {
                  static hasString(str: string): string;
                }

    6.7 使用element-angular組件庫，來實現業務功能，官方文檔地址：https://element-angular.faas.ele.me/notice/notification，有時也須要查看，git倉庫代碼

          與elementUI組件庫相比，組件種類少，缺乏transfer組件；有些組件實現的功能相對不完善，如分頁組件無每頁頁數變化事件

   6.8 iconfont

        使用的是materialicons，官方網址：https://www.mdui.org/docs/material_icon

七、源碼地址：https://github.com/respectable2007/angular5-project.git