Angularjs：如何从resolve routeProvider注入依赖关系 [英] Angularjs: How to inject dependency from resolve routeProvider

问题描述

我将路由中的解析参数注入到控制器中有问题。我将解析值设置为一个对象 {name：'Banner'，slug：'banner'} ，但是我收到错误。

I have a problem injecting resolve parameters from the routing into the controller. I'm setting the resolve value to an object {name: 'Banner', slug: 'banner'}, but I get an error.

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">

推荐答案

ngRoute 支持向控制器注入已解析的变量，这对应用程序的交叉关注很有用，例如应用程序的身份验证或配置。

ngRoute supports injection of resolved variables to the controller, which is useful for cross-cutting concerns of the app, like authentication or configuration of the app.

缺点是控制器只能仅使用可注入的参数实例化，这意味着您可以手动实例化控制器（使用 $ controller ），几乎不会这样，或者与$ code> ngRoute 一起解决。您无法使用此类控制器将其实例化为 ng-controller 或其他注入参数不可用的位置。

The downside is that the controller can only be instantiated with these parameters available to be injected, which means that either you instantiate your controller manually (with $controller), which almost never the case, or with ngRoute with resolve. What you cannot do with such a controller is instantiate it with ng-controller or in any other location where the injected parameters are not available.

此错误表示除了在路由上定义了控制器之外，您还将控制器定义为路由模板中的 ng-controller 。控制器的第二个实例是什么失败。

This error indicates that in addition to having defined the controller on the route, you also have the controller defined as ng-controller in the template of the route. This second instantiation of the controller is what fails.

这篇关于Angularjs：如何从resolve routeProvider注入依赖关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！