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 ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 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 Memcache 中实现消息队列
2009/11/24 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python实现的爬虫功能代码
2017/06/24 Python
Python实现登录接口的示例代码
2017/07/21 Python
python ansible服务及剧本编写
2017/12/29 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
详解Python3 pickle模块用法
2019/09/16 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
基于python实现坦克大战游戏
2020/10/27 Python
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
医务工作者先进事迹材料
2014/01/26 职场文书
高中军训感言1000字
2014/03/01 职场文书
工地安全标语
2014/06/07 职场文书
小学运动会入场口号
2015/12/24 职场文书
Python绘制散乱的点构成的图的方法
2022/04/21 Python