Angular前端项⽬（使⽤ng-zorro组件库）
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
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 ⽂件到 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⾼度，标题栏⾼度，字体颜⾊等等。ind
ex.less⾥⾯放置咱们整个应⽤的通⽤样式。
angular.json⽂件内容对应jquery、echarts、layer引⼊添加的js、css截图如下。
8. 推荐项⽬结构
├── 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
│├── dule.ts
│├── dule.ts
│├── README.md
├── shared(所有⼦系统共享)
│├── components(公共组件)
││├── comp1
│││├── index.ts
│││├── README.md
││├── comp2
│││├── index.ts
│││├── README.md
│├── directives(公共指令)
││├── dire1
│││├── index.ts
│││├── README.md
││├── dire2
jquery是什么功能组件
│││├── index.ts
│││├── README.md
│├── dule.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库的代码
这次的分享就这些。重点在项⽬的创建上。也是特别感谢阿⾥给出的nz-zorro组件库和ng-alain脚⼿架。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。