摘要：不用我贅述，前端開發人員一定耳熟能詳。命令會用這個配置，生成的結果都會給文件名加，文件也會壓縮。可用工具介紹啟動調試服務器，使用作為配置，不直接生成物理文件，直接內存級別響應調試服務器資源請求。

AngularJS不用我贅述，前端開發人員一定耳熟能詳。有人稱之為MVWhatever框架，意思是使用AngularJS，你可以參考任意范式進行應用開發，無論是MVC、還是MVVVM都信手拈來，只要你懂，范式在AngularJS手下，都可以輕松適配。

隨著各種現代瀏覽器、以及node對ES6的支持，已經有越來越多的ES6特性可以在程序中使用，她們給開發過程帶來的便利不言而喻，舉個小例子，我想從一個數組里找一些符合條件的數據，放入另一個數組內，過去我們這么寫:

var list = [],
    i;

for (i = 0; i < originalList.length; i++) {
    var item = originalList[i];
    if (item.gender === "male") {
        list.push(item);
    }
}

console.log(list); //符合條件的新數組

如果改用數組的高階函數，再配合ES6的arrow function，代碼可以簡潔如斯：

const list = originalList.filter(item => item.gender === "male");

console.log(list); //符合條件的新數組

既然有如此優雅的語法糖能讓我們的開發變得high到爆，那過去我們認為屌炸天的AngularJS(現在也屌炸天，只不過還有Angular2, React, vue橫空出世)是不是可以用ES6來寫？少年不要懷疑，真的可以哦！

一個良好、快速、簡潔的starter工具有利于我們對ES6編寫AngularJS的深入認知，所以我要用一個骨架生成器generator-es6-angular來創建新項目，該generator是依托于yeoman的腳手架。

npm install -g yo

請注意前綴sudo，如果你使用的是unix like操作系統的話

npm install -g generator-es6-angular

請注意前綴sudo，如果你使用的是unix like操作系統的話

先找個你喜歡的目錄，然后運行下面的命令，因為一會新項目會直接創建在該目錄下。

yo es6-angular

上面命令回車后，生成器會問你如下問題，老實作答即可(注意: 對單頁應用沒經驗的孩紙，在Use html5 model這個問題上，請選擇No; 當問你Which registry would you use?時，國內用戶選擇第一個淘寶鏡像安裝速度會快很多)

當命令執行完畢后，你就能在當前目錄下看到剛才創建的項目了，本例中我使用的project name是es6-demo。

#進入剛創建的項目目錄
cd es6-demo
#啟動調試服務
npm start

然后你就可以在http://localhost:8080下，看到剛創建的項目的運行效果了:

es6-demo
├── etc
│?? └── config.js
├── img
│?? └── ...
├── js
│?? ├── features
│?? │?? ├── about
│?? │?? │?? ├── components
│?? │?? │?? │?? ├── about.co
│?? │?? │?? │?? ├── about.css
│?? │?? │?? │?? └── subs
│?? │?? │?? │??     ├── more
│?? │?? │?? │??     │?? ├── index.co
│?? │?? │?? │??     │?? └── more.css
│?? │?? │?? │??     └── why
│?? │?? │?? │??         ├── index.co
│?? │?? │?? │??         └── why.css
│?? │?? │?? ├── main.js
│?? │?? │?? └── routes.js
│?? │?? ├── common
│?? │?? │?? ├── components
│?? │?? │?? │?? ├── main.js
│?? │?? │?? │?? ├── menu.co
│?? │?? │?? │?? └── menu.css
│?? │?? │?? ├── directives
│?? │?? │?? │?? ├── autofocus.js
│?? │?? │?? │?? └── main.js
│?? │?? │?? ├── main.js
│?? │?? │?? └── runners
│?? │?? │??     ├── main.js
│?? │?? │??     └── routeIndicator.js
│?? │?? ├── home
│?? │?? │?? ├── components
│?? │?? │?? │?? ├── home.co
│?? │?? │?? │?? └── home.css
│   │   │   │
│?? │?? │?? ├── main.js
│?? │?? │?? ├── routes.js
│?? │?? │?? └── service
│?? │?? │??     └── HomeService.js
│?? │?? └── main.js
│?? ├── fw
│?? │?? ├── config
│?? │?? │?? ├── SSOConfig.js
│?? │?? │?? ├── main.js
│?? │?? │?? └── routerConfig.js
│?? │?? ├── ext
│?? │?? │?? └── main.js
│?? │?? ├── helper
│?? │?? │?? ├── event.js
│?? │?? │?? ├── ngDeclare.js
│?? │?? │?? └── object.js
│?? │?? └── value
│?? │??     ├── main.js
│?? │??     └── routesValue.js
│?? ├── application.co
│?? ├── application.css
│?? ├── index.js
│?? └── main.js
├── index.html_vm
├── package.json
├── postcss.config.js
├── webpack.config.js
└── webpack.config.prod.js

etc, 一些公共配置性內容，可以放在這里，方便查找、通用

img, 用我多說么？放圖片的啦

js, 分為features和fw兩大部分。這個內容略多，我后面詳述吧。

index.html_vm, 單頁應用html模版，最終的html會由webpack根據這個模版生成

package.json, 項目的npm描述文件，那些具體的工具命令(譬如剛才用過的npm start，都在這里面定義好了)

postcss.config.js, postcss的配置文件

webpack.config.js, 開發、調試環境使用的webpack配置

webpack.config.prod.js, 正式運行環境使用的webpack配置。npm run release命令會用這個配置，生成的結果都會給文件名加hash，javascript文件也會壓縮。

npm start, 啟動調試服務器，使用webpack.config.dev.js作為webpack配置，不直接生成物理文件，直接內存級別響應調試服務器資源請求。而且內置hot reload，不用重啟服務，修改源碼，瀏覽器即可刷新看到新效果

npm run release, 使用webpack.config.prod.js作為webpack配置，生成壓縮、去緩存化的bundle文件到es6-demo/build目錄下。也就是說，如果你要發布到生產環境或者其它什么測試環境，你應該提供的是es6-demo/build目錄下生成的那堆東西，而不是源碼。

common

那些通用的組件、指令、過濾器、服務。。。通通應該放在這里，譬如為了演示方便，我已經在features/common/directives里寫了一個autofocus.js的指令，拿去用，不要客氣。代碼如下：

export default {
    type: "directive",//聲明這是一個指令
    name: "autofocus",//聲明指令名

    //聲明指令構造函數，詳見：https://docs.angularjs.org/api/ng/type/angular.Module#directive
    directiveFactory: function() {
        "ngInject";

        return {
            restrict: "A",
            link($scope, element) {
                element[0].focus();
            }
        };
    }
};

同時當然也可以聲明諸如：組件、過濾器之類的公共工具，詳見:common

about
home

這兩個就是純粹為了演示“功能 <對應> 路由”這個小原則而做的，你可以分別在這兩個feature下找到一個routes.js，里面的內容就描述了該功能對應一個(或多個)路由，是何等的easy。至于最后這個路由會怎樣被這個骨架使用，小伙伴們，好好研究哦！

這里面都是些所謂"框架"級別的設置，有興趣的話挨個兒打開瞧瞧嘛，沒什么大不了的。

特別注意，大部分時候，你的開發都應該圍繞features目錄展開，之所以叫fw，就是和具體業務無關，除非你需要修改框架啟動邏輯，路由控制系統。。。，否則不需要動這里的內容

入口文件

/**
 * 
 * 這里連用兩個ensure，是webpack的特性，可以強制在bundle時將內容拆成兩個部分
 * 然后兩個部分還并行加載
 *
 */

//第一個部分是一個很小的spinner，在并行加載兩個chunk時，這個非常小的部分90%會競速成功
//于是你就看到了傳說中的loading動畫
require.ensure(["splash-screen/dist/splash.min.css", "splash-screen"], function(require) {

    require("splash-screen/dist/splash.min.css").use();
    require("splash-screen").Splash.enable("circular");
});

//由于這里是真正的業務，代碼多了太多，所以體積也更大，加載也更慢，于是在這個chunk加載完成前
//有個美好的loading動畫，要比生硬的白屏更優雅。
//放心，這個chunk加載完后，loading動畫也會被銷毀
require.ensure(["css/main.css", "splash-screen", "./main"], function(require) {

    require("css/main.css").use();
    //這里啟動了真正的“框架”
    var App = require("./main").default;
    (new App()).run();
});

“框架”啟動器

//引入依賴部分
import angular from "angular";
//引入Object幫助庫
import {pluck} from "./fw/helper/object";
//引入feature注冊工具
import {declareFeatures, declareValues, declareDirectives, declareComponents, declareRunners, declareFilters} from "./fw/helper/ngDeclare";
//引入三方依賴
import Extensions from "./fw/ext/main";
//引入項目配置
import Configurators from "./fw/config/main";
//引入項目常量設置
import Values from "./fw/value/main";
//引入features
import Things from "./features/main";
//引入根組件
import Application from "./application";
//引入啟動spinner控制器
import {Splash} from "splash-screen";

class App {

    constructor() {
        //這里相當于ng-app的名字
        this.appName = "es6-demo";
        //找到所有的features
        this.features = Things.filter(t => t.type === "feature" && t.name);
    }
    
    //檢查項目基本設置
    validate() {
        if (!this.features || this.features.length === 0) {
            return console.warn("No features loaded");
        }

        const modNames = pluck(this.features, "name").sort();
        for (let i = 0; i < modNames.length - 1; i++) {
            if (modNames[i] === modNames[i + 1]) {
                throw new Error("Duplicated Module: [ " + modNames[i] + " ], you have to specify another name");
            }
        }
    }

    //從features實例中提取AngularJS module name
    //并將這些name作為es6-demo的依賴
    //會在下面createApp時用到
    findDependencies() {
        this.depends = [...Extensions, ...this.features.map(f => f.name)];
    }

    //創建angular應用
    createApp() {
        declareFeatures(this.features);

        this.app = angular.module(this.appName, this.depends);
        this.app.component("application", Application);
    }

    //配置es6-demo
    configApp() {
        Configurators.forEach(Configurator => {
            this.app.config(Configurator.config);
        });
    }
    
    //注冊fw下的“框架”級service
    registerServices() {
        declareValues(this.app, Values);
        declareDirectives(this.app, Things.filter(t => t.type === "directive"));
        declareComponents(this.app, Things.filter(t => t.type === "component"));
        declareRunners(this.app, Things.filter(t => t.type === "runner"));
        declareFilters(this.app, Things.filter(t => t.type === "filter"));
    }

    //看到了么，這里我會銷毀loading動畫，并做了容錯
    //也就是說，即便你遇到了那微乎其微的狀況，loading動畫比業務的chunk加載還慢
    //我也會默默的把它收拾掉的
    destroySplash() {
        Splash.destroy();
        require("splash-screen/dist/splash.min.css").unuse();
        setTimeout(() => {
            if (Splash.isRunning()) {
                this.destroySplash();
            }
        }, 100);
    }
    
    //啟動AngularJS app
    launch() {
        angular.bootstrap(document, [this.appName]);
    }

    //順序激活所有模塊
    run() {
        this.validate();
        this.findDependencies();
        this.createApp();
        this.configApp();
        this.registerServices();
        this.destroySplash();
        this.launch();
    }

}

export default App;

features/home/main.js

//引入路由
import routes from "./routes";

//引入所有本feature中要用到的組件
import home from "./components/home";
import logo from "./components/subs/logo";
import description from "./components/subs/description";
import github from "./components/subs/github";
import todoApp from "./components/subs/todo";
import footer from "./components/subs/footer";

//引入本feature中要用到的service
import HomeService from "./service/HomeService";

export default {
    type: "feature",//聲明該模塊是一個feature
    name: "home",//聲明feature的名字，必須的
    routes,//倒入路由
    component: {//注冊所有用到的組件
        home,
        logo,
        description,
        github,
        todoApp,
        footer
    },
    service: {//注冊所有用到的service
        HomeService
    }
};

簡單到沒朋友

export default [
    {
        id: "home",//為該路由起一個唯一標識符
        isDefault: true,//聲明是否為默認路由
        when: "/home",//路由路徑
        template: ""http://路由對應組件
    }
];

//引入該組件對應的css，注意這里不會有像vue那樣的作用域，
//不過能幫助你分離css內容，也不錯的
import "./home.css";

//導出組件聲明對象
export default {
    template: `
        
        
        
        
        
    `,
    controller: class {
        //下面是依賴注入的關鍵，通過https://github.com/schmod/babel-plugin-angularjs-annotate實現
        /*@ngInject*/
        constructor(HomeService) {
            this.HomeService = HomeService;
            this.todos = [];
            this.loading = true;
        }

        $onInit() {
            this.HomeService
                .getInitTodos()
                .then(todos => {
                    this.todos = todos;
                    this.loading = false;
                });
        }

        addTodo(todo) {
            this.todos = [todo, ...this.todos];
        }

        toggleTodo(todo) {
            this.todos = this.todos.map(t => {
                if (t.txt !== todo.txt) {
                    return t;
                }
                return {
                    finished: !todo.finished,
                    txt: t.txt
                };
            });
        }

        archive() {
            this.todos = this.todos.filter(todo => !todo.finished);
        }

        $onDestroy() {}
    }
};

最后，你可能還有其它問題，直接來看看這里，或者Github上給我提issue也未嘗不可呢