解析函数没有被注入控制器[Angular JS]

时间:2016-03-29 12:26:06

标签: javascript angularjs dependency-injection controllers

angular
  .module('madkoffeeFrontendApp', [])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/articles.html',
        controller: 'MainCtrl',
        resolve: {
          articles: function(articleService,$q) {
          //  return articleService.getArticles();
            return 'boo';
          }
        }
      })
      .otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode(true);
  });

我的上述代码包含解决方案。

  angular.module('madkoffeeFrontendApp')
  .controller('MainCtrl', ['$scope',
    function($scope, articles) {
      console.log(articles);
  }]);

当我尝试在数组中注入文章时,如下所示,它会出错,但据我所知,这是注入解析函数的正确方法:

  angular.module('madkoffeeFrontendApp')
  .controller('MainCtrl', ['$scope','articles',
    function($scope, articles) {
      console.log(articles);
  }]);

我的文章解析功能没有被注入。我尝试只返回一个字符串(例如:' boo'),如图所示,测试文章依赖是否有效,并且它不会返回undefined。可能是什么原因?

1 个答案:

答案 0 :(得分:1)

这是一个用于演示解决消息的Plunker。正如您在示例中看到的那样,它与您发布的代码的结构相同,应该可以正常工作。

单击“关于”页面以查看解决方案消息。

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

代码:

var resolveTestApp = angular.module('resolveTestApp', ['ngRoute']);

    resolveTestApp.config(function($routeProvider) {
    $routeProvider

        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        .when('/about', {
            templateUrl : 'pages/about.html',
            controller  : 'aboutController',
            resolve: {
              resolveMessage: function() {
                return 'This is the resolve message';
              }
            }
        })

});

resolveTestApp.controller('mainController', function($scope) {
    $scope.message = 'Everyone come and see how good I look!';
});

resolveTestApp.controller('aboutController', ['$scope', 'resolveMessage', function($scope, resolveMessage) {
  $scope.message = resolveMessage;
}]
);

它可能是您正在使用的Angular版本,或者当您缩小代码时出现问题。