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

女爷i 2022-05-12 09:46 769阅读 0赞

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

![这里写图片描述][70]

# 8. 推荐项目结构 #

整个项目的目录结构完全参考的ng-alain的目录结构。更加详细的内容可以参考an-alain([https://ng-alain.com/zh][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脚手架。

[http_ng.ant.design_docs_introduce_zh]: http://ng.ant.design/docs/introduce/zh
[https_ng-alain.com_zh_https_github.com_ng-alain_delon]: https://ng-alain.com/zh%EF%BC%8Chttps://github.com/ng-alain/delon
[https_layer.layui.com]: https://layer.layui.com/
[70]: /images/20220512/d2156081311045ccb68d4a2ca1be12fa.png
[https_ng-alain.com_zh]: https://ng-alain.com/zh