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 相关文章推荐
Javascript计算时间差的函数分享
Jul 04 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
了解了这些才能开始发挥jQuery的威力
Oct 10 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
vue实现图书管理系统
Dec 29 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动态图像的创建
2006/10/09 PHP
深入解析php模板技术原理【一】
2008/01/10 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
JS中type="button"和type="submit"的区别
2017/07/04 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
vue分页插件的使用方法
2019/12/25 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
python 回调函数和回调方法的实现分析
2016/03/23 Python
python得到windows自启动列表的方法
2018/10/14 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
文秘大学生求职信
2014/02/25 职场文书
年终晚会主持词
2014/03/25 职场文书
委托书格式
2014/08/01 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS