Angular前端项目(使用ng-zorro组件库)

2018-09-16 本文已影响2690人 tuacy

分享一个最近在做的一个前端项目，前端选型Angular，组件库选择的是ng-zorro(官网：http://ng.ant.design/docs/introduce/zh)。项目结构以及项目里面用到的一些通用库比如路由复用标签、路由守卫控制等等参考的是ng-alain(官网：https://ng-alain.com/zh，https://github.com/ng-alain/delon)。

ng-zorro和ng-alain都来自阿里巴巴公司。感谢。

一、项目构建

大概说下项目的生成步骤。ng less工程、ng-zorro的引入、jquery的引入、echarts的引入、layer的引入等等。

1.1、angular 创建工程(less)

ng new xxx --style less

ng 命令创建工程，xxx是项目的名字，注意这里样式我们采用了less的方式。因为less是完全兼容css的。less里面可以直接写css的格式。

1.2.、nz-zorro 引入(--theme 把主题参数引入进来方便修改zorro样式)

ng add ng-zorro-antd --theme

会在 src 目录下自动生成 theme.less。后续咱们要是需要修改zorro默认样式直接在这里面修改。可以参考http://ng.ant.design/docs/customize-theme/zh里面的内容。

1.3、jquery 引入

jquery很多开源库都需要依赖jquery。所以咱们先一步把他引入尽量。

npm install --save jquery
npm install @types/jquery --save
angular.json 文件里面添加jquery对应的js依赖。"node_modules/jquery/dist/jquery.min.js"

1.4、echarts 引入(图表控件)

我们项目中需要大量的用到图标控件。而且我们组的其他兄弟对echarts比较熟悉。所以我们把echarts引入进来。

npm install echarts --save
npm install ngx-echarts --save
angular.json 添加echarts对应的js依赖。 echarts.min.js依赖，"node_modules/echarts/dist/echarts.min.js"

5. layer 引入(弹窗控件)

整个项目的弹窗我们使用layer，所以我们把layer也引入进来。layer下载地址 https://layer.layui.com/ 选绿色版下载。

layer下载之后解压，拷贝 layer 文件到 assets 目录下(注意哦是assets目录下，如果目录不同下面的angular.json里面引入css、js也要改成对应的路径)。
angular.json 添加 css依赖 "src/assets/layer/theme/default/layer.css"
angular.json 添加 js依赖 "src/assets/layer/layer.js"

6. 统一样式

统一样式，目的也是方便样式的统一管理，比如menu的高度定义的太低了、item的高度啥啥的，
以后咱们只需要修改src/styles/theme.less文件就行。

src/styles 目录下新建 theme.less，同时在angular.json里面添加 "src/styles/theme.less"
src/styles 目录下新建 index.less，同时在angular.json里面添加 "src/styles/index.less"

需要注意styles文件在angular.json里面的顺序，倒数第一个styles.less、倒数第二个index.less，倒数第三个theme.less

theme.less文件统一放置我们整个应用的样式变量。比如menu高度，标题栏高度，字体颜色等等。index.less里面放置咱们整个应用的通用样式。

angular.json文件内容对应jquery、echarts、layer引入添加的js、css截图如下。

clipboard.png

8. 推荐项目结构

整个项目的目录结构完全参考的ng-alain的目录结构。更加详细的内容可以参考an-alain(https://ng-alain.com/zh)的介绍。

├── core
│   ├── net
│   │   ├── default.interceptor.ts(网络拦截器)
│   │   ├── http-base.service.ts(对网络请求的简单封装)
│   ├── startup
│   │   ├── startup.service.ts(保存用户相关信息)
│
├── entity (实体类)
│   ├── request(request实体类)
│   │   ├── xx
│   │   │   ├── xx.ts
│   │   ├── xx
│   │   │   ├── xx.ts
│   ├── response(response实体类)
│   │   ├── xx
│   │   │   ├── xx.ts
│   │   ├── xx
│   │   │   ├── xx.ts
│   ├── xx
│   │   ├── xx.ts
│   ├── xx
│   │   ├── xx.ts
│
├── layout (通用布局)
│   ├── default(正常登入布局)
│   │   ├── xx.html
│   │   ├── xx.less
│   │   ├── xx.ts
│   │   ├── README.md
│ 
├── routes
│   ├── dire1
│   │   ├── index.html
│   │   ├── index.less
│   │   ├── index.ts
│   │   ├── README.md
│   ├── dire2
│   │   ├── index.html
│   │   ├── index.less
│   │   ├── index.ts
│   ├── routes.module.ts
│   ├── routes-routing.module.ts
│   ├── README.md
├── shared(所有子系统共享)
│   ├── components(公共组件)
│   │   ├── comp1
│   │   │   ├── index.ts
│   │   │   ├── README.md
│   │   ├── comp2
│   │   │   ├── index.ts
│   │   │   ├── README.md
│   ├── directives(公共指令)
│   │   ├── dire1
│   │   │   ├── index.ts
│   │   │   ├── README.md
│   │   ├── dire2
│   │   │   ├── index.ts
│   │   │   ├── README.md
│   ├── shared.module.ts
│   ├── README.md
│

二、特别分享

2.1、nz-zorro组件库样式修改

nz-zorro组件库使用的时候修改nz-zorro对应的them.less文件还满足不了我们的需求的时候。试试用:host ::ng-deep 或者只是用::ng-deep。如下代码所示。

:host ::ng-deep .ant-input-affix-wrapper .ant-input:not(:first-child){
  padding-left: 30px;
}

2.2、没事瞧瞧ng-alain对应delon库的代码

delon库代码地址https://github.com/ng-alain/delon 至少我们项目里面关于权限控制，路由服用标签完全是参考的delon库里面的代码。

这次的分享就这些。重点在项目的创建上。也是特别感谢阿里给出的nz-zorro组件库和ng-alain脚手架。