依赖注入在角度应用程序中发出工厂对象null？

Question

我正在尝试学习角度并且在将名为'courseService'的工厂类注入我的控制器CoursesController（coursesController.js）时遇到一些困难。它并不总是实例化。这就是我现在设置的方式：

(function () {

 var CoursesController = function ($scope, $location, $filter, $routeParams, courseService) {
 CoursesController.$inject = ['$rootScope', '$scope', '$routeParams', 'courseService'];

});

为了说明这个问题，我创建了一个plunker样本：

http://plnkr.co/edit/W9OmBs7w8RlV55EWngT1?p=preview

运行示例时，courseService会被实例化。我可以在chromeconsole中看到这个（来源，run.plnkr.co）

我点击“添加课程”按钮，这将带我进入courseEditController。当我点击查看课程时，我会回到coursesController，课程服务未定义。见下图。有趣的是当我在courses.html上点击CTRL + F5然后就可以了。我该如何解决这个问题？

Answer 1

在plunker示例中，我收到以下错误：

Error: [$injector:unpr] http://errors.angularjs.org/1.2.12/$injector/unpr?p0=courseFilterFilterProvider%20%3C-%20courseFilterFilter

未知提供者“courseFilter”

在文件“coursesController.js”中，以下代码

function filterCourses(filterText) {
        $scope.filteredCourses = $filter("courseFilter")($scope.courses, filterText);
        $scope.filteredCount = $scope.filteredCourses.length;
}

但是，“courseFilter”尚未定义为任何文件中的过滤器。 将其定义为

var courseFilter = function () {
    return function (input, filterText) {
       //filter code goes here
    };
};
angular.module('CoursesApp').filter('courseFilter', courseFilter);

这可以解决您的问题。