wake-up-neo.net

Die Verwendung von resol in $ routeProvider verursacht "Unbekannter Anbieter ..."

Ich versuche, eine asynchrone http-Anfrage auszuführen, um einige Daten zu laden, bevor meine App geladen wird. Daher verwende ich eine Auflösung in $ routeProvider, die eine http-Anfrage in meinem MainController ist. Aus irgendeinem Grund bekomme ich immer Error: [$ injector: unpr] Unbekannter Anbieter: appDataProvider <- appData Wo AppData meine http-Anfrage ausführt. Ich verwende AngularJS v 1.2.5.

Hier ist der Code und zwei Methoden, die ich ausprobiert habe, die beide den gleichen Fehler ergeben:

Methode 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'
    });
});

Ich habe versucht, den Namen zu ändern, für den Fall, dass es sich um ein widersprüchliches System-reserviertes Keyword handelt, jedoch ohne Erfolg. Aus irgendeinem Grund wird appData nie erkannt

Methode # 2 Ich habe auch versucht es so zu ändern:

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

Das Ergebnis war jedoch genau das gleiche. Hat das etwas mit Winkel 1.2.5 zu tun?

Hier ist eine funktionierende Version von jemand anderem

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

Und hier ist der 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'});
  }]);
20
Georgi Angelov

Das Problem warNICHT, weil zuvor eine andere Version von AngularJS verwendet wurde.

Hier sind die Korrekturen mit dem Code, den ich oben habe.

In app.js müssen Sie den Controller als controller deklarieren: 'MainController' und NICHT als Controller: MainController, obwohl Sie var MainController = app.controller ('MainController', ....) haben.

Zweitens und Größtes war, dass ich in meinem index.html meinen Controller bereits so deklariert habe:

index.html

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

Dies verursachte den gesamten Fehler des unbekannten Providers. Offenbar wird Ihnen eckig nicht mitgeteilt, dass Sie den Controller bereits angegeben haben, den Sie für die Auflösung verwenden, und dass dies einen seltsamen Fehler verursacht, der nichts mit der Auflösung zu tun hat.

Ich hoffe, das hilft jemandem, der das gleiche Problem hat.

1
Georgi Angelov

Hier ist ein Beispiel für den Code, den ich in der Anwendung verwendet habe, an der ich gerade arbeite. Ich bin mir nicht sicher, ob er viel helfen wird, da er sich nicht viel von der bereits vorhandenen unterscheidet.

Routing

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

Controller

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

Nun, da ich darüber nachdenke, hatte ich bei der Entwicklung meiner Anwendung ein Problem und wusste nicht, warum ich meine Auflösungsfunktion "auflösen" nannte. Das gab mir ein Problem:

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

aber dies tat nicht:

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

Andere Möglichkeit

Die einzige andere Sache, die mir einfällt, ist, dass Sie promise vom Aufruf $http zurückgeben und dann versuchen, appData.data zu verwenden. Versuchen Sie, die Funktion .then oder eine der anderen Funktionen (.success, .error) zu verwenden, um die Funktion abzurufen Informationen aus dem Versprechen.

2
m.e.conroy

Bei winkligen 1x-Dokumentationen ist mir aufgefallen, dass SIE NICHT DEN BEHANDELTEN PARAMETER ALS ANGEMELDETE ABHÄNGIGKEIT FESTLEGEN

Also das:

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

ist falsch. Sie geben den aufgelösten Parameter nicht als Abhängigkeit in den Dokumenten an:

Um den Zugriff auf die aufgelösten Abhängigkeiten über die Vorlage zu erleichtern, ist die Auflösungskarte im Bereich der Route unter $ resolution (standardmäßig) oder unter einem benutzerdefinierten Namen verfügbar, der in der Eigenschaft resolAs (siehe unten) angegeben ist. Dies kann besonders nützlich sein, wenn Sie mit Komponenten als Routenvorlagen arbeiten.

Also mach einfach das stattdessen:

.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