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

对于Angular.js来说，我很新，并试图在Node.js应用程序上实现它。在同一个DOM上使用多个Angular.js控制器

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

具体而言，我想..

1）使用的角度来加载全局范围包含的东西等的网站的标题，导航，和元数据，所有这些都将被加载到所述头部的DOM模板，页眉和页脚。范围将被使用GET请求拉到我的节点服务器。

2）使用angular为给定页面加载范围。这将根据每个页面的具体情况而定。简单的情况是将范围加载到模板中。

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

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

头 - 含NG-控制器= “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>

这里是我的“配置范围”

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; 

    }); 

});

这里角控制器是我的角控制器的页面适用范围

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.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)

任何建议？

来源

2016-11-24 yevg

问题是你正在初始化应用程序两次。这样做只有一次：

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

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

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

在所有的文件。

来源

2016-11-24 02:14:05 2ps

作品！谢谢。我想这是简单的 – yevg

var app = angular.module('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']); 
...

来源

2016-11-24 02:24:32

啊！感谢您的解决方案并提供最佳实践！ – yevg

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

回答

相关问题