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 相关文章推荐
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
VUE 实现复制内容到剪贴板的两种方法
Apr 24 Javascript
解决layer.open弹出框不能获取input框的值为空的问题
Sep 10 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 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
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
jQuery chili图片远处放大插件
2009/11/30 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
jquery实现超简单的瀑布流布局【推荐】
2017/03/08 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
ES6中数组array新增方法实例总结
2017/11/07 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python命名空间详解
2014/08/18 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
C++是不是类型安全的
2014/02/18 面试题
洗手间标语
2014/06/23 职场文书
授权委托书怎么写
2014/09/25 职场文书
安全生产标语大全
2014/10/06 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
数学教师个人总结
2015/02/06 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
中秋联欢会主持词
2015/07/04 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
spring boot中nativeQuery的用法
2021/07/26 Java/Android
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers
Python实现仓库管理系统
2022/05/30 Python
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS