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 相关文章推荐
用于判断用户注册时,密码强度的JS代码
Jan 01 Javascript
javascript new fun的执行过程
Aug 05 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
js重写方法的简单实现
Jul 10 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
使用watch监听路由变化和watch监听对象的实例
Feb 24 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 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
十大“创意”战术!
2020/03/04 星际争霸
PHP 高级课程笔记 面向对象
2009/06/21 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
php生成gif动画的方法
2015/11/05 PHP
PHP图片水印类的封装
2017/07/06 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
JavaScript QueryString解析类代码
2010/01/17 Javascript
javascript中"/"运算符常见错误
2010/10/13 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
马耳他航空公司官方网站:Air Malta
2019/05/15 全球购物
大专自我鉴定范文
2013/10/01 职场文书
公司企业表扬信
2014/01/11 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
windows系统安装配置nginx环境
2022/06/28 Servers