1

我正在尝试拆分和组织一个 AngularJS 应用程序，使其不仅仅是一个 5000 行的 main.js 文件。拆分指令等并make用于构建工作代码都很好。但是，我的控制器有几个中等复杂的内部类。这些过去大致定义如下（为清楚起见仅显示一个）：

var app = angular.module("infrasense", []);
app.controller("AppMain", function($scope, $http, $timeout) {

    function NavTree(dbMain, dbTimeout, allTagTypes, allAttTypes) {
        ...
    }
    NavTree.prototype = {
        ...
    }

    ...
    $scope.navTree[0] = new NavTree(dbMain, dbTimeout);
    ...

});

NavTree 类（它在数据记录应用程序中保存站点和资产的分层树）使用指令呈现，并在内部使用 $http 与后端服务器通信（树太复杂而无法立即保存在内存中，另外它改变）。

为了继续使用简单的（基于猫的）工具来生成我的最终代码，我想将 NavTree 移出控制器。我目前通过从控制器内部将 $http 传递给它来做到这一点：

function NavTree($http, dbMain, dbTimeout, allTagTypes, allAttTypes) {
    ...
    this.$http = $http;
    ...
}

app.controller("AppMain", function($scope, $http, $timeout) {
    ...
    $scope.navTree[0] = new NavTree($http, dbMain, dbTimeout);
    ...
});

这可行，但感觉不优雅且非 AngularJS 风格。任何人都可以建议做这种事情的“正确”方式吗？

4

1 回答 1

0

成功！我现在在将这些不优雅的内部类从 main.js 移到它们所属的服务中的过程中占了很大比例。

关键的实现，我在阅读文档时错过了，但在“我希望我知道然后我现在知道的——与 AngularJS 一起生活”中重申的是，服务只是使用依赖注入的单例。

我的服务定义如下（其中“Popup”是另一个管理弹出窗口以获取错误消息的服务）：

app.factory("ThingTree", function (Popup, $q, $http) {

    // Database information. This is set up by the "init" function.
    // (There's only one DB, and this way I only have to pass its
    // connection info once.)
    var dbMain = "";
    var dbTimeout = 0;
    ...

    // Each level of the tree is an array of these tree objects.
    function TreeNode() {}
    TreeNode.prototype = {
        open: function() { ... }
        ...
    };

    return {

        // Initialise the database connection.
        init: function(myDbMain, myDbTimeout) {

            dbMain = myDbMain;
            dbTimeout = myDbTimeout;
            ...

        },

        // Create a tree and return the root node.
        create: function() { ... },

        ...

    }

});

感谢您朝着正确的方向前进！

于 2013-10-08T10:29:43.197 回答