Question

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

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

具体来说，我想..

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

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

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

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

头部 - 包含ng-controller =＆＃34; configCtrl＆＃34;对于全局配置范围

<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 =＆＃34; testCtrl＆＃34;对于此特定页面范围

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

以下是我的角色控制器＆＃34;配置范围＆＃34;

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)

有什么建议吗？

Answer 1

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

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

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

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

在所有文件中。

Answer 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']);
...

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

2 个答案: