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的系列入门文章,有朋友 ...
随机推荐
- SignalR系列续集[系列8:SignalR的性能监测与服务器的负载测试]
目录 SignalR系列目录 前言 也是好久没写博客了,近期确实很忙,嗯..几个项目..头要炸..今天忙里偷闲.继续我们的小系列.. 先谢谢大家的支持.. 我们来聊聊SignalR的性能监测与服务器的 ...
- Hyper-V 激活Windows系统重启后黑屏的解决方法 + 激活方法
异常处理汇总-服 务 器 http://www.cnblogs.com/dunitian/p/4522983.html 服务器相关的知识点:http://www.cnblogs.com/dunitia ...
- git 命令
切换仓库地址: git remote set-url origin xxx.git切换分支:git checkout name撤销修改:git checkout -- file删除文件:git rm ...
- 谈一谈NOSQL的应用,Redis/Mongo
1.心路历程 上年11月份来公司了,和另外一个同事一起,做了公司一个移动项目的微信公众号,然后为了推广微信公众号,策划那边需要我们做一些活动,包括抽奖,投票.最开始是没有用过redis的,公司因为考虑 ...
- 【HanLP】资料链接汇总
Java中调用HanLP配置 HanLP自然语言处理包开源官方文档 了解HanLP的全部 自然语言处理HanLP 开源自由的汉语言处理包主页 GitHub源码 基于hanLP的中文分词详解-MapRe ...
- 【NLP】Python NLTK获取文本语料和词汇资源
Python NLTK 获取文本语料和词汇资源 作者:白宁超 2016年11月7日13:15:24 摘要:NLTK是由宾夕法尼亚大学计算机和信息科学使用python语言实现的一种自然语言工具包,其收集 ...
- Android系统默认对话框添加图片
开发工具Android Studio 今天公司UI要求软件对话框改成加图片的,以前没有做过,所以就学习了一下,废话不多说, 看效果: 创建XML文件dialog_lsit_item.xml <L ...
- iOS之应用版本号的设置规则
版本号的格式:v<主版本号>.<副版本号>.<发布号> 版本号的初始值:v1.0.0 管理规则: 主版本号(Major version) 1. 产品的主体构件进 ...
- Android之ContentProvider数据存储
一.ContentProvider保存数据介绍 一个程序可以通过实现一个ContentProvider的抽象接口将自己的数据完全暴露出去,而且ContentProvider是以类似数据库中表的方式将数 ...
- atitit.细节决定成败的适合情形与缺点
atitit.细节决定成败的适合情形与缺点 1. 在理论界有两种观点:一种是"细节决定成败",另一种是"战略决定成败".1 1.1. 格局决定成败,方向决定成败 ...
最终安装好了是这样的
