ejemplos - angularjs pdf
angular js proveedor desconocido (29)
Estoy tratando de "personalizar" el ejemplo de mongolab para que se ajuste a mi propia API de REST. Ahora me encuentro con este error y no estoy seguro de lo que estoy haciendo mal:
Error: Unknown provider: ProductProvider <- Product
at Error (unknown source)
at http://localhost:3000/js/vendor/angular.min.js:28:395
at Object.c [as get] (http://localhost:3000/js/vendor/angular.min.js:26:180)
at http://localhost:3000/js/vendor/angular.min.js:28:476
at c (http://localhost:3000/js/vendor/angular.min.js:26:180)
at d (http://localhost:3000/js/vendor/angular.min.js:26:314)
Este es mi controlador:
function ProductListCtrl($scope, Product) {
$scope.products = Product.query();
}
y este es el modulo:
angular.module(''productServices'', [''ngResource'']).
factory(''Product'', [''$resource'', function($resource){
var Product = $resource(''/api/products/:id'', { }, {
update: { method: ''PUT'' }
});
return Product;
}]);
Acabo de tener un problema similar. El error decía lo mismo que en la pregunta, intentaba resolverlo con la respuesta de pkozlowski.opensource y Ben G, que son respuestas correctas y buenas.
Mi problema fue realmente diferente con el mismo error:
en mi código HTML tuve la inicialización así ...
<html ng-app>
Un poco más abajo traté de hacer algo como esto:
<div id="cartView" ng-app="myApp" ng-controller="CartCtrl">
Me deshice de la primera ... luego funcionó ... obviamente no puedes inicializar ng-app dos o más veces. lo suficientemente justo.
Totalmente me olvidé de la primera "aplicación ng" y me frustraron por completo. Quizás esto ayude a alguien algún día ...
Al final del archivo JS para cerrar la función de fábrica que tenía
});
en lugar de
}());
Aquí hay otro escenario posible en el que puede ver este error:
Si usa Sublime Text 2 y el complemento angular, generará stubs como este
angular.module(''utils'', [])
.factory(''utilFactory'', [''''
function() {
return {
}
}
]);
observe el '''' vacío '''' como el primer elemento de la matriz después de la cadena ''utilFactory''. Si no tiene ninguna dependencia, elimínela para que sea así:
angular.module(''utils'', [])
.factory(''utilFactory'', [
function() {
return {
}
}
]);
Asegúrese de que su app.js principal incluya los servicios de los que depende. Por ejemplo:
/* App Module */
angular.module(''myApp'', [''productServices'']).
.....
Como esta pregunta es el resultado principal de Google, agregaré otra cosa posible a la lista.
Si el módulo que está utilizando tiene un error en el contenedor de inyección de dependencia, proporcionará el mismo resultado. Por ejemplo, copiar y pegar módulos de Internet puede depender de underscore.js e intentar inyectar con ''_'' en el contenedor di. Si el subrayado no existe en los proveedores de dependencia de su proyecto, cuando el controlador intente hacer referencia a la fábrica de su módulo, obtendrá un "proveedor desconocido" para su fábrica en el registro de la consola del navegador.
Dado que este es el resultado superior para "angularjs unknown provider" en Google en este momento, aquí hay otro problema. Al realizar pruebas unitarias con Jasmine, asegúrese de tener esta declaración en su función beforeEach() :
module(''moduleName'');
De lo contrario, obtendrá el mismo error en sus pruebas.
Después de manejar este error también, puedo apoyar esta lista de respuestas con mi propio caso.
Es al mismo tiempo simple y tonto (tal vez no estúpido para principiantes como yo, pero sí para expertos), la referencia del script a angular.min.js debe ser la primera en su lista de scripts en la página html.
Esto funciona:
<script src="Scripts/angular.min.js"></script>
<script src="MyScripts/MyCartController.js"></script>
<script src="MyScripts/MyShoppingModule.js"></script>
Esto no:
<script src="MyScripts/MyCartController.js"></script>
<script src="MyScripts/MyShoppingModule.js"></script>
<script src="Scripts/angular.min.js"></script>
Aviso sobre angular.min.js.
Espero que ayude a alguien !! :)
El problema para mí fue que había algunos nuevos archivos javascript que creé que hacían referencia al servicio, pero Chrome solo vio la versión anterior. Un CTRL + F5 lo arregló para mí.
En mi aplicación Ruby on Rails, hice lo siguiente:
rake assets:precompile
Esto se hizo en el entorno de "desarrollo", que había minificado Angular.js y lo había incluido en el archivo /public/assets/application.js .
Eliminar los archivos /public/assets/* resolvió el problema para mí.
En mi caso, he definido un nuevo proveedor, por ejemplo, xyz
angular.module(''test'')
.provider(''xyz'', function () {
....
});
Cuando tenía que configurar el proveedor anterior, debe inyectarlo con Cadena de Provider xyzProvider -> xyz convierte en xyzProvider .
Ex:
angular.module(''App'', [''test''])
.config(function (xyzProvider) {
// do something with xyzProvider....
});
Si se inyecta el proveedor anterior sin la cadena ''Proveedor'', obtendrá el error similar en OP.
En mi caso, utilicé una función anónima como envoltorio para el módulo angular, así:
(function () {
var app = angular.module(''myModule'', []);
...
})();
Después de cerrar el paréntesis, olvidé llamar a la función anónima abriendo y cerrando los paréntesis nuevamente como se indica arriba.
Esto me llevó demasiado tiempo para localizarlo. Asegúrese de minimizar su controlador dentro de su directiva.
.directive(''my_directive'', [''injected_item'', function (injected_item){
return {
controller: [''DO_IT_HERE_TOO'', function(DO_IT_HERE_TOO){
}]
}
}
Espero que ayude
Hoy me enfrenté a un problema similar y los problemas fueron realmente muy pequeños
app.directive(''removeFriend'', function($scope) {
return {
restrict: ''E'',
templateUrl: ''removeFriend.html'',
controller: function($scope) {
$scope.removing = false;
$scope.startRemove = function() {
$scope.removing = true;
}
$scope.cancelRemove = function() {
$scope.removing = false;
}
$scope.removeFriend = function(friend) {
var idx = $scope.user.friends.indexOf(friend)
if (idx > -1) {
$scope.user.friends.splice(idx, 1);
}
}
}
}
});
Si observa el bloque anterior, en la primera línea observará que he inyectado $ scope por error, lo cual es incorrecto. Eliminé esa dependencia no deseada para resolver el problema.
app.directive(''removeFriend'', function() {
return {
restrict: ''E'',
templateUrl: ''removeFriend.html'',
controller: function($scope) {
$scope.removing = false;
$scope.startRemove = function() {
$scope.removing = true;
}
$scope.cancelRemove = function() {
$scope.removing = false;
}
$scope.removeFriend = function(friend) {
var idx = $scope.user.friends.indexOf(friend)
if (idx > -1) {
$scope.user.friends.splice(idx, 1);
}
}
}
}
});
La respuesta de pkozlowski es correcta, pero por si a alguien le pasa esto, tuve el mismo error después de crear el mismo módulo dos veces por error; la segunda definición anulaba al proveedor del primero:
Creé el módulo haciendo
angular.module(''MyService''...
).factory(...);
luego un poco más abajo en el mismo archivo:
angular.module(''MyService''...
).value(''version'',''0.1'');
La forma correcta de hacer esto es:
angular.module(''MyService''...
).factory(...).value(''version'',''0.1'');
Me estaba olvidando de inyectar el archivo que contenía mis servicios por completo. Recuerde hacer esto al inicializar su módulo de aplicación:
angular.module(''myApp'', [''myApp.services'', ... ]);
Mi caso era tipeo poco fiable
myApp.factory(''Notify'',funtion(){
la función tiene una ''c''!
Mi escenario puede ser un poco oscuro, pero puede causar el mismo error y alguien puede experimentarlo, así que:
Al usar el servicio $ controller para instanciar un nuevo controlador (que esperaba ''$ scope'' como primer argumento inyectado) estaba pasando el alcance local del nuevo controlador al segundo parámetro de la función $ controller (). Esto llevó a Angular a intentar invocar un servicio $ scope que no existe ( aunque, por un tiempo, pensé que de alguna manera habría eliminado el servicio ''$ scope'' de la memoria caché de Angular ). La solución es ajustar el alcance local en un objeto local:
// Bad:
$controller(''myController'', newScope);
// Good:
$controller(''myController, {$scope: newScope});
Mi problema era con Yeoman, usando (en mayúscula):
yo angular:factory Test
Archivos hechos (no capitalizados):
app/scripts/services/test.js
pero el archivo index.html incluido (en mayúscula):
<script src="scripts/services/Test.js"></script>
Espero que esto ayude a alguien.
Ninguna de las respuestas anteriores funcionó para mí, tal vez estaba completamente equivocado, pero como principiante eso es lo que hacemos.
Estaba inicializando el controlador en un div para tener una lista:
<div ng-controller="CategoryController" ng-init="initialize()">
Y luego usar $routeProvider para asignar una URL al mismo controlador. Tan pronto como eliminé el ng-init el controlador trabajó con la ruta.
Obtuve un error de "proveedor desconocido" relacionado con angular-mocks (ngMockE2E) al compilar mi proyecto con Grunt. El problema era que los simulacros angulares no se pueden minimizar, así que tuve que eliminarlos de la lista de archivos minificados.
Otra posibilidad más
Tenía unknown Provider <- <- nameOfMyService . El error fue causado por la siguiente sintaxis:
module.factory(['''', function() { ... }]);
Angular estaba buscando la '''' dependencia.
Otro ''gotcha'': estaba recibiendo este error al inyectar $ timeout, y me tomó unos minutos darme cuenta de que tenía espacios en blanco en los valores de la matriz. Esto no funcionará:
angular.module(''myapp'',[].
controller(''myCtrl'', [''$scope'', ''$timeout '',
function ($scope, $timeout){
//controller logic
}
]);
Publicación solo en caso de que algún otro tenga un error tonto como este.
Otro caso más donde se producirá este error, si su servicio se define en un archivo javascript por separado, ¡asegúrese de hacer referencia a él! Sí, lo sé, error de novato.
Para agregar mi propia experiencia aquí, intentaba inyectar un servicio en una de las funciones de configuración de mi módulo. Este párrafo de los documentos que finalmente encontré explica por qué eso no funciona:
Durante el arranque de la aplicación, antes de que Angular desactive la creación de todos los servicios, configura e instaura todos los proveedores. Llamamos a esto la fase de configuración del ciclo de vida de la aplicación. Durante esta fase, los servicios no son accesibles porque aún no se han creado.
Lo que significa que puede inyectar proveedores en las funciones module.config (...), pero no puede inyectar servicios, para eso debe esperar hasta module.run (...) o exponer un proveedor que pueda inyectar al módulo. config
Para mí, el problema era la carga lenta; Cargué mi controlador y servicio tarde, por lo que no estaban disponibles en la carga de la página (y la inicialización angular). Hice esto con una etiqueta ui-if, pero eso es irrelevante. La solución fue cargar el servicio con la carga de página ya.
Para mí, este error fue causado al ejecutar la versión minificada de mi aplicación angular. Los documentos angulares sugieren una forma de evitar esto. Aquí está la cita relevante que describe el problema, y usted puede encontrar la solución sugerida en los documentos here :
Una nota sobre la minimización Dado que Angular infiere las dependencias del controlador de los nombres de argumentos a la función de constructor del controlador, si minimizara el código JavaScript para el controlador PhoneListCtrl, todos sus argumentos de funciones también se minificarían, y el inyector de dependencia no lo haría ser capaz de identificar los servicios correctamente
Recibí ese error porque estaba pasando un parámetro incorrecto a la definición de fábrica. Tuve:
myModule.factory(''myService'', function($scope, $http)...
Funcionó cuando eliminé $scope y cambié la definición de fábrica a:
myModule.factory(''myService'', function( $http)...
En caso de que necesite inyectar $scope , use:
myModule.factory(''myService'', function($rootScope, $http)...
Su código se ve bien, de hecho funciona (aparte de las llamadas mismas) cuando se copia y pega en una muestra jsFiddle: http://jsfiddle.net/VGaWD/
Es difícil decir lo que está pasando sin ver un ejemplo más completo, pero espero que el jsFiddle anterior sea útil. Lo que sospecho es que no estás inicializando tu aplicación con el módulo ''productServices'' . Daría el mismo error, podemos ver esto en otro jsFiddle: http://jsfiddle.net/a69nX/1/
Si está planeando trabajar con AngularJS y MongoLab , le sugiero que use un adaptador existente para $ resource y MongoLab : https://github.com/pkozlowski-opensource/angularjs-mongolab Alivia mucho del dolor al trabajar con MongoLab, usted puede verlo en acción aquí: http://jsfiddle.net/pkozlowski_opensource/DP4Rh/ ¡Descargo de responsabilidad! Estoy manteniendo este adaptador (escrito en base a ejemplos de AngularJS) por lo que obviamente estoy parcializado aquí.
Tuve el mismo problema Lo arreglé usando $(''body'').attr("ng-app", ''MyApp'') lugar de <body ng-app="MyApp"> para boostrap.
Porque lo hice
angular.element(document).ready(function () {
angular.bootstrap(document, [App.Config.Settings.AppName]);
})
para los requisitos de arquitectura.