angular学习之从零搭建一个angular4.0项目


Posted in Javascript onJuly 10, 2017

话说现在angular更新迭代太快了,从前几年用angular版本去搭建项目时还是1.x版本,到现在都已经是angular4.0了(直接跳过了3.0),由于公司要求用到angular4.0,所以就不能只是了解一下了,谁让我那么热爱学习了(咳咳!此处有一个推眼镜的动作),废话不多说,直接上手,首先用到的工具会有angular4.0、angular-cli、npm(v3.10.8)、node(v6.2.0)

上述node和npm包管理器版本是我本机的版本号,这个版本不要太低应该都没问题

angular学习之从零搭建一个angular4.0项目

angular脚手架各版本

angular学习之从零搭建一个angular4.0项目

node和npm版本

接着,新建一个文件夹,随便命名,我这里就起了一个angular4.0-demo,然后就可以愉快的安装所需要的工具了。

第一步

安装全局的angular-cli, npm install -g @angular/cli

angular学习之从零搭建一个angular4.0项目

第二步

查看各插件是否已经安装,ng -v会出来一堆东西,如第一个图所示!

第三步

生成项目 代码为:ng new 项目名称

angular学习之从零搭建一个angular4.0项目

第四步

现在已经创建完成了,cd进入项目,会看到一些这样的东西,说明已经创建完成了,接下来就是执行项目就可以了,跟vue2.0一样,此时执行用到的代码为:ng serve --open(和vue的npm run dev效果是一样,自动监听修改内容),这一点也是不同于angularjs(官方称1.x为angularjs,过了2.0就直接称为angular)

angular学习之从零搭建一个angular4.0项目

angular学习之从零搭建一个angular4.0项目

最后执行完之后就会弹出来一个页面,就是要生成的页面了

angular学习之从零搭建一个angular4.0项目

生成的页面

好了,那么基本的搭建已经完成了,去试试吧!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
js计算精度问题小结
Apr 22 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
JavaScript设计模式之策略模式详解
Jun 09 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 #Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 #jQuery
Angular2生命周期钩子函数的详细介绍
Jul 10 #Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 #Javascript
在vue中获取dom元素内容的方法
Jul 10 #Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 #jQuery
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 #Javascript
You might like
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
python中函数传参详解
2016/07/03 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
演讲稿的写法
2014/05/19 职场文书
小学运动会演讲稿
2014/08/25 职场文书
律师催款函范文
2015/06/24 职场文书
值班管理制度范本
2015/08/06 职场文书
中秋节随笔
2015/08/15 职场文书
利用python进行数据加载
2021/06/20 Python
python中的3种定义类方法
2021/11/27 Python