【前端笔记】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

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值