Angular4的QuickStart—— ES6 而非TypeScript

原文發表於本人的我的博客，地址：Angular4的QuickStart——With ES6 Not TypeScript，歡迎反饋探討。

今年3月份，Angular官方發佈了新版——Angular4.0.0，新版本的特性已經有不少文章了，在此不一一贅述。

但從Angular2.x以來，JavaScript版本的官方文檔就從未完整過，而ES6的QuickStart也從未在日程以內，這對初學者而言多少有點不太友好。雖然網上有ES6+Angular2.x的QuickStart，可是多少有點問題，並且跟Angular4有些不同，也過期了。今天爲了折騰Angular4處處找文檔查資料，搞了很久才搞定一個「hello world」，實在有些不爽，爲了幫助像我同樣的初學者，我以爲把這個ES6的QuickStart寫出來也許會有點用。

NOTE:本文實現的內容與官方文檔中的QuickStart實現的內容沒有區別，只是本文是用ES6實現的，而非JavaScript或TypeScript.

廢話少說，show the code.

首先是開發環境，先上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的相關模塊及其轉碼工具Babel。package.json配置好了以後就能夠開始配置開發環境了，

目錄結構：

開發環境：

開發環境的配置須要安裝Node(官網)，而後安裝webpack，

npm install webpack -g

而後在nges6目錄下執行：

npm install

或者執行：

cnpm install

安裝時間可能會有點長，耐心等待，安裝完成後，開發所須要的包就會被下載到node_modules文件夾中，接下來是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將把咱們須要的所有依賴打包到一個文件中(vendor.js)，這樣咱們在HTML中只要用一個script標籤引入這個文件就能夠了(暫不考慮懶加載的問題)。

不知道上面這部分在說什麼的同窗，請先以「nodejs」、「npm」、「webpack」等關鍵詞搜索網上的資料。

組件

Angular從2.0開始組件化，關於組件，中文文檔中介紹說：「組件是一個 Angular 類，用於把數據展現到視圖 (view)，並處理幾乎全部的視圖顯示和交互邏輯。組件是 Angular 系統中最重要的基本構造塊之一。」組件是一個應用的基礎構成，因此，咱們首先在app.component.js中定義一個「組件」：

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

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

export {AppComponent};

在組件的定義中，須要用裝飾器(Decorator)將組件的元數據附加到類上，而後Angular根據這些元數據建立一個組件實例。可是因爲ES6目前不支持裝飾器語法，所以經過static get annotations()方法完成這一工做。

模塊：

Angular是以模塊的形式來組織代碼，每一個Angular應用都至少有一個根模塊(Root Module)，因此接下來是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關鍵字導入依賴的包(platform-browser/core)以及咱們編寫的組件(app.component)，而後用class關鍵字聲明咱們的根模塊(AppModule)。關於impors、declarations、bootstrap的含義，請查閱官方文檔中關於根模塊的部分官方文檔連接

啓動引導：

在main.js中啓動(bootstrap)根模塊，這個引導文件基本上只寫這一次就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文件：

<!DOCTYPE html>
<html>
<head>
    <title>Angular 4 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

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

    <script type="text/javascript" src="public/dist/vendor.js"></script>
</body>
</html>

代碼寫好了，接下來是兩個命令：

webpack --progress
npm start

這兩個命令會將全部須要的js模塊打包到vendor.js中，並啓動一個本地服務器，調用你的瀏覽器，你會看到你的應用跑起來了：

因爲本人也是入門級選手，不少東西也沒搞清楚，因此文章寫得很簡單。可是其中的諸多概念都有很多文章有所論述，能夠在網上查到，我也不可能說得更明白，因此就不拾人牙慧了，更深刻的內容留待之後探討。本文主要是提供一個基於webpack+ES6的QuickStart，若有問題，歡迎留言探討。

如需轉載，請註明原文連接。