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 相关文章推荐
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
JS字符串函数扩展代码
Sep 13 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
vue分页插件的使用方法
Dec 25 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 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
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
统计出现最多的字符次数的js代码
2010/12/03 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
用Python实现协同过滤的教程
2015/04/08 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
python抓取文件夹的所有文件
2018/02/27 Python
Python 获取div标签中的文字实例
2018/12/20 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
Python缓存技术实现过程详解
2019/09/25 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
建筑学推荐信
2013/11/03 职场文书
会计专业毕业生推荐信
2013/11/05 职场文书
golang 实现并发求和
2021/05/08 Golang
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技