Angular学习总结（Angular2及其以后版本）

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/weixin_43862492/article/details/99652977

Angular学习总结

• 1.Angular和Angular.js介绍
• 2. 环境搭建
• 3.项目创建
• 4.项目运行
• 5.打包
• 6.相关资料补充（UI地址及其相关使用方法的博客）
• 7.电梯

1.Angular和Angular.js介绍

Angular1.x统称为Angular.js,而Angular2及其以后的版本都命名为angular。
从两种项目开发上来看区别有以下几点：
第一点： 编程语言不同，在1中用的是JavaScript，可以在浏览器环境直接运行；在2中用的是typescript，它是JavaScript的超集，需要用构建工具编译后才可以执行。
第二点： 结构不同，在1中一般是一个html（视图）文件和一个js文件（控制器controller）组成一个小组件，在module.js文件注册controller；在2中用多个ts文件构成一个小组件。
第三点： 作用域不同，在1中$scope控制作用域，在2中用zone.js监控。
第四点： 指令不同，在1中用ng-model，ng-xxx一系列规定属性，也类似与vue的v-model
在2中用*ngIf等格式描述。
第五点： 依赖注入，在2中有了constructor，依赖注入有点类似于java中spring注解用法。
第六点： 在2中有了明确的生命周期。

2. 环境搭建

前提：node环境已经搭建好
安装angular脚手架 ：

npm install -g @angular/cli

3.项目创建

创建项目 ：

ng new angularDemo

创建新模块 :

ng generate component user

4.项目运行

运行到浏览器 ：

ng serve --open

5.打包

打包部署 ：

ng build --prod

打包会生成dist文件夹，是可以静态访问的，直接部署到nginx就可以。

6.相关资料补充（UI地址及其相关使用方法的博客）

PC端常用UI：
1.饿了么出品UI element-angular：
2.管理系统模板 ng-admin：
如何使用它
3.material风格：material
如何使用它
4.NG-ZORRO：NG-zorro 功能比较全面，官网友好
如何使用它
5.Semantic：官网有点卡
6.CoreUI-Angular：外包类型付费
7. ngx-bootstrap ：ngx-boostrap
angular集成了boosttrap3、4的核心组件
移动端常用UI：
1.monile-angular-ui（功能几乎没有，只有组件）
2.微信UI ngx-weui
3.Ionic 和angular十分友好，是angular的伴生UI
我有一篇专门介绍 ionicApp的博客：戳这里

7.电梯

1.Angular官方文档
2.Angular英文文档