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存取照片的具体实现方法
Jun 30 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
原生js编写焦点图效果
Dec 08 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 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-fpm配置详解
2014/02/12 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
python发送邮件接收邮件示例分享
2014/01/21 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
环保宣传标语
2014/06/12 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
开学第一周值周总结
2015/07/16 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫
SQL Server内存机制浅探
2022/04/06 SQL Server