组织一个复杂的 AngularJs 应用程序；控制器或服务？答案

【问题标题】：Organizing a complex AngularJs app; controllers or services?组织一个复杂的 AngularJs 应用程序；控制器或服务？
【发布时间】：2014-10-21 09:34:24
【问题描述】：

这个问题解释起来有点复杂，请多多包涵！

我正在构建一个应用程序，它依靠用户交互（大量事件、点击......）来在 iframe 的 DOM 上创建 html 元素（驻留在同一域中）。

<div ng-controller="mainCTRL">
    <ul ng-controller="btnCTRL">
        <li ng-repeat="tool in tools">
            <a href="#" ng-click="toolClicked($index)">{{tool.text}}</a>
        </li>
    </ul>
    <iframe src="same-domain/iframe.html">
        <p>Sorry but your browser does not support iframes!</p>
    </iframe>
</div>

我正在尝试尽可能多地遵循最佳实践，但在此项目中的服务和控制器概念存在问题；在 iframe 中，我不想放置任何 angularjs 指令或代码。把它想象成我用来“接收”我从主控制器生成的代码的画布。

现在，当点击 btn 工具时，它会调用 btnCTRL 上的一个函数，在这个函数内部，我调用了工具工厂内的一个函数，该函数最终调用了当前点击工具的 init 函数：

我为什么会这样选择？因为它可以让我更好地将我的应用程序组织成小块的模块。

btnCTRL.js

$scope.toolClicked = function($index) {
    // Launch the ignit function in the main tool factory
    ToolsFactory.ignit(config);
};

tools.js

angular.module('myApp')
    .factory('ToolsFactory', ['Tool1Factory', 'Tool2Factory', 'Tool3Factory',
        function(Tool1Factory, Tool2Factory, Tool3Factory) {
            var toolsAsFactory = {
                't1': Tool1Factory,
                't2': Tool2Factory,
                't3': Tool3Factory
            };
            var ignit = function($config) {
                // Some code to set current clicked tool
                // ...

                // Call the init function on the selected tool
                toolsAsFactory[config.selectedTool].init(config);
            };

            return {
                ignit: ignit
            };
        }
    ]);

tools_1.js

angular.module('Tools')
    .factory('Tool1Factory', function() {

        var init = function($config) {
            // Now adds the html to the iframe!
            //...

        };

        return {
            init: init
        };
    });

所以.. 问题：由于我的 iframe 不应包含任何角度代码.. 这是构建此类应用程序的好方法吗？对于具有繁重事件管理的应用程序，Angular 是最佳选择吗？

【问题讨论】：

标签： angularjs events iframe module code-organization

【解决方案1】：

我最终决定放弃 AngularJS 方法并改用 BackboneJS。

我的决定受到 Kristof Erjoseph 的 this code sample 和 Adobe 设计师 Aaron Shekey 的 this great article 的启发。

我还使用了RequireJS 及其optimizer。

【讨论】：