在同一个 DOM 上使用多个 Angular.js 控制器答案

【问题标题】：Using Multiple Angular.js Controllers on same DOM在同一个 DOM 上使用多个 Angular.js 控制器
【发布时间】：2017-04-08 04:39:13
【问题描述】：

我对 Angular.js 很陌生，并试图在我的 Node.js 应用程序上实现它。

我已经成功地使用 Angular 为单个控制器创建了 RESTful API，但现在想在单个 DOM 上使用两个或多个控制器。

具体来说，我想..

1) 使用 Angular 为 DOM 模板加载全局范围，其中包含站点标题、导航和元数据等内容，所有这些都将加载到头部、页眉和页脚中。范围将使用 GET 请求拉到我的节点服务器。

2) 使用角度加载给定页面的范围。这将根据每个页面的具体情况而定。最简单的情况是将作用域加载到模板中。

我已经成功地分别完成了 (1) 和 (2)，但是将它们组合起来会引发错误。

这是我的完整模板（实际上是由 Node 部分加载的）：

头 - 包含全局配置范围的 ng-controller="configCtrl"

<html ng-app="angular" ng-controller="configCtrl" ><head> 

<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<title>{{context.title}}</title>
<meta name="description" content="{{context.description}}">
<meta name="author" content="{{context.author}}">

<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

</head><body><div id="wrapper" >

正文 - 包含此特定页面范围的 ng-controller="testCtrl"

<div class="container" ng-controller="testCtrl">    
    <div class="gutter col hidden-xs">&nbsp;</div>
    <div class="content col" >

        <div class="py80">

            <h1>{{context.test}}</h1>

        </div>

    </div> 
    <div class="gutter col hidden-xs">&nbsp;</div>
</div> 

<!-- ANGULAR CONTROLLER FOR THIS PAGE -->
<script src="/public/js/angular/test_controller.js"></script>

页脚 - 包括全局范围控制器的链接

<footer id="footer" ></footer>
</div></body></html> <!-- close tags-->

<!-- ANGULAR CONTROLLER FOR GLOBAL CONFIGURATION SCOPE -->
<script src="/public/js/angular/config_controller.js"></script>

这是我的“配置范围”的 Angular 控制器

var app = angular.module('angular', []);

app.controller('configCtrl', function($scope, $http) {

    console.log("config controller");

    $http.get('/config').then(function(response){ 

        console.log(response.data);

        $scope.context = response.data;

    });

});

这是我的页面范围的 Angular 控制器

var app = angular.module('angular', []);

app.controller('testCtrl', function($scope, $http) {

    console.log("test controller");

    $http.get('/test').then(function(response){ 

        console.log(response.data);

        $scope.context = response.data;

    });

});

我有一些服务器端控制器将数据返回到 Angular，如前所述，它们在独立使用时都可以工作，但一起使用（如上所示）会引发以下客户端错误：

 angular.js:13920 Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?p0=testCtrl&p1=not%20a%20function%2C%20got%20undefined
 at angular.js:38
 at sb (angular.js:1892)
 at Pa (angular.js:1902)
 at angular.js:10330
 at ag (angular.js:9451)
 at p (angular.js:9232)
 at g (angular.js:8620)
 at g (angular.js:8623)
 at g (angular.js:8623)
 at g (angular.js:8623)

有什么建议吗？

【问题讨论】：

标签： javascript jquery angularjs node.js dom

【解决方案1】：

问题是您正在初始化应用程序两次。只做一次：

var app = angular.module('angular', []);

你会没事的。最佳做法是将该行完全分离到另一个文件中（如“app-initialize.js”），然后，您可以这样做：

angular.module('angular').controller(...);

在您的所有文件中。

【讨论】：

【解决方案2】：

var app = angular.module('angular', []);

您将调用此行两次（根据您的示例），这将创建一个名为“angular”的模块两次。

此外，您可以创建工厂或服务并将其注入任何需要它的控制器，而不是使用控制器进行配置。（大致：）

var app = angular.module('someApp', []);
app.controller('testCtrl', function($scope, $http, configFactory) {

    $scope.getConfig = function() {
        configFactory.getConfig()
        .success(function (someConfig) {
            console.log(someConfig);
        });
    }

    $scope.getConfig();

    console.log("test controller");
    $http.get('/test').then(function(response){ 
        console.log(response.data);
        $scope.context = response.data;
    });

});
app.factory('configFactory', ['$http', function($http) {
    var getConfig = function() { 
        return $http.get('/config');
    }
    return getConfig;
}]);

或者，您可以创建一个配置模块并将其作为依赖项传递。

var config = angular.module('config', []).constant('config', { 'something': 2 });
...

var app = angular.module('someApp', ['config']);
...

【讨论】：

啊！感谢您提供最佳实践的解决方案和提示！