angularjs - otherwise - El uso de resolver en $ routeProvider causa ''Proveedor desconocido...''

otherwise angularjs

Question

Estoy tratando de hacer una solicitud http asíncrona para cargar algunos datos antes de que se cargue mi aplicación y, por lo tanto, estoy utilizando una resolución en $ routeProvider que es una solicitud http en mi MainController. Por alguna razón, sigo recibiendo Error: [$ injector: unpr] Proveedor desconocido: appDataProvider <- appData donde appData es donde hago mi solicitud http. Estoy usando AngularJS v 1.2.5.

Aquí está el código y los dos métodos que probé que dan el mismo error:

Método 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''
    });
});

Intenté cambiar el nombre en caso de que fuera una palabra clave reservada del sistema, pero sin suerte. Por alguna razón, appData nunca es reconocido

Método # 2 También intenté cambiarlo así:

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

Sin embargo, el resultado fue exactamente el mismo. ¿Tiene esto algo que ver con angular 1.2.5?

Aquí hay una versión funcional de alguien más.

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

Y aquí está el código:

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

Answer 1

Aquí hay un ejemplo del código que he usado en la aplicación en la que estoy trabajando, no estoy seguro de que ayude mucho porque no es muy diferente a cómo lo tienes.

Enrutamiento

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

Controlador

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

Ahora que lo pienso, cuando estaba desarrollando mi aplicación tuve un problema y no estaba seguro de por qué cuando nombré mi función de resolución "resolver". Esto me dio un problema:

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

pero esto no lo hizo

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

Otra posibilidad

Lo único en lo que puedo pensar es que está devolviendo la promesa de la llamada $http y luego intenta usar appData.data Intente usar la función .then o una de las otras funciones ( .success , .error ) para Recupera la información de la promesa.

Answer 2

El problema NO se debió a que anteriormente se utilizara una versión diferente de AngularJS.

Aquí están las correcciones usando el código que tengo arriba.

En app.js, debe declarar el controlador como controlador: ''MainController'' y NO como controlador: MainController aunque tiene var MainController = app.controller (''MainController'', ...).

Lo segundo y más importante fue que en mi index.html declaré que mi controlador ya estaba así:

index.html

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

Esto estaba causando todo el error de proveedor desconocido. Aparentemente angular no le dirá que ya ha declarado el controlador que está usando para resolverlo y que eso causará un error extraño que no tiene nada que ver con la resolución.

Espero que esto ayude a alguien que pueda tener el mismo problema.

Answer 3

Una cosa que noté en documentos angulares 1x es que NO ESPECIFICAS EL PARÁMETRO RESUELTO COMO UNA DEPENDENCIA ANOTADA

Así que esto:

.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á Mal. No especifica el parámetro resuelto como una dependencia, en los documentos:

Para un acceso más fácil a las dependencias resueltas de la plantilla, el mapa de resolución estará disponible en el alcance de la ruta, bajo $ resolver (de forma predeterminada) o un nombre personalizado especificado por la propiedad resolverAs (ver más abajo). Esto puede ser particularmente útil cuando se trabaja con componentes como plantillas de ruta.

Así que haz esto en su lugar:

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