web-dev-qa-db-ja.com

$ routeProviderでresolveを使用すると、「不明なプロバイダー...」が発生します

アプリが読み込まれる前に非同期のhttpリクエストを実行してデータを読み込むため、MainControllerのhttpリクエストである$ routeProviderのresolveを使用しています。何らかの理由で、エラーが発生し続けます：[$ injector：unpr]不明なプロバイダー：appDataProvider <-appDataここで、appDataはHTTPリクエストを実行する場所です。 AngularJS v 1.2.5を使用しています。

これが私が試したコードと2つの方法で、どちらも同じエラーが発生します。

方法＃1

MainController.js

var MainController = ['$scope','$location','appData',
    function($scope, $location, appData){
       console.log(appData.data);
    }
];

MainController.loadData = {
    appData: function($http, $location, MainFactory){
        var aid = MainFactory.extractAid($location);
        return $http({method: 'GET', url: URL_CONST + aid});
    }
};

app.js

var app = angular.module('HAY', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      redirectTo: '/pages/alerts'
    })
    .when('/pages/:pageName', {
        templateUrl: function(params) {
            return 'views/pages/' + params.pageName + '.html';
        },
        controller: MainController,
        resolve: MainController.loadData
    })
    .otherwise({
        redirectTo: '/pages/alerts'
    });
});

システムで予約されているキーワードと競合する場合に備えて、名前を変更してみましたが、うまくいきませんでした。何らかの理由で、appDataが認識されない

方法＃2私も次のように変更してみました：

app.js

var app = angular.module('HEY', ['ngRoute']);

app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      redirectTo: '/pages/alerts'
    })
    .when('/pages/:pageName', {
        templateUrl: function(params) {
            return 'views/pages/' + params.pageName + '.html';
        },
        controller: MainController,
        resolve: {
                appData: ['$http', '$location','MainFactory', function($http, $location, MainFactory) {
                    var aid = MainFactory.extractAid($location);
                    return $http({method: 'GET', url: URL_CONST + aid});
                }]
        }
    })
    .otherwise({
        redirectTo: '/pages/alerts'
    });
});

MainController.js

var MainController = ['$scope','$location','appData',
    function($scope, $location, appData){
        console.log(resolvedData);
    }
];

しかし、結果はまったく同じでした。これはangular 1.2.5と関係がありますか？

これは他の誰かからの作業バージョンです

http://mhevery.github.io/angular-phonecat/app/#/phones

そしてここにコードがあります：

function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {
  phones: function(Phone) {
    return Phone.query();
  },
  delay: function($q, $defer) {
    var delay = $q.defer();
    $defer(delay.resolve, 1000);
    return delay.promise;
  }
}

angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl, resolve: PhoneListCtrl.resolve}).
        otherwise({redirectTo: '/phones'});
  }]);
angularjscontrollerangularjs-routingroute-provider
20
Georgi Angelov

以前はAngularJSの異なるバージョンを使用していたため、問題は[〜＃〜] not [〜＃〜]でした。

上記のコードを使用した修正を以下に示します。

App.jsでは、コントローラをcontroller： 'MainController'として宣言し、var MainController = app.controller（ 'MainController'、....） 。

2番目に大きなことは、私のindex.htmlで、コントローラーを次のように宣言したことです。

index.html

body ng-app = "HEY" controller = "MainController"/body

これは不明なプロバイダーエラー全体を引き起こしていました。どうやらangularは、解決に使用しているコントローラーがすでに宣言されていること、および何もしない奇妙なエラーが発生することを教えてくれません。解決を行います。

これが同じ問題を抱えている人に役立つことを願っています。

1
Georgi Angelov

これは、私が取り組んでいるアプリケーションで使用したコードの例です。すでに持っている方法とそれほど変わらないので、それが大いに役立つかどうかはわかりません。

ルーティング

.when('/view/proposal/:id',{
    controller : 'viewProposalCtrl',
    templateURL : 'tmpls/get/proposal/view',
    resolve : viewProposalCtrl.resolveViewProposal
})

コントローラ

var viewProposalCtrl = angular.module('proposal.controllers')
    .controller('viewProposalCtrl',['$scope','contacts','details','rationale',
        function($scope,contacts,details,rationale){
            $scope.contacts = contacts;
            $scope.details = details;
            $scope.rationale = rationale;

            // [ REST OF CONTROLLER CODE ]
        });


// proposalSrv is a factory service

viewProposalCtrl.resolveViewProposal = {
    contacts : ['$route','proposalSrv',function($route,proposalSrv){
        return proposalSrv.get('Contacts',$route.current.params.id)
           .then(function(data){
               return data.data.contacts;
           },function(){
               return [];
           });
    }],
    details : ['$route','proposalSrv',function($route,proposalSrv){
        return proposalSrv.get('Details',$route.current.params.id)
            .then(function(data){
                return data.data.details;
            },function(){
                return {};
            });
    }],
    rationale : ['$route','proposalSrv',function($route,proposalSrv){
        return proposalSrv.get('Rationale',$route.current.params.id)
            .then(function(data){
                return data.data.rationale;
            },function(){
                return {};
            ]
    }]
};

今考えてみると、アプリケーションを開発しているときに問題が発生したのですが、resolve関数に「resolve」という名前を付けたのはなぜでしょうか。これは私に問題を与えました：

.when('/path',{
     // stuff here
     resolve : myCtrlr.resolve
})

しかし、これはしませんでした：

.when('/path',{
     //stuff here
     resolve : myCtrlr.myResolveFn
})

別の可能性

他に考えられる唯一のことは、$http呼び出しからpromiseを返し、appData.dataを使用しようとしていることです。.thenを使用してみてください関数または他の関数の1つ（.success、.error）を使用して、promiseから情報を取得します。

2
m.e.conroy

angular 1x docsで気づいたことの1つは解決されたパラメータを注釈付きの依存関係として指定しないでください

したがって、この：

.when('/somewhere', {
  template: '<some-component></some-component>',
  resolve: {
    resolvedFromRouter: () => someService.fetch()
  }
})

export default [
  '$scope',
  'someService',
  'resolvedFromRouter'
  Controller
]

function Controller($scope, someService, resolvedFromRouter) {
  // <= unknown provider "resolvedFromRouter"
}

間違っている。ドキュメントでは、解決されたパラメーターを依存関係として指定していません。

テンプレートから解決された依存関係に簡単にアクセスできるように、ルートのスコープの$ resolve（デフォルト）またはresolveAsプロパティで指定されたカスタム名（以下を参照）で解決マップを使用できます。これは、コンポーネントをルートテンプレートとして使用する場合に特に役立ちます。

代わりにこれを実行してください：

.when('/somewhere', {
  template: '<some-component></some-component>',
  resolve: {
    resolvedFromRouter: () => someService.fetch()
  }
})

export default [
  '$scope',
  'someService',
  Controller
]

function Controller($scope, someService) {
  $scope.$resolve.resolvedFromRouter; // <= injected here
}
0
Daniel Lizik