——Angular环境搭建


一、NPM安装

1.1 NPMNode.js

NPMNode提供的模块管理工具,可以非常方便的下载安装很多前端框架,包括JqueryAngularJSVueJs都有。因此,要想安装Angular框架,首先安装NodeNode直接包含了NPM工具,这是最直接方便的办法。

Node下载地址:https://nodejs.org/zh-cn/download/建议直接下.msi文件,安装方便。

注意:AngularJSAngular有区别的,一般认为1.x版本是AngularJS2.0之后的版本是Angular

1.2 镜像切换

1)安装完Node后,在控制台输入:

    node -v                  

 可以查看Node的版本信息。

 

2)查看npm版本,输入:

npm –v  

 npm版本信息:

 

3npm默认的仓库地址是在国外网站,速度较慢,建议设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐安装一款切换镜像的工具: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目录

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM