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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
JavaScript中的类继承
Nov 25 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
Node.js使用Angular简单示例
May 11 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
微信小程序日历插件代码实例
Dec 04 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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 将excel导入mysql
2009/11/09 PHP
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php 错误处理经验分享
2011/10/11 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
python中global与nonlocal比较
2014/11/21 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
Python数据操作方法封装类实例
2017/06/23 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
Python中的流程控制详解
2021/02/18 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
Does C# support multiple inheritance? (C#支持多重继承吗)
2012/01/04 面试题
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
医学生个人求职信范文
2014/02/07 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
Python 视频画质增强
2022/04/28 Python
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers