解決法のAngularjs依存性注入

Question

に適切な依存性注入を使用して、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']) 

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

の場合ルーティングの解決セクションを使用してコードを縮小したい場合は、配列スタイルの注釈を使用する必要があります。これを上記の例に含めました。