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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
你必须知道的Javascript知识点之"字面量和对应类型"说明介绍
Apr 23 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
动态加载iframe
2006/06/16 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
删除节点的jquery代码
2014/01/13 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
Express的路由详解
2015/12/10 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
Python守护进程(daemon)代码实例
2015/03/06 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
硕士研究生自我鉴定
2013/11/08 职场文书
思想品德课教学反思
2014/02/10 职场文书
高中综合实践活动总结
2014/07/07 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
北京英文导游词
2015/02/12 职场文书
2016年元旦致辞
2015/08/01 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript