角度代碼結構的最佳實踐

Question

問題是我不知道在Angular.JS中將每個單獨的代碼實體（控制器，模型，服務等）放置在單獨的.js文件中是否可行。 我目前正在嘗試以這種方式實施我的解決方案，但是感覺並不對。

例：

step.js內容（模型原型）：

(function() {
    var moduleStep = angular.module('step', []);
    moduleStep.config(function() {
        var defaults = {
            title: "",
            enabled: true,
            active: false,
            visited: false,
            viewUrl: "/clientTemplates/notification/step1.html",
            model: {}
        };

        /**
         * @param {string} title
         * @param {string} viewUrl
         * @param {object} model   [optional]
         * @constructor
         */
        moduleStep.Step = function(title, viewUrl, model) {
            _.extend(this, defaults);
            this.title = title;
            this.viewUrl = viewUrl;
            _.isUndefined(model) && (this.model = model);
        };
        var prot = moduleStep.Step.prototype;

        /**
         * @returns {boolean}
         */
        prot.isValid = function () {
            return true;
        }
    });
}());

masterController.js內容（控制器）：

(function() {
    var moduleController = angular.module('masterController', [
        'ui.bootstrap',
        'step',
        'config'
    ]);

    moduleController.config(function() {
            var Step = angular.module('step').Step;

            /**
             * @type {Array}
             */
            $scope.steps = [
                new Step("step 1", "/clientTemplates/notification/step1.html"),
                new Step("step 2", "/clientTemplates/notification/step2.html", {test2: 2}),
                new Step("step 3", "/clientTemplates/notification/step3.html", {test: 1})
            ];
        };
        controller.$inject = ['$scope'];

        moduleController.masterController = controller;
        console.log(moduleController.masterController);
    });
}());

setupMaster.js（應用程序模塊）

(function() {
    var app = angular.module('setupMaster', [
//    'ngRoute',
        //controllers
        'masterController',
        'config'
    ]);


    /**
     * Конфигурационная функция для провайдеров служб приложения
     */
    app.config(['$controllerProvider', '$httpProvider', function($controllerProvider, $httpProvider) {
        $controllerProvider.register('MasterController', angular.module('masterController').masterController);
    }]);
}());

http://docs.angularjs.org/guide/module

在“推薦的設置”塊中，寫道，應將4個大模塊用於服務，指令，過濾器和應用程序層。 控制器或模型工廠/原型怎么樣？

也許只是我愚蠢或與Angular的范式不兼容，但是Angular中的模塊和注入器系統似乎有點過分設計且違反直覺。 雖然我真的很喜歡Angular的2路數據綁定和臟檢查而不是回調。

Answer 1

我一直在尋找最佳實踐和理由。 除了閱讀有角度的文檔外，其他文章..我發現JohnPapa的描述和深入的解釋使您對為什么和為什么不做什么，不應該做什么有更多的了解。 在這里閱讀

像其他建議的一樣，請檢查角度種子和其他ng生成器等。最終，您會隨着時間的推移適應正確的做法。

沒有對與錯，因為它們都有正確的觀點。 即。 可測試性，依賴項注入，最小化，優化等。

只是分享..

Answer 2

我正在使用w11k Fabs工作，這是一個基本的grunt設置，其中包含livereload / jshint / sass，less / testing / ngannotate ...

該設置是針對視圖/路由的。 表示視圖/路線處於分層的犯規結構中。 對於每個視圖/路線，都有一個新的模塊和ctrl文件。 fabs句柄將它們鏈接到索引文件中。 由於服務在多個視圖中使用，因此它們存儲在單獨的文件夾中。

如果您“ grunt dist”您的項目，則所有內容都將壓縮為1個文件。

嘗試： https : //www.npmjs.com/package/fabs