第一个angular项目

一、安装

1、安装node.js

从官网下载需要的版本，直接安装即可，安装完成后，在命令行输入node -v查看安装的版本，有显示即安装成功

2、安装typescript

必须先安装typescript，因为angular是用typescript写的

npm install -g typescript typings

安装完成后 tsc -v查看版本

3、安装angular

npm install cnpm -g --registry=https://registry.npm.taobao.org：安装淘宝npm镜像。

再安装angular

npm install -g @angular/cli

安装完成后 ng version 进行版本查看

二、创建第一个项目

1、ng new myAngularApp --style less

--style less要加这个，否则项目需要支持less还需要手动改配置

创建完成后ng serve 启动项目浏览器localhost:4200访问项目

2、引入ng-zorro框架

ng add ng-zorro-antd --theme

https://ng.ant.design/docs/getting-started/zh 

这是ng-zorro中文官网，上面也有引入教程

3、引入jquery

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

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

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截图如下。

 

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; } ———————————————— 版权声明：本文为CSDN博主「tuacy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/wuyuxing24/java/article/details/82730838