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数独游戏解析(一)-页面布局
Nov 05 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
javascript实现根据3原色制作颜色选择器的方法
Jul 17 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
Oct 31 Javascript
JS实现网页时钟特效
Mar 25 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实现简单计算器小程序
2020/08/28 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
浅析java线程中断的办法
2018/07/29 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
Python中unittest用法实例
2014/09/25 Python
Python调用C语言开发的共享库方法实例
2015/03/18 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
python Django批量导入不重复数据
2016/03/25 Python
python MySQLdb使用教程详解
2018/03/20 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
numpy库reshape用法详解
2020/04/19 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
Python多分支if语句的使用
2020/09/03 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
班级旅游计划书
2014/05/03 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python