javascript - example - http angularjs
Error AngularJS: $ injector: unpr Desconocido Proveedor (11)
Estoy intentando construir mi propio servicio siguiendo el ejemplo en la documentación de la metodología de fábrica. Sin embargo, creo que he hecho algo mal porque sigo obteniendo el error de proveedor desconocido. Este es mi código para mi aplicación, incluida la declaración, configuración y definición de fábrica.
EDITAR Ahora he agregado todos los archivos para ayudar a solucionar problemas
EDITAR Los detalles completos del error están debajo de los problemas que parecen estar con getSettings, ya que está buscando getSettingsProvider y no puede encontrarlo
Error: [$injector:unpr] http://errors.angularjs.org/1.2.16/$injector/unpr? p0=getSettingsProvider%20%3C-%20getSettings
at Error (native)
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:6:450
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:35:431
at Object.c [as get] (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:13)
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:35:499
at c (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:13)
at d (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:230)
at Object.instantiate (http://localhost/sw/selfservice/bower_components/angular/angular.min.js:34:394)
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:66:112
at http://localhost/sw/selfservice/bower_components/angular/angular.min.js:53:14 angular.js:9778
(anonymous function) angular.js:9778
(anonymous function) angular.js:7216
h.$apply angular.js:12512
(anonymous function) angular.js:1382
d angular.js:3869
$b.c angular.js:1380
$b angular.js:1394
Wc angular.js:1307
(anonymous function) angular.js:21459
a angular.js:2509
(anonymous function) angular.js:2780
q angular.js:330
c
Estos son todos los archivos que tengo en mi aplicación actualmente
app.JS
//Initialize angular module include route dependencies
var app = angular.module("selfservice", [''ngRoute'']);
app.config(function ($routeProvider) {
$routeProvider
.when(''/'', {
templateUrl:"partials/login.html",
controller:"login"
});
});
app.factory(''getSettings'', [''$http'', ''$q'', function($http, $q) {
return function (type) {
var q = $q.defer();
$http.get(''models/settings.json'').success(function (data) {
q.resolve(function() {
var settings = jQuery.parseJSON(data);
return settings[type];
});
});
return q.promise;
};
}]);
Y así es como estoy usando este servicio en mi controlador
controller.JS
app.controller("globalControl", [''$scope'',''getSettings'', function ($scope,getSettings) {
var loadSettings = getSettings(''global'');
loadSettings.then(function(val) {
$scope.settings = val;
});
}]);
app.controller("login", [''$scope'', function ($scope) {
return ""
}]);
directives.js
app.directive(''watchResize'', function(){
return {
restrict: ''M'',
link: function(scope, elem, attr) {
scope.spacer = (window.innerWidth < 1025) ? '''' : ''large-3'';
scope.button = (window.innerWidth < 1025) ? '''' : ''large-6'';
angular.element(window).on(''resize'', function(){
scope.$apply(function(){
scope.spacer = (window.innerWidth < 1025) ? '''' : ''large-3'';
scope.button = (window.innerWidth < 1025) ? '''' : ''large-6'';
});
});
}
};
});
Y si es pertinente aquí está el HTML
<html class="no-js" lang="en" ng-app="selfservice" ng-controller="globalControl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{settings.title}}</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<div id="template">
<header id="header">
<img src="{{settings.logo}}" alt="{{settings.logoDescription}}"/>
</header>
<div id="view">
<ng-view></ng-view>
</div>
</div>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script>
//initialize foundation
$(document).foundation();
</script>
</body>
</html>
¿Alguien me puede apuntar en la dirección correcta? Hice todo lo posible para seguir la documentación y, al analizar SO, la mayoría de los temas relacionados son mucho más profundos y más difíciles de entender para mí. Esta es la primera vez que creo un servicio.
@ user2310334 Acabo de probar esto, un ejemplo MUY básico:
Archivo HTML
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-route.min.js" type="text/javascript"></script>
<script src="./app.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="MailDetailCtrl">
</div>
</body>
</html>
El archivo javascript:
var myApp= angular.module(''app'', [''ngRoute'']);
myApp.factory(''mailService'' , function () {
return {
getData : function(){
var employees = [{name: ''John Doe'', id: ''1''},
{name: ''Mary Homes'', id: ''2''},
{name: ''Chris Karl'', id: ''3''}
];
return employees;
}
};
});
myApp.controller(''MailDetailCtrl'',[''$scope'', ''mailService'', function($scope, mailService) {
alert(mailService.getData()[0].name);
}]);
Y funciona. Intentalo.
Asegúrese de cargar el controlador fuera de app.config . El siguiente código puede causar este error:
app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
var AuthCtrl = require(''components/auth/AuthCtrl''); //NOTICE HERE
$stateProvider.state(''login'',{
url: "/users/login",
templateUrl: require("components/auth/login.tpl.html"),
controller: AuthCtrl // ERROR
})
}))
Para corregir este error, debemos mover AuthCtrl a fuera app.config :
var AuthCtrl = require(''components/auth/AuthCtrl''); //NOTICE HERE
app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
$stateProvider.state(''login'',{
url: "/users/login",
templateUrl: require("components/auth/login.tpl.html"),
controller: AuthCtrl // WORK
});
}))
Cuando usa el enrutador ui, no debe usar ng-controller en ningún lado. Sus controladores se instancian automáticamente para una vista de usuario cuando se activan sus estados apropiados.
En mi caso, agregué un nuevo servicio (archivo) a mi aplicación. Ese nuevo servicio se inyecta en un controlador existente. No me perdí la nueva inyección de dependencia de servicio en ese controlador existente y no declare mi módulo de aplicación en más de un lugar. La misma excepción se produce cuando vuelvo a ejecutar mi aplicación web y la memoria caché de mi navegador no se restablece con un nuevo código de archivo de servicio. Simplemente actualicé mi navegador para obtener ese nuevo archivo de servicio para el caché del navegador, y el problema desapareció.
Estaba obteniendo este problema y resultó que había incluido mi controlador tanto en ui.router como en la plantilla html como en
.config([''$stateProvider'',
function($stateProvider) {
$stateProvider.state(''dashboard'', {
url: ''/dashboard'',
templateUrl: ''dashboard/views/index.html'',
controller: ''DashboardController''
});
}
]);
y
<section data-ng-controller="DashboardController">
Este error también aparece cuando uno accidentalmente inyecta $ scope en la fábrica de ellos:
angular.module(''m'', [])
.factory(''util'', function ($scope) { // <-- this ''$scope'' gives ''Unknown provider'' when one attempts to inject ''util''
// ...
});
Pasé unas horas tratando de resolver lo mismo. Así es como lo hice:
app.js:
var myApp = angular.module( ''myApp'', [''ngRoute'', ''ngResource'', ''CustomServices''] );
CustomServices es un nuevo módulo que creé y coloqué en un archivo separado llamado services.js
_Layout.cshtml:
<script src="~/Scripts/app.js"></script>
<script src="~/Scripts/services/services.js"></script>
services.js:
var app = angular.module(''CustomServices'', []);
app.factory( ''GetPeopleList'', [''$http'', ''$log'',''$q'', function ( $http, $log, $q )
{
//Your code here
}
app.js
myApp.controller( ''mainController'', [''$scope'', ''$http'', ''$route'', ''$routeParams'', ''$location'', ''GetPeopleList'', function ( $scope, $http, $route, $routeParams, $location, GetPeopleList )
Debe vincular su servicio a su nuevo módulo en el archivo services.js Y, por supuesto, debe usar ese nuevo módulo en la creación de su módulo principal de aplicación (app.js) Y también declarar el uso del servicio en el controlador quieres usarlo en
Por favor, "incluya" tanto el Controlador como el (los) módulo (s) donde se encuentran el controlador y las funciones a las que se llama en el Controlador.
module(theModule);
Su módulo angular debe inicializarse correctamente. La app objeto global debe definirse e inicializarse correctamente para inyectar el servicio.
Por favor vea el siguiente código de muestra para referencia:
app.js
var app = angular.module(''SampleApp'',[''ngRoute'']); //You can inject the dependencies within the square bracket
app.config([''$routeProvider'', ''$locationProvider'', function($routeProvider, $locationProvider) {
$routeProvider
.when(''/'', {
templateUrl:"partials/login.html",
controller:"login"
});
$locationProvider
.html5Mode(true);
}]);
app.factory(''getSettings'', [''$http'', ''$q'', function($http, $q) {
return {
//Code edited to create a function as when you require service it returns object by default so you can''t return function directly. That''s what understand...
getSetting: function (type) {
var q = $q.defer();
$http.get(''models/settings.json'').success(function (data) {
q.resolve(function() {
var settings = jQuery.parseJSON(data);
return settings[type];
});
});
return q.promise;
}
}
}]);
app.controller("globalControl", [''$scope'',''getSettings'', function ($scope,getSettings) {
//Modified the function call for updated service
var loadSettings = getSettings.getSetting(''global'');
loadSettings.then(function(val) {
$scope.settings = val;
});
}]);
El código HTML de ejemplo debería ser así:
<!DOCTYPE html>
<html>
<head lang="en">
<title>Sample Application</title>
</head>
<body ng-app="SampleApp" ng-controller="globalControl">
<div>
Your UI elements go here
</div>
<script src="app.js"></script>
</body>
</html>
Tenga en cuenta que el controlador no se vincula a una etiqueta HTML, sino a la etiqueta corporal. Además, intente incluir sus scripts personalizados al final de la página HTML ya que es una práctica estándar a seguir por motivos de rendimiento.
Espero que esto solucione tu problema básico de inyección.
también es una de las razones populares por las que quizás se pierda incluir el archivo de servicio en su página
<script src="myservice.js"></script>
app.factory(''getSettings'', [''$http'',''$q'' /*here!!!*/,function($http, $q) {
necesita declarar TODAS sus dependencias O ninguna y olvidó declarar $ q.
editar:
controller.js: iniciar sesión, no devolver ""