一、NPM安装
1.1 NPM与Node.js
NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括Jquery、AngularJS、VueJs等都有。因此,要想安装Angular框架,首先安装Node,Node直接包含了NPM工具,这是最直接方便的办法。
Node下载地址:https://nodejs.org/zh-cn/download/,建议直接下.msi文件,安装方便。
注意:AngularJS与Angular有区别的,一般认为1.x版本是AngularJS,2.0之后的版本是Angular。
1.2 镜像切换
(1)安装完Node后,在控制台输入:
node -v
可以查看Node的版本信息。
(2)查看npm版本,输入:
npm –v
npm版本信息:
(3)npm默认的仓库地址是在国外网站,速度较慢,建议设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐安装一款切换镜像的工具:nrm。在控制台输入:
npm –g install nrm -g代表全局安装
然后,查看npm的仓库列表:
nrm ls
仓库列表信息:
指定要使用的镜像源,在控制台输入:
nrm use taobao
最后,可以测试一下速度,在控制台输入:
nrm test npm
注意:有教程推荐大家使用cnpm命令,但是网上有说使用cnpm发现有时会有bug,不推荐。安装完成后,可以重启一下电脑。
二、Angular安装
2.1 安装Angular CLI
Angular CLI 可以用来创建项目、生成应用和库代码,以及执行各种持续开发任务,比如测试、打包和部署。
全局安装Angular CLI,在控制台输入:
npm install -g @angular/cli
2.2 安装TypeScript
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准,是一门重视数据类型的语言。TypeScript 由微软开发的自由和开源的编程语言。Angular建议使用TypeScript作为开发开发语言,因此需要安装TypeScript编译器。
全局安装TypeScript编译器,在控制台输入:
npm install -g typescript
三、Angular快速搭建
3.1 创建工作空间和初始化应用
使用 CLI 命令,在工作空间目录下运行:
ng new my-app #my-app为项目名称
ng new 命令会提示你提供要把哪些特性包含在初始应用中。Angular CLI 会安装必要的 Angular npm 包和其他依赖包。这可能要花几分钟的时间。CLI 会创建一个新的工作区和一个简单的欢迎应用,随时可以运行它。
3.2 运行应用
进入到项目目录中,运行:
ng serve –open --open为自动打开浏览器
四、idea中开发
4.1 对导入的含有angular框架的项目
执行 npm install 下载所需依赖包
4.2 调试模式配置
4.3 编译部署模式
编译成功后会在webapp下生成dist目录