Angularjs:如何从解析routeProvider注入依赖项

Question

我在将路由中的解析参数注入控制器时遇到问题.我正在为对象设置解析值{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">

Answer 1

ngRoute 支持将已解析的变量注入控制器,这对于应用程序的横切关注非常有用,例如应用程序的身份验证或配置.

缺点是控制器只能通过可注入的这些参数进行实例化,这意味着您可以手动(使用$controller)实例化控制器,这几乎从不实例,或者ngRoute具有解决方案.使用这种控制器无法做到的是使用ng-controller或在注入参数不可用的任何其他位置实例化它.

此错误表示除了在路径上定义了控制器之外,还将控制器定义为ng-controller路径模板中的控制器.控制器的第二次实例化失败了.

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;
      });
    }
  }
]);