1

我有一个非常简单的应用程序，它除了根据用户选择显示两个不同的视图之外什么都不做。这个应用程序是学习路由在 AngularJS 中如何工作的垫脚石。

我的问题是这个。

应用程序在浏览器中运行时可以毫无问题地导航到索引视图。这是因为索引视图没有引用控制器。但是，用户视图确实引用（需要）控制器。这会导致引发的异常是 Arguement 'XCtrl' is not a function, got undefined 的问题。

我的主要指标是：

<html>
<head><title></title></head>
<body>
<div ng-view></div>
</body>
</html>

我的主要 app.js 是：

angular.module('app.controllers', []);

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

angular.module('app', ['app.controllers'])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'views/index.html'
        })
    $routeProvider.when('/users', {
            templateUrl: 'views/users.html',
            controller: 'UserCtrl'
        }).
        otherwise({ redirectTo: '/' });
}]);

我的控制器是：

appControllers.controller('UserCtrl', ['$scope', function ($scope) {
    $scope.users = {
        user: {name: "Ian", age: 30 },
        user: {name: "Paul", age: 37 }
    };
}]);

用户.html

<div ng-repeat="user in users">{{user.name}} {{ user.age }}</div>

索引.html

<h1>index</h1>

任何人都可以看到我哪里出错了。任何帮助都会很棒

编辑：

这是来自浏览器的堆栈跟踪，如果这有帮助的话

错误：参数 'UserCtrl' 不是函数，在错误（）处未定义（http://www.testapp.com/js/angular/angular.min.js:17:68）在 ra（http:// /www.testapp.com/js/angular/angular.min.js:17:176 ) 在http://www.testapp.com/js/angular/angular.min.js:53:60 at k ( http: //www.testapp.com/js/angular/angular.min.js:151:401 ) 在 Object.e.$broadcast ( http://www.testapp.com/js/angular/angular.min.js: 90:517）在http://www.testapp.com/js/angular/angular.min.js:83:6 在 h（http://www.testapp.com/js/angular/angular.min.js :78:207 ) 在 h ( http://www.testapp.com/js/angular/angular.min.js:78:207 ) 在http://www.testapp.com/js/angular/angular.min.js:78:440

还：

www.testapp.com 是本地托管的服务器，没有外部访问权限，以防万一有人尝试但无法访问。

4

2 回答 2

1

在看到一个相关问题后，我注意到我没有将 UserCtrl.js 添加到我的主 index.html 中。添加后它起作用了。但是，我相信有一种方法可以动态添加控制器、指令、服务和过滤器。如果有人知道如何做到这一点，那将非常有帮助。

于 2013-09-18T19:47:31.613 回答
0

Delete the brackets during assignments 

angular.module('app.controllers', []);

var controllers = angular.module('app.controllers');

Or simpler do just htis: 

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

If you put the brackets you'll have two modules ...

于 2013-09-18T19:14:18.400 回答