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 替换Html标签实现代码
Oct 14 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
PHP开发的一些注意点总结
2010/10/12 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
JS格式化数字金额用逗号隔开保留两位小数
2013/10/18 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
vue实现防抖的实例代码
2021/01/11 Vue.js
Python Socket编程入门教程
2014/07/11 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
python树的同构学习笔记
2019/09/14 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
神路信息Java面试题目
2013/03/31 面试题
实习老师离校感言
2014/02/03 职场文书
品质标语大全
2014/06/21 职场文书
美术教师求职信范文
2015/03/20 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python