angular2环境搭建（入门）
http://mp.weixin.qq.com/s?__biz=MjM5MjQxODY5NA==&mid=2648537887&idx=1&sn=7fcb36947287ec13634492bc200680de&open_source=weibo_search
远在去年，小编就angular1.x写过很多了，其中也包括基于angular1.x的手机端框架ionic，但时代在进步，咱学习的步伐也不能落后，前端时间也研究过react，但不知为何学了一段时间还是无从下手，这不又重新投向angular的怀抱，希望angular越来越好，angular2对于小编来说也是初学，虽然有angular1.x的基础，但是并没有什么卵用，今天就临时学的一点东西给大家做个分享。
在开始之前，想附上angular各个版本的下载地址：https://code.angularjs.org/，如果嫌复制起来麻烦，你也可以移步到文章末尾点击阅读原文。
angular2的环境搭建有三种方式：javascript，typescript或者dart，今天我们采用的是javascript，毕竟对于初学者来说更容易理解一些，至于typescript方式给大家一个链接，可以自行了解（http://www.cnblogs.com/flyingzl/articles/4530186.html），废话不多说，咱就开始步入正题：
1、创建项目文件夹
打开命令行窗口：
mkdir angular2-quickstart cd angular2-quickstart
当然咱也可以不这么麻烦，毕竟习惯了windows系统的不喜欢整这么多命令，最low的方式无非于右键新建文件夹了，然后双击进去，按住shift键单击右键，选择“在此处打开命令窗口”，其目的是一样的。
2、安装基础库
我们使用npm package manager来安装需要的开发库和开发工具。（提示：前提是你已经安装好nodejs）
angular2（angular 2 库）
live-server（一个静态文件服务器，而已在修改文件之后，自动重新加载到浏览器）
我们接着在上面的命令行窗口中一次输入以下命令：
npm init -y npm i angular2@2.0.0-alpha.44 --save --save-exact npm i live-server --save-dev
如果不出意外的话，你敢新建的文件夹里面就会有如下文件目录：
当然如果有什么问题失败的话，你可以尝试下FQ，在这里小编一直都处于FQ状态自然就没有什么问题。
打开package.json，你可以看到如下代码：
但是我们需要在改变文件的同时能自动同步到浏览器，我们还需要在这个文件里面加上以下代码：
"scripts": { "start": "live-server"
}
最终结果如下：
到这里环境就基本上搭建完毕，接下来我们就来写个hello world。
3、第一个angular component（组件）
在根目录下添加一个名为app.js的文件，输入以下内容。
var AppComponent = ng
.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function () { }
});
至于为什么要这么写，还有没有更简单的写法，这并非今天的重点，如果有感兴趣的，可以移步这里（汇智网），在今后的分享中，小编会提到。
4、启动应用
接下来我们将app.js改成如下：
(function() {var AppComponent = ng
.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function () { }
});
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(AppComponent);
});
})();
5、创建index.html
在项目根目录中添加名为index.html的页面，内容如下：
<html>
<head>
<title>Angular 2 QuickStart</title>
<script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
<script src="app.js"></script>
</head>
<body>
<my-app></my-app>
</body></html>
6、运行项目
我们需要一个文件服务器来服务静态资源，而我们上面添加的
"scripts": { "start": "live-server"
}
就是为我们提供一个文件服务器，
我们只需要在命令行中输入：npm start就可以成功创建一个文件服务器，并且成功运行项目。
接下来我们尝试修改app.js，在保存的时候，页面也会同步刷新，这便是我们今天要了解的所有内容，希望对大家有所帮助。
浙公网安备 33010602011771号