Angular2环境搭建具体操作步骤(推荐)


Posted in Javascript onAugust 04, 2017

01、安装Node.js 和 npm

安装完成后,在命令行依次使用node -v 和 npm -v可以看到版本号。

目前安装的node.js版本为8.2.1  ,npm的版本为5.3.0

02、安装cnpm

npm需要连接谷歌服务器,国内不能正常使用,因此使用淘宝的镜像安装cnpm。命令行输入npm i -g cnpm --registry=https://registry.npm.taobao.org  

03、安装Angular CLI

命令行输入cnpm i -g @angular/cli。

04、cnpm设置为默认包管理工具

命令行输入ng set --global packageManager=cnpm。

05、新建angular2工程

命令行输入ng new myApp,在命令行所在目录创建myApp工程。

06、启动工程

命令行进入工程目录cd myApp,输入ng serve  即可启动服务。

默认的监听端口为4200,在浏览器访问http://localhost:4200,可看到创建的网页,

如果需要更改端口号,可以在启动的时候设置ng serve --port 3000  这时候访问的时候就用浏览器访问http://localhost:3000

注意:如果想结束工程服务,可以使用ctrl+c    来选择是否结束。

使用ng serve 启动的好处是,当代码发生变化时,系统自动重新编译启动,并刷新浏览器,这样我们就可以实时的看到更改内容。

07、angular2的代码编辑官方推荐的是VS Code,自己可以去官网下载,下载后正常安装就好了。。

打开VS Code,菜单->文件->打开文件夹->选中myApp文件夹,即可打开编辑myApp工程。

08、在VS Code界面找到index.html可以随意修改一个标签内容,这个时候系统会自动编译刷新,界面会实时显示。

以上这篇Angular2环境搭建具体操作步骤(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现的类flash菜单效果代码
May 17 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
javascript初学者常用技巧
Sep 02 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
Apr 05 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 #Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 #Javascript
vue 2.0封装model组件的方法
Aug 03 #Javascript
jQuery实现上传图片前预览效果功能
Aug 03 #jQuery
详解基于vue的移动web app页面缓存解决方案
Aug 03 #Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 #Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 #Javascript
You might like
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
vuejs前后端数据交互之从后端请求数据的实例
2018/08/11 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
python错误处理详解
2014/09/28 Python
Python制作刷网页流量工具
2017/04/23 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
python实现坦克大战
2020/04/24 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
现役军人家属慰问信
2015/03/24 职场文书
Mysql Show Profile
2021/04/05 MySQL
解决python存数据库速度太慢的问题
2021/04/23 Python