AngularJS依赖注入解决

一尘不染

AngularJS依赖注入解决

angularjs

我想使用适当的依赖项注入MyCtrl1来注入MyCtrl1.resolve对象的字段。我尝试了很多不同的尝试注入@MyCtrl1.resolve等失败的组合。

@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'])

阅读 235

2020-07-04

共1个答案

一尘不染

解析是路由的属性，而不是控制器的属性。控制器将注入在路由级别上定义的依赖项，而无需在控制器上指定解析属性。

以您的一个示例（转换为JavaScript）为例，您将像往常一样定义控制器，即：

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

然后是路线上的resolve属性：

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

如果您想使用路由的resolve部分来减少代码，则需要使用数组样式的注释-我已在上面的示例中添加了注释。

2020-07-04