web-dev-qa-db-fra.com

L'utilisation de resolver dans $ routeProvider provoque "Fournisseur inconnu ..."

J'essaie de faire une demande http asynchrone pour charger des données avant le chargement de mon application et j'utilise donc une résolution dans $ routeProvider qui est une demande http dans mon MainController. Pour une raison quelconque, je continue à avoir Erreur: [$ injector: UNN] fournisseur inconnu: appDataProvider <- appData où appData est l'endroit où je fais ma demande http. J'utilise AngularJS v 1.2.5.

Voici le code et deux méthodes que j'ai essayées qui donnent la même erreur:

Méthode n ° 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'
    });
});

J'ai essayé de changer le nom au cas où il s'agirait d'un mot clé réservé au système en conflit, mais sans succès. Pour une raison quelconque, appData n'est jamais reconnu

Méthode n ° 2 J'ai aussi essayé de le changer comme suit:

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

Cependant, le résultat était exactement le même. Est-ce que cela a quelque chose à voir avec angular 1.2.5?

Voici une version de travail de quelqu'un d'autre

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

Et voici le code:

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

Le problème étaitPASen raison de l'utilisation antérieure d'une version différente d'AngularJS.

Voici les correctifs en utilisant le code que j'ai ci-dessus.

Dans app.js, vous devez déclarer le contrôleur en tant que controller: 'MainController' et NOT en tant que controller: MainController même si vous avez var MainController = app.controller ('MainController', ....).

La deuxième et plus importante chose est que, dans mon index.html, j'ai déjà déclaré mon contrôleur comme suit:

index.html

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

Cela causait toute l'erreur du fournisseur inconnu. Apparemment, angular ne vous dira pas que vous avez déjà déclaré le contrôleur que vous utilisez pour le résoudre et que cela provoquerait une erreur étrange qui n'aurait aucun rapport avec la résolution.

J'espère que cela aide quelqu'un qui peut avoir le même problème.

1
Georgi Angelov

Voici un exemple du code que j'ai utilisé dans l'application sur laquelle je travaille. Je ne suis pas sûr que cela aidera beaucoup, car ce n'est pas très différent de la façon dont vous l'avez déjà.

Routing

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

Manette

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

Maintenant que j'y réfléchis, lors du développement de mon application, j'avais un problème et je ne savais pas pourquoi quand j'ai nommé ma fonction de résolution «résoudre». Cela m'a donné un problème:

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

mais cela n'a pas:

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

Une autre possibilité

La seule autre chose à laquelle je peux penser est que vous renvoyez le promise de l'appel $http et essayez ensuite d'utiliser appData.data Essayez d'utiliser la fonction .then ou l'une des autres fonctions (.success, .error) informations de la promesse.

2
m.e.conroy

Une chose que j’ai remarquée dans les documents angulaires 1x est que VOUS NE SPÉCIFIEZ PAS LE PARAMÈTRE RÉSOLU COMME UNE DÉPENDANCE ANNOTÉE

Donc ça:

.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"
}

est faux. Vous ne spécifiez pas le paramètre résolu comme dépendance, dans la documentation:

Pour faciliter l'accès aux dépendances résolues à partir du modèle, la carte de résolution sera disponible dans l'étendue de la route, sous $ resol (par défaut) ou sous un nom personnalisé spécifié par la propriété resolAs (voir ci-dessous). Cela peut être particulièrement utile lorsque vous utilisez des composants en tant que modèles de route.

Donc, faites ceci à la place:

.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