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 相关文章推荐
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
怎么引入(调用)一个JS文件
May 26 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 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
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
js精度溢出解决方案
2012/12/02 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
2016/06/08 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
Python中matplotlib中文乱码解决办法
2017/05/12 Python
python实现聊天小程序
2018/03/13 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
香港零食网购:上仓胃子
2020/06/08 全球购物
财务管理专业自荐书
2014/09/02 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL