【前端笔记】Angular学习篇之一：Angular CLI环境搭建

最近在学习Anguar2+,想把成长记录下来并希望能帮助到大家。

1.关于Angular与AngularJs的区别
(1)命名变化
Angular2以后官方命名为Angular,2.0以前的版本称为AngularJs,所以一般叫Angular就是Angular2+
(2)使用变化
Angular1是直接把js放在页面使用，而Angular2+是通过前端工程进行管理，结合了node,通过生成Angular CLI来进行项目开发，js的编写是写在typescript文件里，进行编译转为js

2.安装Angular CLI
先安装nodeJs，而且有版本要求，官方推荐nodejs 10.9.0+,不建议使用官方的安装angular CLI方法

npm install -g @angular/cli //官方
 

为什么不建议用官方的，我们在国内不方便，所以需要改一下，在国内可以把npm改为cnpm，用淘宝镜像并先跳过自动安装依赖

先安装淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
 

查看是否安装成功

ng version
 

安装一个angular CLI项目进行开发
进入你要安装的文件夹，输入ng new my-app安装一个名叫my-app的项目，又不推荐，为什么呢？因为这种方式会自动安装依赖，相当于执行了npm install命令，国内网速有限制，使用改良的：

ng new my-app --skip-install 
 

跳过安装依赖，自己手动安装，这样就不容易安装失败，然后进入目录再自己安装

cd my-app
 cnpm install
 

启动服务器，并自动打开浏览器

ng serve --open
 

3.常用的命令

ng help/ng [command name] --help
 ng new demo -d/--dry-run //不创建，只走流程
 ng new demo --skip-install --routing //跳过npm,并有路由
 ng serve/npm start/ng serve --open /ng serve-o //创建服务器，后面两个自动打开浏览器
 ng serve --port 4201//指定端口号的服务器
 ng generate component [componentName]//生成组件，generate可用简写g
 ng generate service [serviceName] //生成服务
 ng build //打包成静态文件
 ng build --prod //打包成生产环境部署静态文件
 

4.StackBlitz-在线使用Angular CLI
可以通过github账号登录，保存项目，还可以预览分享，在国内使用网速很快
https://stackblitz.com/angular/kopvvxggnxdx?file=src%2Fapp%2Fapp.component.ts