角码结构的最佳实践答案

【问题标题】：Best practice of angular code structuring角码结构的最佳实践
【发布时间】：2015-04-27 00:14:51
【问题描述】：

问题是我不知道在 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-way 数据绑定和脏检查而不是回调。

【问题讨论】：

谷歌“角种子”并四处寻找示例。
@Stewie，谢谢，但是角种子并不能解决大型应用程序中可能出现的实际问题。使用了 4 个 JS 文件，就像我在问题中链接到的“模块”手册中推荐的那样。如果很多实体只有 4 个源文件，可以吗？不脏吗？
好吧，我不是专门指angular-seed，而是指其他可以找到的其他种子。有很多。
使用 Yeoman 生成器，我喜欢 npmjs.org/package/generator-cg-angular。它确实可以帮助您整理文件结构等。
Angularjs code/naming conventions的可能重复

标签： javascript angularjs

【解决方案1】：

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

像其他人建议的那样，检查 angular-seed 和其他 ng-generators 等。最终，随着时间的推移，您会对正确的做法感到满意。

没有对错，因为它们都有有效点。 IE。可测试性、依赖注入、缩小、优化等。

只是为了分享..

【讨论】：

【解决方案2】：

我正在使用 w11k Fabs，这是一个基本的 grunt 设置，其中包含 livereload/jshint/sass、less/testing/ngannotate...等内容。

设置是面向视图/路线的。意味着视图/路线处于分层结构中。对于每个视图/路由一个新模块和 ctrl 文件。 fabs 句柄将它们链接到您的索引文件中。由于服务在多个视图中使用，因此它们存储在单独的文件夹中。

如果你“grunt dist”你的项目所有东西都会被压缩到一个文件中。

试试：https://www.npmjs.com/package/fabs

【讨论】：