解析未在控制器 [Angular JS] 中注入的函数

Resolve function not being injected in controller [Angular JS]

本文关键字：注入 函数 JS Angular 控制器      更新时间：2023-09-26
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"(，如图所示以测试文章依赖项是否有效，但它没有，即它返回未定义。可能是什么原因？

这是一个 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 版本，也可能是您缩小代码时的问题。

相关文章：