本章节我们为大家介绍如何配置 Angular 2 的执行环境。
本章节使用的是 JavaScript 来创建 Angular 的应用，当然你也可以使用 TypeScript 和 Dart 来创建 Angular 应用 。
本章节使用到的文件目录结构如下所示:
创建配置文件
创建目录
代码语言：javascript复制$ mkdir angular-quickstart
$ cd angular-quickstart载入需要的库
这里我们推荐使用 npm 来作为包的管理工具，如果你还没安装npm或者不了解 npm 可以查看我们的教程：NPM 使用介绍。
创建 package.json 文件，代码如下所示：
代码语言：javascript复制{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "npm run lite",
"lite": "lite-server"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0",
"@angular/http": "2.0.0",
"@angular/platform-browser": "2.0.0",
"@angular/platform-browser-dynamic": "2.0.0",
"@angular/router": "3.0.0",
"@angular/upgrade": "2.0.0",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"zone.js": "^0.6.23",
"angular2-in-memory-web-api": "0.0.20",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0"
}
}由于 npm 官网镜像国内访问太慢，这里我使用了淘宝的npm镜像，安装方法如下：
代码语言：javascript复制$ npm install -g cnpm --registry=https://registry.npm.taobao.org执行后我们就可以使用 cnpm 命令来安装模块：
代码语言：javascript复制$ cnpm install执行成功后，angular-quickstart 目录下就会生成一个 node_modules 目录，这里包含了我们这个实例需要的模块。
创建 Angular 组件
组件（Component）是构成 Angular 应用的基础和核心，一个组件包装了一个特定的功能，并且组件之间协同工作以组装成一个完整的应用程序。
一般来说，一个组件就是一个用于控制视图模板的JavaScript类。
接下来我们在 angular-quickstart 创建一个 app 的目录：
代码语言：javascript复制$ mkdir app
$ cd app并添加组件文件 app.component.js ，内容如下：
代码语言：javascript复制(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template: '<h1>我的第一个 Angular 应用</h1>'
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));
接下来我们来分析下以上代码：
我们通过链式调用全局Angular core命名空间ng.core中的Component和Class方法创建了一个名为AppComponent的可视化组件。
Component方法接受一个包含两个属性的配置对象，Class方法是我们实现组件本身的地方，在Class方法中我们给组件添加属性和方法，它们会绑定到相应的视图和行为。
