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中暂停功能的实现代码
Mar 04 Javascript
javascript模仿msgbox提示效果代码
Jun 10 Javascript
几个javascript操作word的参考代码
Oct 26 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 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 session安全问题分析
2011/06/24 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
pytorch构建多模型实例
2020/01/15 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
Ref与out有什么不同
2012/11/24 面试题
大一学生假期实习的自我评价
2013/10/12 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
高二化学教学反思
2016/02/22 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
浅谈redis整数集为什么不能降级
2021/07/25 Redis
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL