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代码必备[js多浏览器兼容写法]
Oct 29 Javascript
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
通过循环优化 JavaScript 程序
Jun 24 Javascript
基于Vue实现微前端的示例代码
Apr 24 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
javascript实现完美拖拽效果
2015/05/06 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
Python用threading实现多线程详解
2017/02/03 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
python八皇后问题的解决方法
2018/09/27 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
python kafka 多线程消费者&手动提交实例
2019/12/21 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
财务情况说明书范文
2014/05/06 职场文书
森林防火宣传标语
2014/06/27 职场文书
保险公司演讲稿
2014/09/02 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
班主任培训研修日志
2015/11/13 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL