摘要：今年月份，官方發(fā)布了新版，新版本的特性已經(jīng)有很多文章了，在此不一一贅述。組件是系統(tǒng)中最重要的基本構(gòu)造塊之一。但是由于目前不支持裝飾器語(yǔ)法，因此通過(guò)方法完成這一工作。本文主要是提供一個(gè)基于的，如有問(wèn)題，歡迎留言探討。

原文發(fā)表于本人的個(gè)人博客，地址：Angular4的QuickStart——With ES6 Not TypeScript，歡迎反饋探討。

今年3月份，Angular官方發(fā)布了新版——Angular4.0.0，新版本的特性已經(jīng)有很多文章了，在此不一一贅述。

但從Angular2.x以來(lái)，JavaScript版本的官方文檔就從未完整過(guò)，而ES6的QuickStart也從未在日程之內(nèi)，這對(duì)初學(xué)者而言多少有點(diǎn)不太友好。雖然網(wǎng)上有ES6+Angular2.x的QuickStart，但是多少有點(diǎn)問(wèn)題，而且跟Angular4有些不一樣，也過(guò)時(shí)了。今天為了折騰Angular4到處找文檔查資料，搞了好久才搞定一個(gè)“hello world”，實(shí)在有些不爽，為了幫助像我一樣的初學(xué)者，我覺(jué)得把這個(gè)ES6的QuickStart寫(xiě)出來(lái)也許會(huì)有點(diǎn)用。

NOTE:本文實(shí)現(xiàn)的內(nèi)容與官方文檔中的QuickStart實(shí)現(xiàn)的內(nèi)容沒(méi)有區(qū)別，只是本文是用ES6實(shí)現(xiàn)的，而非JavaScript或TypeScript.

廢話少說(shuō)，show the code.

首先是開(kāi)發(fā)環(huán)境，先上package.json：

//package.json
{
  "name": "angular4-quickstart-es6-webpack",
  "version": "1.0.0",
  "description": "The Angular 4 Quickstart tutorial done in ES6 with webpack and Babel, without using TypeScript.",
  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server",
    "webpack": "webpack --progress",
    "postinstall": "npm run webpack"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.7.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "script-loader": "^0.6.1",
    "webpack": "^1.12.14"
  }
}

除了Angular官方文檔中列出的包和工具之外，還包括了ES6的相關(guān)模塊及其轉(zhuǎn)碼工具Babel。package.json配置好了之后就可以開(kāi)始配置開(kāi)發(fā)環(huán)境了，

目錄結(jié)構(gòu)：

開(kāi)發(fā)環(huán)境：

開(kāi)發(fā)環(huán)境的配置需要安裝Node(官網(wǎng))，然后安裝webpack，

npm install webpack -g

然后在nges6目錄下執(zhí)行：

npm install

或者執(zhí)行：

cnpm install

安裝時(shí)間可能會(huì)有點(diǎn)長(zhǎng)，耐心等待，安裝完成后，開(kāi)發(fā)所需要的包就會(huì)被下載到node_modules文件夾中，接下來(lái)是webpack的配置文件：

//webpack.config.js
var path = require("path");
module.exports = {
    entry: path.join(__dirname, "public", "src","index.js"),
    output: {
        path: path.join(__dirname, "public", "dist"),
        filename: "vendor.js"
    },
    devtool: "source-map",
    module: {
        loaders: [
            {
                test: /.js$/,
                loader: "babel-loader",
                query: {
                    presets: ["es2015"]
                }
            },
        ]
    }
}

配置文件中我們定義了入口文件(public/src/index.js)，然后定義了輸出路徑和輸出文件的命名(public/dist/vendor.js)，webpack將把我們需要的全部依賴打包到一個(gè)文件中(vendor.js)，這樣我們?cè)贖TML中只要用一個(gè)script標(biāo)簽引入這個(gè)文件就可以了(暫不考慮懶加載的問(wèn)題)。

不知道上面這部分在說(shuō)什么的同學(xué)，請(qǐng)先以“nodejs”、“npm”、“webpack”等關(guān)鍵詞搜索網(wǎng)上的資料。

組件

Angular從2.0開(kāi)始組件化，關(guān)于組件，中文文檔中介紹說(shuō)：“組件是一個(gè) Angular 類(lèi)，用于把數(shù)據(jù)展示到視圖 (view)，并處理幾乎所有的視圖顯示和交互邏輯。組件是 Angular 系統(tǒng)中最重要的基本構(gòu)造塊之一?！苯M件是一個(gè)應(yīng)用的基礎(chǔ)構(gòu)成，所以，我們首先在app.component.js中定義一個(gè)“組件”：

//app.component.js
import {Component} from "@angular/core";

class AppComponent {
    static get annotations() {
        return [
            new Component({
                selector: "my-app",
                template: "
My First Angular 2 App
"
            }),
        ];
    }
    
    constructor () {}
}

export {AppComponent};

在組件的定義中，需要用裝飾器(Decorator)將組件的元數(shù)據(jù)附加到類(lèi)上，然后Angular根據(jù)這些元數(shù)據(jù)創(chuàng)建一個(gè)組件實(shí)例。但是由于ES6目前不支持裝飾器語(yǔ)法，因此通過(guò)static get annotations()方法完成這一工作。

模塊：

Angular是以模塊的形式來(lái)組織代碼，每個(gè)Angular應(yīng)用都至少有一個(gè)根模塊(Root Module)，所以接下來(lái)是app.module.js:

//app.module.js
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {AppComponent} from "./app.component";

class AppModule{
    static get annotations() {
        return [
            new NgModule({
                imports: [ BrowserModule ],
                declarations: [ AppComponent ],
                  bootstrap: [ AppComponent ]
            })
        ];
    }
}

export {AppModule};

首先用ES6中的import關(guān)鍵字導(dǎo)入依賴的包(platform-browser/core)以及我們編寫(xiě)的組件(app.component)，然后用class關(guān)鍵字聲明我們的根模塊(AppModule)。關(guān)于impors、declarations、bootstrap的含義，請(qǐng)查閱官方文檔中關(guān)于根模塊的部分官方文檔鏈接

啟動(dòng)引導(dǎo)：

在main.js中啟動(dòng)(bootstrap)根模塊，這個(gè)引導(dǎo)文件基本上只寫(xiě)這一次就OK了:

//main.js
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
import {AppModule} from "./app.module";

let boot = document.addEventListener("DOMContentLoaded", () => {
    platformBrowserDynamic().bootstrapModule(AppModule);
});

module.exports = boot;

index.js

index.js用于告訴webpack需要打包的依賴都有哪些。

//index.js
require("!!script!../../node_modules/es6-shim/es6-shim.min.js");
require("!!script!../../node_modules/core-js/client/shim.min.js");
require("!!script!../../node_modules/zone.js/dist/zone.js");
require("!!script!../../node_modules/rxjs/bundles/Rx.min.js");
require("!!script!../../node_modules/@angular/core/bundles/core.umd.js");
require("!!script!../../node_modules/@angular/common/bundles/common.umd.js");
require("!!script!../../node_modules/@angular/compiler/bundles/compiler.umd.js");
require("!!script!../../node_modules/@angular/platform-browser/bundles/platform-browser.umd.js");
require("!!script!../../node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js");


require("./app/main");

index.html

最后是index.html文件：

    
    



    Loading...

    

代碼寫(xiě)好了，接下來(lái)是兩個(gè)命令：

webpack --progress
npm start

這兩個(gè)命令會(huì)將所有需要的js模塊打包到vendor.js中，并啟動(dòng)一個(gè)本地服務(wù)器，調(diào)用你的瀏覽器，你會(huì)看到你的應(yīng)用跑起來(lái)了：

由于本人也是入門(mén)級(jí)選手，很多東西也沒(méi)搞清楚，所以文章寫(xiě)得很簡(jiǎn)單。但是其中的諸多概念都有不少文章有所論述，可以在網(wǎng)上查到，我也不可能說(shuō)得更明白，所以就不拾人牙慧了，更深入的內(nèi)容留待以后探討。本文主要是提供一個(gè)基于webpack+ES6的QuickStart，如有問(wèn)題，歡迎留言探討。

如需轉(zhuǎn)載，請(qǐng)注明原文鏈接。