AngularJS:当注入控制器时,工厂总是未定义的

AngularJS:当注入控制器时,工厂总是未定义的,angularjs,dependency-injection,controller,factory,Angularjs,Dependency Injection,Controller,Factory,我正在尝试一个地址簿应用程序的简单示例。我有一个工厂,它返回一个记录数组,并使用列表控制器在列表视图中显示 angular.module('abModule', ['ngRoute']) .factory('AddressBook', function() { var address_book = [ { "id": 1, "first_name": "John", "last_name": "Doe

我正在尝试一个地址簿应用程序的简单示例。我有一个工厂,它返回一个记录数组,并使用列表控制器在列表视图中显示

angular.module('abModule', ['ngRoute'])
.factory('AddressBook', function() {
    var address_book = [
        {
            "id": 1,
            "first_name": "John",
            "last_name": "Doe",
            "age": 29
        },
        {
            "id": 2,
            "first_name": "Anna",
            "last_name": " Smith",
            "age": 24
        },
        {
            "id": 3,
            "first_name": "Peter",
            "last_name": " Jones",
            "age": 39
        }
    ];
    alert('inside factory function');
    return {
        get: function() {
            return address_book
        }
    };
})
.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        controller:'list_controller',
        templateUrl:'list.html'
    })
    .when('/add', {
        controller:'add_controller',
        templateUrl:'add.html'
    })
    .otherwise({
        redirectTo:'/'
    });          
})
.controller('list_controller',['$scope', function ($scope, AddressBook) {
    $scope.address_book = AddressBook;
}])
.controller('add_controller',['$scope', function ($scope,AddressBook) {
    //$scope.entry = {};
    $scope.save = function() {
        AddressBook.set(
            {
                "id": $scope.address_book.length +1,
                "first_name":$scope.entry.firt_name,
                "last_name":$scope.entry.last_name,
                "age":$scope.entry.age
            }
        );
    };
}]);

此处“地址簿”在“列表\控制器”中始终未定义。知道我哪里出错了吗?非常感谢您的帮助。

您没有为您的DI注释
通讯簿

.controller('list_controller',['$scope', function ($scope, AddressBook) {
    $scope.address_book = AddressBook;
}])
应该是:

.controller('list_controller',['$scope', 'AddressBook', function ($scope, AddressBook) {
    $scope.address_book = AddressBook;
}])

另一个控制器也是如此。

另一种方法是使用依赖项的$inject声明,其使用顺序与函数的参数如下所示的顺序相同。它有助于在代码缩小后注入正确的服务

var App = angular.module('myApp',[]);
App.controller('myCtrl',myCtrl);

//inject your dependencies;
myCtrl.$inject = ["$scope", "AddressBook","anotherService"] // 

function myCtrl($scope,AddressBook,anotherService){
.....
}

注意:缩小后,服务名称将被重命名,并且可能会破坏您的应用程序另一个导致工厂变量中始终未定义的可能原因是声明的依赖项与函数参数列表的映射不正确。例如:

var loginCtrl = loginModule.controller("loginController", 
    ['$scope', '$window', 'notificationMessage',
    function ($scope, $window, serverDataConvertor, notificationMessage) {

    // notificationMessage is undefined because serverDataConvertor factory is not a declared dependency

    // controller logic comes here
}

不幸的是,Angular没有发出任何警告或错误,这可能会非常令人沮丧,尤其是当依赖项列表很大时。

您的通讯簿没有设置功能这帮助我找到了问题所在。我的$inject看起来像是
PostsController。$inject=['postsService',logger]其中未定义“记录器”。排除引号也会抛出ReferenceError。谢谢。只是在挫折中浪费了20分钟,这救了我。@HenryLin-是的,我也遇到了同样的情况,我想提供这个答案。幸运的是,依赖项声明在后续版本(Angular 2、Angular 4)中得到了改进。他们用的是AngularJS。然而,他们没有任何升级计划。我意识到这可能是个问题,几年后ehen AngularJS失去了支持。也许我可以说服他们,现在比以后好!