AngularJS:在控制器内部使用工厂

时间:2015-07-12 20:24:59

标签: javascript angularjs dependency-injection angularjs-controller angularjs-factory

这是我第一次尝试使用Angularjs,我正在尝试创建一个服务并在控制器中使用它:

var appTest = angular.module("appTest", ["ngRoute"]);
var appTestControllers = angular.module('appTestControllers', []);

appTest.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {

        $routeProvider.
            when('/', {
                templateUrl: 'partials/home.html',
                controller: 'HomeCtrl'
            });

            $locationProvider.html5Mode(false);
    }
]);

appTest.factory("booksApi", function($http){

    var _getBooks = function() {
        return $http.get('http://localhost/editora-voo/website/books.json');
    };

    return{
        getBooks: _getBooks
    };

});


appTest.controller('HomeCtrl', ['$scope', '$http', function($scope, $http, booksApi) {

    booksApi.getBooks().success(function(data) {
        $scope.books = data;
    });
}]);

但它返回一个错误:无法读取未定义的属性'getBooks'

1 个答案:

答案 0 :(得分:3)

您错过了在控制器依赖关系数组中添加booksApi depnedency,您应该先添加它,然后在控制器函数内使用它。

<强>控制器

appTest.controller('HomeCtrl', ['$scope', '$http', 'booksApi', //<--missed dependency here
  function($scope, $http, booksApi) {
    booksApi.getBooks().then(function(response) {
        $scope.books = response.data;
    });
}]);

Plunkr Here