angular2快速构建项目

从零开始，创建一个超级简单的angular2.0的应用。

文件结构：

a.png

1、创建一个新的文件夹，作为我们的项目目录

$ mkdir angular2-quickstart
$ cd angular2-quickstart

2、添加我们需要的库

我们推荐使用npm来获取和管理我们的开发库。
（1）：添加一个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-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "core-js": "^2.4.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "0.6.12",
    "angular2-in-memory-web-api": "0.0.15",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0"
  }
}

（2）：打开终端窗口执行以下命令:

$ npm install

3、添加组件文件夹

$ mkdir app
$ cd app

4、添加组件文件

现在添加一个文件名为app.component.js组件粘贴如下：

(function(app) {
app.AppComponent =
    ng.core.Component({
          selector: 'my-app',
          template: '
My First Angular 2 App
'
    })
    .Class({
        constructor: function() {}
    });
})(window.app || (window.app = {}));

接下来，看看我们都做了哪些工作？
（1）：我们使用IIFE（立即调用函数）定义了一个全局变量app，其中若不存在就传空对象。

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

（2）：通过全局变量app我们输出AppComponent作为外部使用

app.AppComponent =

（3）：用Class预定义了一些对象和方法，方便后续使用，在这里我们定义了一个空的构造函数

.Class({ constructor: function() {} });

（4）：我们用ng.core.Component()定义angular组件，它是一个对象，其中ng.core.Component()有两个参数：一个是选择器，另一个是模板

ng.core.Component({
    selector: 'my-app',
    template: '
My First Angular 2 App
'
})

5、添加一个ngmodule

angular应用程序是由包含所有组件和其他部分的模块组成
（1）：创建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、Bootstrap it!

（1）：添加一个新的文件main.js：

(function(app) {
    document.addEventListener('DOMContentLoaded', function() {
         ng.platformBrowserDynamic.platformBrowserDynamic()
        .bootstrapModule(app.AppModule);
   });
})(window.app || (window.app = {}));

（2）：我们需要满足两个条件才能启动应用程序：
1）、Angular的platformBrowserDynamic().bootstrapModule函数
2）、我们刚刚写的应用程序根模块。

7、在根目录下添加index.html，注意是根目录

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    



    Loading...

8、在根目录下添加styles.css，注意是根目录

h1 {
    color: #369;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 250%;
}
body {
    margin: 2em;
}

9、运行

打开终端窗口并输入此命令：

$ npm start

推荐公众号：前端达人 专注分享当下最实用的的前端技术！
长按二维码点选（识别图中二维码）