Angular 4环境准备与Angular cli创建项目详解


Posted in Javascript onMay 27, 2017

本文介绍的是为Angular4.0准备环境和学会使用Angular cli来创建项目的相关内容,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍:

1.环境准备:

1)在开始工作之前我们必须设置好开发环境, 如果你的机器上还没有安装Node.js和npm,请安装他们
(这里特别推荐使用淘宝的镜像cnpm,记得以后把npm的指令改为cnpm就可以了)

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

然后我们可以通过node -vcnpm -v来分别查看node和cnpm安装的版本和结果

node -v
cnpm -v

2)安装全局Angular cli

cnpm install -g @angular/cli

2.创建新的项目

打开终端窗口(这里我使用的是webstorm的Terminal,也可以使用计算机自带的powershell)

ng new my-app

项目会很快创建完成,接下来你会看到

Installing packages for tooling via npm

这里如果你选这了淘宝的cnmp镜像,应该最好在安装完全局Angular cli后设置一下,保证正常下载工具

ng set global packageManage = cnpm

然后我们的项目就创建完成了

Angular 4环境准备与Angular cli创建项目详解

我们会发现在文档中有很多文件,这里参考Angular官方文档 ,以便认识这些文件的作用。

3.在项目中引入bootstrap和jQuery

这里我使用webstorm的Terminal,直接在终端操作

cnpm install bootstrap --save 
cnpm install jquery --save

我们在项目中就添加了bootstrap和jQuery,我们可以在node_modules文件夹中找到他们(这个文件夹放的是第三方库);

然后我们需要操作.angular-cli.json文件,把bootstrap和jQuery添加进去:

Angular 4环境准备与Angular cli创建项目详解

这里需要注意的是:因为angular用的是微软开发的typescript语言,我们需要在终端做下面的操作,以便让typescript认识bootstrap和jQuery一些字符(比如jQuery的$):

cnpm install @types/bootstrap --save-dev
cnpm install @types/jquery --save-dev

这样我们就在项目中正常使用bootstrap和jQuery了

4)为项目添加组件

ng g component navbar

5)项目的启动

启动项目我们可以直接通过:

ng serve

或者是

npm start

这两个的默认端口都是4200:http://localhost:4200

这里你也可以修改默认的端口:

ng serve -p 3000

6)最后项目的打包

用angular cli创建的项目会有很多文件,我们就需要打包后再发行:

ng build

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
JS延时器提示框的应用实例代码解析
Apr 27 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
Aug 01 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
vue.js实现只能输入数字的输入框
Oct 19 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 #Javascript
Angularjs自定义指令Directive详解
May 27 #Javascript
react-redux中connect()方法详细解析
May 27 #Javascript
react-router实现跳转传值的方法示例
May 27 #Javascript
简单实现JavaScript弹幕效果
Aug 27 #Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 #Javascript
详解webpack打包vue时提取css
May 26 #Javascript
You might like
模仿OSO的论坛(三)
2006/10/09 PHP
完美解决PHP中文乱码
2009/11/26 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
PHP中实现获取IP和地理位置类分享
2015/02/10 PHP
php实现简单的上传进度条
2015/11/17 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
js调试系列 源码定位与调试[基础篇]
2014/06/18 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
Python的函数的一些高阶特性
2015/04/27 Python
python递归计算N!的方法
2015/05/05 Python
使用Python对Access读写操作
2017/03/30 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Pytorch转tflite方式
2020/05/25 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
分布式数据库需要考虑哪些问题
2013/12/08 面试题
2014年公司庆元旦活动方案
2014/03/05 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
理解深度学习之深度学习简介
2021/04/14 Python