angularjs路由不起作用参数'CatCtrl'不是函数，未定义

angularjs route does not work Argument 'CatCtrl' is not a function, got undefined

本文关键字：函数 未定义 CatCtrl 不起作用 路由 angularjs 参数      更新时间：2023-09-26

我在app.js文件下面

var app = angular.module('base', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/categories', {
            templateUrl: 'views/cat.view.html',
            controller: 'CatCtrl'
        })
    }]);

这是CatCtrl.js文件

angular.module('base').controller('CatCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('/categories').success(function (data) {
        $scope.categories = data;
    });
}]);

这是cat.view.html

<div ng-controller="CatCtrl">
    <div class="row">
        <div class="categories">
              Cats View
        </div>
    </div>
</div>

我已经将ng-app="base"添加到我的index.html文件中。

我得到以下错误

Error: [ng:areq] Argument 'CatCtrl' is not a function, got undefined

我正在使用angularjs 1.4.7。

我已经在stackoverflow上查看了其他答案来解决这个问题，但没有一个对我有效。我如何解决这个错误

更新

这是Plunk

添加类似的依赖项

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

希望这对你有帮助。

您将不得不进行两个小的更改-

  1. 首先，我在您的代码中没有看到任何CatCtrl。更改此行

    angular.module（'kB'）.controller（'CategoriesCtrl'，['$scope'，'$http'，

    至

    angular.module（'kB'）.controller（'CatCtrl'，['$scope'，'$http'，

  2. 其次，由于控制器是在不同于基本的模块（KB）中定义的，因此如果您希望使用控制器，则需要将模块注入基本中

    var app=angular.module（'base'，['ngRoute'，'kB']）；

最后一点-由于您已经在路由中提到CatCtrl，因此无需在视图中再次使用它。

这是的工作演示

http://dojo.telerik.com/EFUJo

var app = angular.module('base', ['ngRoute']);
angular.module('base').controller('CategoriesCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('/categories').success(function (data) {
    $scope.categories = data;
});
}]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
    when('/categories', {
        templateUrl: 'views/cat.view.html',
        controller: 'CategoriesCtrl'
    })
}]);

希望这能帮助您

从您的plunker中，您可以看到您的templateUrl是错误的，它必须是指向.html文件的路径。

编辑：有问题的名称编辑->

您的控制器名称为"类别Ctrl"CatCtrl'只是名称将要包含在index.html 中的文件的

<div ng-controller="CategoriesCtrl">
    <div class="row">
        <div class="categories">
              Cats View
        </div>
    </div>
</div>

var app = angular.module('base', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/categories', {
            templateUrl: 'views/cat.view.html',
            controller: 'CategoriesCtrl'
        })
}]);
相关文章：