AngularJS2环境配置

所使用到的文件目录结构如下所示：

1、创建配置文件：

1.1、创建目录：

mkdir angular-quickstart

cd angular-quickstart

1.2、载入需要的库：

创建package.json文件，代码如下所示：

Package.json文件：

{

"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"

}

2、 window上安装node.js

2.1 windows安装包（.msi）

32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi

安装步骤：

步骤1：双击下载后的安装包，如下所示：

步骤2：点击以上的run运行，将出现如下界面：

步骤3：勾选接受协议选项，点击next按钮：

步骤4：Node.js默认安装目录为 "C:\Program Files\nodejs\" , 你可以修改目录，并点击 next（下一步）：

步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next（下一步）

步骤 6 :点击 Install（安装）开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。然后并点击 next（下一步）：

安装过程：

点击 Finish（完成）按钮退出安装向导

3、由于 npm 官网镜像国内访问太慢，这里我使用了淘宝的npm镜像，安装方法如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org

执行后我们就可以使用 cnpm 命令来安装模块

cnpm install

执行成功后，angular-quickstart 目录下就会生成一个 node_modules 目录，这里包含了我们这个实例需要的模块

4、创建Angular组件：

组件（Component）是构成 Angular 应用的基础和核心，一个组件包装了一个特定的功能，并且组件之间协同工作以组装成一个完整的应用程序。

一般来说，一个组件就是一个用于控制视图模板的JavaScript类。

接下来我们在 angular-quickstart 创建一个 app 的目录：

mkdir app

cd app

并添加组件文件 app.component.js ，内如如下：

app.component.js 文件：

(function(app) {

app.AppComponent =

ng.core.Component({

selector: 'my-app',

template: '<h1>我的第一个 Angular 应用</h1>'

})

.Class({ constructor: function() {}

});

})(window.app || (window.app = {}));

5、添加 NgModule

Angular 应用由 Angular 模块组成，该模块包含了 Angular 应用所需要的组件及其他任何东西。

接下来我们创建 app/app.module.js 文件，内容如下：

app.module.js 文件：

(function(app) {

app.AppModule =

ng.core.NgModule({

imports: [ ng.platformBrowser.BrowserModule ],

declarations: [ app.AppComponent ],

bootstrap: [ app.AppComponent ]

})

.Class({

constructor: function() {}

});

})(window.app || (window.app = {}));

6、启动应用：

添加 main.js 文件：

app/main.js 文件：

(function(app) {

document.addEventListener('DOMContentLoaded',

function() {

ng.platformBrowserDynamic

.platformBrowserDynamic()

.bootstrapModule(app.AppModule);

});

})(window.app || (window.app = {}));

7、创建index.html:

index.html 文件：

<html>

<head>

<title>Angular 2 实例 - 菜鸟教程(runoob.com)</title>

</head>

<body>

<my-app>Loading...</my-app>

</body>

</html>

添加一些样式：

styles.css 文件：

h1 {

color: #369;

font-family: Arial, Helvetica, sans-serif;

font-size: 250%;

}

body { margin: 2em; }

打开终端（*我的node.js是安装在E盘下面的Program Files\nodejs中，所以须先切换到E盘，然后cd angular-quickstart），然后输入以下命令：

npm start

访问 http://localhost:3000/，浏览器显示结果为：