[Step

随着rc（release candidate，候选版本）版本的推出，万众瞩目的angular2终于离正式发布不远啦！五月初举办的ng-conf大会已经过去了整整一个月，大多数api都如愿保持在了相对稳定的状态——当然也有router这样的例外，在rc阶段还在大面积返工，让人颇为不解——不过总得说来，现在学习angular2不失为一个恰当的时机。

Google为angular2准备了完善的文档和教程，按理说，官网（https://angular.io）自然是学习新框架的最好教材。略显遗憾的是，在Basic章节的Overview部分中，作者在开篇就明确提到这是一份准备给有经验的开发者的一份文档（This is a practical guide to Angular for experienced programmers who are building client applications in HTML and TypeScript）。换言之，如果要较好地理解官网上的文档和教程，对阅读者是有一定要求的。最显而易见的是，在angular2中，连运行入门级的hello world都需要配置编译环境和后端支持——别忘了，即使是去年火遍大江南北的react，我们在学习hello world时还能通过script引入babel来在运行时解析jsx呢（当然在生产环境上可不能这么干）。如果要细数下来，要求就更多了：node和npm、webpack或者systemjs之类的打包和模块化工具、面向对象编程、es6的基本语法和概念、Web Components等新标准……

博主在新技术新框架面前并不是一个因循守旧的人，只是有一点让我比较担忧：如果angular2的入门门槛太高，那对以后的框架推广和社区发展会不会有一些不利的影响呢？出于这个想法，博主决定推出一个step by step的博客系列，希望将angular2带给更多感兴趣、但可能暂时缺少相关开发经验的同学。

下面就是本系列博客的第一篇：Hello World与自动化环境搭建。

官网在quickstart中使用了systemjs、lite-server，配置较为复杂；为了简单起见，本文将使用大家更熟悉的gulp、browserify方案。出于相同的目的，编译的目标版本将选择es6而非es5，所以请读者在继续阅读之前请确保已经将chrome升级到最新版本。另外，node环境也请先安装好，具体步骤这里就不赘述了。

1. 创建项目，初始化package.json因为gulp监视了ts文件的变动，如果之后要修改和调试，只需要在browserify work done的提示出来之后刷新网页即可。

angular2 hello world的例子以及随后的教程所需要的自动化编译环境就搭建完啦，对angular2是不是多多少少有了点感觉呢？欢迎继续阅读本系列的后续教程。

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：[Step

关键词：