Angularjs依赖注入的决心

问题描述

我想用在 MyCtrl1 适当的依赖注入注入 MyCtrl1.resolve 对象的字段。我试过试图注入 @ MyCtrl1.resolve 等，没有运气的许多不同的组合。

  @ MyCtrl1 =（$范围，$ HTTP，蝙蝠侠，标题） -  GT;
  $ scope.batman = batman.data
  $ scope.title = title.data@ MyCtrl1.resolve = {
 蝙蝠侠：（$ HTTP） -  GT;
   $ http.get（'batman.json'）
 标题：（$ HTTP） -  GT;
   $ http.get（'title.json'）
}
#@MyCtrl1.$inject ='$范围，$ HTTP']  - 因为不知道如何注入决心领域注释掉 角
.module（'应用'，[]）
的.config（['$ routeProvider'，'$ locationProvider'，（$ routeProvider，$ locationProvider） -  GT;
  $ locationProvider.html5Mode（真）  $ routeProvider.when（'/'，{templateUrl：'的index.html'，控制器：MyCtrl1，解析：MyCtrl1.resolve}）
  $ routeProvider.otherwise（{redirectTo：'/'}）
]）angular.bootstrap（文件，['应用']）
 

解决方案

解决是一个路由的属性，而不是一个控制器。控制器将与上一个路线级别上定义的依赖被注入，没有必要在控制器上指定解析属性

考虑您的例子之一（转换为JavaScript），你可以定义你的控制器一如既往，那就是：

  MyCtrl1 =功能（$范围，$ HTTP，蝙蝠侠，标题）{
  $ scope.batman = batman.data;
  $ scope.title = title.data;
}
 

，然后路线上的resolve属性：

  angular.module（应用，[]）。配置（['$ routeProvider'，'$ locationProvider'，函数（$ routeProvider，$ locationProvider）{
  $ locationProvider.html5Mode（真）  $ routeProvider.when（'/'，{templateUrl：'的index.html'，控制器：MyCtrl1，解析：{
    蝙蝠侠：['$ HTTP'，函数（$ HTTP）{
      返回$ http.get（..）。然后（功能（响应）{
         返回response.data;
      }）;
    }]，
    标题：['$ HTTP'，函数（$ HTTP）{
      如上返回//
    }]
  }}）;
  $ routeProvider.otherwise（{redirectTo：'/'}）;
}]）;
 

如果你想使用的路由，你需要使用数组风格的标注的决心部分再缩小code - 我在上面的例子中包括在本

I would like to use proper dependency injection in MyCtrl1to inject the fields of the MyCtrl1.resolve object. I've tried many different combinations of attempting to inject @MyCtrl1.resolve etc. with no luck.

@MyCtrl1 = ($scope, $http, batman, title) ->
  $scope.batman = batman.data
  $scope.title = title.data

@MyCtrl1.resolve = {
 batman: ($http) ->
   $http.get('batman.json')
 title: ($http) ->
   $http.get('title.json')
}
#@MyCtrl1.$inject = ['$scope', '$http'] -- commented out because not sure how to inject resolve fields

 angular
.module( 'app', [])
.config( ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider)->
  $locationProvider.html5Mode(true)

  $routeProvider.when('/', {templateUrl: 'index.html', controller: MyCtrl1, resolve: MyCtrl1.resolve})
  $routeProvider.otherwise({redirectTo: '/'})
])

angular.bootstrap(document,['app'])

解决方案

Resolve is a property of a route and not a controller. Controllers would be injected with dependencies defined on a route level, there is no need to specify resolve properties on a controller.

Taking one of your examples (transformed to JavaScript), you would define your controller as always, that is:

MyCtrl1 = function($scope, $http, batman, title) {
  $scope.batman = batman.data;
  $scope.title = title.data;
}

and then the resolve property on a route:

angular.module('app', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true)

  $routeProvider.when('/',{templateUrl: 'index.html', controller: MyCtrl1, resolve: {
    batman: ['$http', function($http) {
      return $http.get(..).then(function(response){
         return response.data;
      });
    }],
    title: ['$http', function($http) {
      return //as above
    }]
  }});
  $routeProvider.otherwise({redirectTo: '/'});
}]);

If you want to minify the code using resolve section of routing you need to use array-style annotations - I've included this in the example above.

这篇关于Angularjs依赖注入的决心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！