Angular版基礎前端框架

前端框架介紹

1. 體系結構

本系統建立在ng-alain的基礎上。ng-alain 腳手架是基於 Angular 和 ng-zorro-antd（Ant Design 的 Angular 版本） 基礎組件庫的中後臺前端解決方案。腳手架包含著一套通用的功能和業務組件庫，它們可以極大的減少一些基礎建設開發工作。

2. 整體概況圖

3. 技術講解

組件化模塊化(組件可複用--eg：登錄註冊頁) 組件化：

Angular：Angular 是一個開發平臺。可以輕鬆的構建 Web 應用。Angular 為開發者提升構建Web、手機或桌面應用的能力。Angular框架基於組件設計，它最小的功能執行單元就是組件。 框架介紹：

angular-cli腳手架: 是一個命令行界面工具，主要用於快速構建項目、添加文件以及執行一大堆開發任務，比如測試、打包和發佈等。

TypeScript: 主要提供了類型系統和對 ES6 的支持，它由 Microsoft 開發 。它是JavaScript的一個超集，而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。可對變量進行類型設置，且自帶類型檢查,增加了代碼的可讀性和可維護性。

接口（Interfaces）、泛型（Generics）、類（Classes）、枚舉類型（Enums）

ts及es6：

ng-zorro-antd: 它是 Ant Design 的 Angular^5.0.0 實現，開發和服務於企業級後臺產品。開箱即用的 angular UI 組件。

@delon: 本框架所使用到的主題庫

@delon包文件：

4. 代碼結構介紹

1. 項目目錄結構展示
2. （使用angular-cli的命令創建，生成完整項目結構）
3. 目錄結構：

5. 演示部分功能

1. 按需加載
2. 通過路由打開對應的標籤頁
3. 使用路由複用，可以保存每個打開標籤頁的當前狀態
4. 進入到route的目錄下使用ng g c component命令生成新的組件（包括樣式文件/html文件/ts文件及spec文件）
5. 可使用命令打包/測試

6. 集成arcgis地圖

#安裝esri-loader
npm install esri-loader --save
​
#下載arcgis-js-api包
npm install --save @types/arcgis-js-api 

1. esri-loader:是一個JavaScript庫（包/模塊，Web模塊化編程的概念），用於在非Dojo框架的Web頁面中加載ArcGIS API for JavaScript 3.x或4.x
2. arcgis-js-api: 可將地圖嵌入到web中

7. 構建項目的前提條件

1. node
2. angular-cli

8. 可擴展性

1. 集成地圖
2. 集成圖表
3. ......
4. 配合後端管理系統api使用
5. 作為基礎框架可適用於多種業務場景( 按上-左-右佈局 類似於中廣核這種)