Javascript 角度代码构造的最佳实践

问题是，我不知道在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;
        }
    });
}());

(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);
    });
}());

masterController.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;
        }
    });
}());

(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（应用程序模块）

在“推荐设置”模块中，有4个大模块用于服务、指令、过滤器和应用层。那么控制器或模型工厂/原型呢

---

也许只是我太笨了，或者与Angular的范例不兼容，但Angular中的模块和喷油器系统似乎有点设计过度，违反直觉。尽管我非常喜欢Angular的双向数据绑定和脏检查，而不是回调。

我一直在努力寻找最佳实践和理由。除了阅读文档，其他文章。。我发现描述和深入的解释让我对为什么和为什么不，做什么和不做什么有了更多的了解

像其他人建议的那样，检查angular seed和其他ng生成器等。最终，这是您能够适应随时间发展的正确实践的地方

没有对错，因为他们都有正确的观点。即可测试性、依赖注入、缩小、优化。。等等

---

只是为了分享..

我正在与w11k Fabs合作，这是一个基本的grunt设置，包含livereload/jshint/sass、less/testing/ngannotate

设置以视图/路线为导向。表示视图/管线处于分层文件夹结构中。对于每个视图/布线，都会创建一个新模块和ctrl文件。用于在索引文件中链接它们的fabs句柄。由于服务在多个视图中使用，所以它们存储在单独的文件夹中

如果您“grunt dist”您的项目，所有内容都将缩小为一个文件

---

试试：

Google“angular seed”并四处寻找示例。@Stewie，谢谢，但angular seed不能解决大型应用程序中可能出现的实际问题。使用了4个JS文件，很像我在问题中链接的“模块”手册中推荐的。如果很多实体只有4个源文件，可以吗？它不脏吗？嗯，我不是特别指，而是指其他可以找到的种子。有很多。我喜欢用约曼发电机。它真的帮助你整理文件结构等可能的重复