angular项目打包_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-loadernpm 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. 作为基础框架可适用于多种业务场景( 按上-左-右布局 类似于中广核这种)