Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境
一直在学Angular2,百忙之中抽点时间来写个简单的教程。
2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式;以前Jquery通吃一切的田园时代一去不复返,如果你想了解前端最近究竟有什么变化,不妨去看看这篇文章:在2016年学习javascript是一种什么样的体验?
在学习之前,你可能需要先粗略了解几个东西!
1.nodejs
2.npm 包管理
以下的东西就当你是知道了这些概念了
1.首先,到nodejs 官网下载nodejs并安装
2.添加淘宝的npm镜像(由于国内访问国外网站的速度实在是太慢了),由于我们只有要用到的一些东西,我们采用以下的添加镜像方法
(windows 用户使用cmd,输入以下命令,新手请去看看npm使用教程吧)
npm config set registry https://registry.npm.taobao.org
值得说明一下的是不要直接使用淘宝的npm官方镜像安装模式,这样我们只能使用cnpm命令,而Angular-cli创建新项目的时候是直接使用的npm,
会导致访问速度奇慢,直接使用上面的这个命令就行了 3.使用npm 安装Angular-cli Angular-cli是angular团队针对Angular2提供的脚手架,用于环境搭建,运行等;具体参考Angular-cli GitHub 在命令行中输入 npm install -g angular-cli 之后我们就可以在全局使用ng命令了 4.使用Angular-cli搭建开发环境 首先到你的工作目录下建立Angular工程目录
然后然后用命令行进入该目录,输入
ng new projectName
然后脚手架会帮我们搭建初始环境,由于初始化的时候Angualr-cli会去初始化node-modules依赖,所以会比较慢;如果没有切换淘宝镜像,那不是一般的慢
最终安装好了是这样的
5. 运行Angular
这个时候整个Angular2已经搭建好了,命令行进入进入刚才的工程目录,输入
ng serve
Angular-cli会编译整个项目,只有打开localhost:4200 (可以切换其他端口,具体参考Angular-cli的使用)就可以看到效果了
关于工程目录结构是下面这个样子的
结束语:Angular2可以使用javascript,typescript,dart来编写;个人推荐使用typescript来编写。TypeScript最近也发布了2.1版本,我们可以使用可爱的Async/await来编写我们的项目了。Angular2有专门的中文官方网站Angular.cn,上面有对所有的概念的详细的解释,并且有一个完整小项目的教程,很有帮助;还有,我推荐大家使用我写的模式来搭建自己的Angular项目,一方面Angualr-cli是官方出的脚手架(虽然还是beta版),另一方面,你如果自己独立去使用Webpack或者SystemJs又增加了学习难度,项目出错你都不知道是代码错了还是打包的问题!
代码编辑器推荐两个:vs code和sublime;
有些人学习前端不知道该学哪个框架,就我而言,目前值得学习和广为大众接受的是Vue.js,angular,reactjs;我受不了React语法,pass;vue有着简单的结构,容易上手且速度很快,但是Angular更像是一个工业级别的产品,工程化程度更高,而且有着web app 开发神器IONIC,是一个非常不错的选择!
以后的文章会开始介绍Angular2的语法等
更新ing。。。
Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境的更多相关文章
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- 《VR入门系列教程》之15---配置Oculus的开发环境
安装Oculus SDK 在使用类似Unity3D之类的引擎开发Oculus Rift应用之前,你必须先安装Oculus的SDK,在Oculus的官网上可以下载:http://develope ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- Angular2入门系列教程2-项目初体验-编写自己的第一个组件
上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...
- Angular2入门系列教程3-多个组件,主从关系
上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...
- 【IntelliJ IDEA新手入门】IDEA如何快速搭建Java开发环境
作为IntelliJ IDEA mac新手,IDEA如何快速搭建Java开发环境呢? 今天小编就给大家带来了IntelliJ IDEA mac使用教程,想知道IDEA如何快速搭建Java开发环境?那就 ...
- ASP.NET MVC 入门系列教程
ASP.NET MVC 入门系列教程 博客园ASP.NET MVC 技术专题 http://kb.cnblogs.com/zt/mvc/ 一个居于ASP.NET MVC Beta的系列入门文章,有朋友 ...
随机推荐
- 聊聊Unity项目管理的那些事:Git-flow和Unity
0x00 前言 目前所在的团队实行敏捷开发已经有了一段时间了.敏捷开发中重要的一个话题便是如何对项目进行恰当的版本管理.项目从最初使用svn到之后的Git One Track策略再到现在的GitFlo ...
- 再谈CAAnimation动画
CAAnimaton动画分为CABasicAnimation & CAKeyframeAnimation CABasicAnimation动画, 顾名思义就是最基本的动画, 老规矩先上代码: ...
- 了解PHP中的Array数组和foreach
1. 了解数组 PHP 中的数组实际上是一个有序映射.映射是一种把 values 关联到 keys 的类型.详细的解释可参见:PHP.net中的Array数组 . 2.例子:一般的数组 这里,我 ...
- Android数据加密之SHA安全散列算法
前言: 对于SHA安全散列算法,以前没怎么使用过,仅仅是停留在听说过的阶段,今天在看图片缓存框架Glide源码时发现其缓存的Key采用的不是MD5加密算法,而是SHA-256加密算法,这才勾起了我的好 ...
- CRL快速开发框架系列教程十二(MongoDB支持)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- 云瓣影音网站&&微信端(已开源)
随着该项目的发布到线上(小打小闹),即将又要开启另一段崭新的旅程.强迫自己停下来写写所学所得,个人认为总结和分享是一种很棒的学习方式.那让我们先来瞧瞧项目长的什么样.如果着急要源码的朋友,可以下拉到最 ...
- var和dynamic的区别
1.var 1.均是声明动态类型的变量. 2.在编译阶段已经确定类型,在初始化的时候必须提供初始化的值. 3.无法作为方法参数类型,也无法作为返回值类型. 2.dynamic 1.均是声明动态类型的变 ...
- 微信小程序IDE(微信web开发者工具)安装、破解手册
1.IDE下载 微信web开发者工具,本人是用的windows 10 x64系统,用到以下两个版本的IDE安装工具与一个破解工具包: wechat_web_devtools_0.7.0_x64.exe ...
- JS鼠标事件大全 推荐收藏
一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDb ...
- 浏览器的兼容模式下的button中文字垂直方向不居中显示
<button style="cursor:pointer;vertical-align: middle;" >删除</button> 这时候垂直不居中. ...