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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
vuex实现简易计数器
Oct 27 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 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实现PDO的mysql数据库操作类
2014/12/12 PHP
php打乱数组二维数组多维数组的简单实例
2016/06/17 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
Python hashlib模块用法实例分析
2018/06/12 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
python实现简单图书管理系统
2019/11/22 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
英文自荐信
2013/12/15 职场文书
党员思想汇报范文
2013/12/30 职场文书
一月红领巾广播稿
2014/02/11 职场文书
超越自我演讲稿
2014/05/21 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
就业协议书范本
2014/10/08 职场文书
中英文求职信范文
2015/03/19 职场文书
2015年教师节主持词
2015/07/03 职场文书
儿子满月酒致辞
2015/07/29 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
GPU服务器的多用户配置方法
2022/07/07 Servers