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 相关文章推荐
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
在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
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
JavaScript 经典实例日常收集整理(常用经典)
2016/03/30 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
python使用folium库绘制地图点击框
2018/09/21 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
外包公司软件测试工程师
2014/11/01 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
业务助理岗位职责
2013/11/18 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
php修改word的实例方法
2021/11/17 PHP