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的标签智能验证实现代码
Dec 27 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
js中function()使用方法
Dec 24 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
JS常用算法实现代码
Nov 14 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 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
PHP和.net中des加解密的实现方法
2013/02/27 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
YII框架常用技巧总结
2019/04/27 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
2019/11/12 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
简单说说tomcat的配置
2013/05/28 面试题
ORACLE十问
2015/04/20 面试题
办公室年终个人自我评价
2013/10/28 职场文书
医药代表个人求职信范本
2013/12/19 职场文书
秋季运动会稿件
2014/01/30 职场文书
优秀经理事迹材料
2014/02/01 职场文书
中考标语大全
2014/06/05 职场文书
党建目标管理责任书
2014/07/25 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
小学安全教育主题班会
2015/08/12 职场文书
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
2021/04/13 Javascript
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python