【问题标题】:Argument is not a function - AngularJS undefined参数不是函数 - AngularJS 未定义
【发布时间】:2016-03-24 14:53:38
【问题描述】:

我是 Angular 的新手,我目前正在尝试构建一些非常简单的东西,但是我遇到了一个问题,我被卡住了,我不明白为什么会这样。

我在 Webstorm 中有一个使用 Express 和 npm 的小项目。 Angular 作为依赖项添加,版本 1.5.3。我也使用 Jade 作为模板语言。这是我在 Plunker 中所拥有的 http://plnkr.co/edit/qCR420hBgnlcUisSOwgw?p=preview

下面还有:

doctype html
html(lang='en', ng-app='courses')
head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1, user-scalable=no')

    script(src='/node_modules/angular/angular.js')
    script(src='/node_modules/angular-resource/angular-resource.js')
    script(src='/node_modules/angular-route/angular-route.js')
    script(src='/javascripts/app.js')
    script(src='/javascripts/controllers.js')
    script(src='/javascripts/services.js')

    title= title
    link(rel='stylesheet', ref='//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
body(ng-controller='CoursesListController')
    nav.navbar.navbar-inverse.navbar-fixed-top(role='navigation')
        div.navbar-header
            a.navbar-brand(href='#/courses')=title
    div.container
        div(ng-view)

我的 app.js:

angular.module('courses', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/courses', { templateUrl: 'partials/list.html', controller: CoursesListController })
        .when('/course/:courseId', { templateUrl: 'partials/item.html', controller: CourseItemController })
        .when('/new', { templateUrl: 'partials/new.html', controller: CourseCreateController })
        .otherwise({ redirectTo: '/courses' });
}]);

我的控制器.js

function CoursesListController($scope, $routeParams, Course) {
    $scope.courses = Courses.query();
}

还有我的 services.js:

angular.module('courseServices', ['ngResource']).factory('Course', function 
($resource) {
    return $resource('courses/:courseId', {}, {
        query: {method: 'GET', params: {courseId: 'courses'}, isArray: true}
    })
});

我得到的错误是:

angular.js:13294 错误:[ng:areq] 参数“CoursesListController”不是函数,未定义

我不知道为什么。此外,也许一些提示会很有用,您认为这样的结构/分离是否有意义?

【问题讨论】:

  • 您是否忘记将控制器注册到您的模块?
  • 这是骗子使用.controller('myCtrl', ['$scope', function($scope) {...吗?
  • 不,不是这样,我修正了错字。
  • 我看到了CourseListController 的函数,但是您实际上在哪里将其注册为模块?另外,这个:angular.module('courseServices', ['ngResource']) 将创建一个新的应用程序模块,使courseServicescourses 中不可用,除非你注入它。
  • 当然,修正控制器中的错字,并将 app.js 放在脚本加载顺序的底部。

标签: javascript angularjs


【解决方案1】:

这是一个加载顺序问题。

基本上你首先加载app.js,它试图注册尚未加载的函数。

要解决此问题,只需将 script(src='/javascripts/app.js') 移动到其他包含下方。

编辑:或者,有一大堆替代方案可以防止此类问题,如 RequireJS、Webpack、Grunt 等。

【讨论】:

  • 这个加载顺序问题是否特定于 OP 的框架实现?因为我的 .js 脚本引用总是按 app.js、services.js、controllers.js 等排序,这不是问题。我认为,也许这里还发生了其他事情,例如未能将courseServices 注入courses 以及未能将CoursesListController 注册为控制器模块(这可能是实际导致由OP)。
  • 如果我没记错的话,不需要在模块上注册控制器,你也可以将控制器定义为命名或匿名函数。
  • 嗯,这是一个 JSFiddle 说明问题。您是说不需要.controller('MyController', MyController)(在 JSFiddle 中)?因为如果您留下评论,则 JSFiddle 示例不起作用,但如果您取消注释它则有效。我错过了什么?
  • 在您的小提琴中,您尝试按名称引用它。如果你这样做,你需要在控制器上注册它。在 OP 的示例中,他在路由器配置中引用了函数本身
  • @Aides 我放弃并删除了我的答案,我看到了你的编辑,这对你来说绝对是 +1 :)
猜你喜欢
  • 2023-04-08
  • 2015-04-01
  • 2013-10-24
  • 2016-11-12
  • 2014-12-03
  • 1970-01-01
  • 1970-01-01
  • 2015-09-02
  • 2015-10-20
相关资源
最近更新 更多