Angularjs: 如何从resolve routeProvider注入依赖项

Question

我在将路由中的resolve参数注入控制器时遇到了问题。我将resolve值设置为一个对象{name: 'Banner', slug: 'banner'}，但是出现了错误。

App.js

var app = angular.module('CMS', ['fields', 'ngRoute']);

app.controller('ModuleController', ['$http', 'properties',
  function($http, properties) {
    var module = this;
    module.properties = properties;

    if (module.properties.slug.length) {
      $http.get(module.properties.slug + '.php').success(function(data) {
        module.list = data;
      });
    }
  }
]);

app.controller('HomeController', function() {});

app.config(function($routeProvider) {
  $routeProvider
  // route for the banner page
  .when('/banner1', {
    templateUrl: 'banner1.php',
    controller: 'ModuleController',
    resolve: {
      properties: function() {
        return { name: 'Banner', slug: 'banner' };
      }
    }
  })
  .when('/home', {
    templateUrl: 'home.php',
    controller: 'HomeController'
  })
  .otherwise({
    redirectTo: '/home'
  });
});

错误：

 Error: [$injector:unpr] http://errors.angularjs.org/1.3.14/$injector/unpr?p0=propertiesProvider%20%3C-%20properties%20%3C-%20ModuleController
    at Error (native)
    at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:6:417
    at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:38:7
    at Object.d [as get] (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:13)
    at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:38:81
    at d (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:13)
    at Object.e [as invoke] (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:36:283)
    at $get.w.instance (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:75:451)
    at http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:58:476
    at s (http://modelo2.desenvolvimento.com/adm/js/angular/angular.min.js:7:408) <div ng-view="" class="ng-scope">

- Nícolas Amarante

---

你知道吗，当你使用非压缩版本的Angular时，你会得到更详细的错误信息吗？下次试试看。 - New Dev

我猜测这是因为你在/banner1.php中使用了ng-controller="ModuleController"。 - New Dev

这是在banner1.php上的ng-controller。感谢@NewDev！ - Nícolas Amarante

我更全面地回答了它，作为一个适当的答案。 - New Dev

如何解决？我有同样的问题，在“解决”中我有数据，但在控制器中没有。 - Ahmed

Answer 1

ngRoute支持将已解析的变量注入到控制器中，这对于应用程序的交叉关注点（如身份验证或应用程序配置）非常有用。

缺点是控制器只能在这些可注入参数可用的情况下进行实例化，这意味着您要么手动实例化控制器（使用$controller），这几乎从不发生，要么使用ngRoute与resolve一起实例化。使用这种控制器时，无法使用ng-controller或任何其他位置来实例化它，这些位置没有可注入参数。

此错误表示除了在路由上定义控制器外，您还在路由模板中将控制器定义为ng-controller。这第二次实例化控制器会失败。

- New Dev

---

谢谢！我在其他地方找不到解释。 - Luis Artola

我都快疯了，错误信息应该更加详细解释。 - gjspaho

Answer 2

您可以使用$route服务在控制器中获取解析后的数据。

请在这里查看演示http://plnkr.co/edit/2oID3G0QStTOGEPPLQ3h?p=preview 因此，在您的示例中，它将如下所示：

.when('/banner1', {
    templateUrl: 'banner1.php',
    controller: 'ModuleController',
    resolve: {
      properties: function() {
        return { name: 'Banner', slug: 'banner' };
      }
    }
  })

在控制器中：

app.controller('ModuleController', ['$http', '$route',
  function($http, $route) {
    var module = this;

   //get resolved properties
    module.properties = $route.current.locals.properties;

    if (module.properties.slug.length) {
      $http.get(module.properties.slug + '.php').success(function(data) {
        module.list = data;
      });
    }
  }
]);

- sylwester

Answer 3

resolve : {
    properties : ['projects', 'user', function (projects, user) {
        return user.getData().then(function () {
            return projects.getData();
        });
    }]
}

- Сергей Савин

---

添加一些说明 - HaveNoDisplayName

请提供更多细节来回答问题，因为此帖子被认为是低质量的帖子。仅提供代码和“试试这个”答案是不鼓励的，因为它们没有提供任何可搜索的内容以及人们为什么应该“试试这个”。 - Paritosh

Answer 4

使用ng-route进行依赖注入 尝试这样做;

var myApp = angular.module("myApp", ["ngRoute", "localytics.directives"]);

myApp.config(['$routeProvider',function ($routeProvider) {

    $routeProvider
        .when("/", {
            templateUrl: "/TimeLine.html",
            controller: "MainCtrl"
        })    
        .when("/AddOrEditOccasion", {
            templateUrl: "/Html/GiftWhiz/AddOrEditOccasion.html",
            controller: "AddOrEditOccasionCtrl"
        })
        .when("/OccasionStart", {
            templateUrl: "/OccasionStart.html",
            controller: "OccasionStartCtrl"
        })        
}]);


myApp.controller("MainCtrl", ['$scope', '$http', '$location', function ($scope, $http, $location) {

   //your codes

}]);

- Özgür

---

感谢您提供这段代码片段，它可能会在短期内提供一些有限的帮助。通过展示为什么这是一个好的解决方案，适当的解释将极大地提高其长期价值，并使其对未来具有类似问题的读者更有用。请编辑您的答案以添加一些解释，包括您所做的假设。 - Toby Speight