Error: $injector:unpr Unknown Provider Angular
Question
I have create a project MVC in the layout i have this (for load Menu Categories):
<html data-ng-app="app"> . . . //in the menu <li class="dropdown" ng-controller="menuCategoriesCtrl as vmCat"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Categorias<span class="caret"></span> </a> <ul id="listaCategorias" class="dropdown-menu" aria-labelledby="dropdownMenu1" ng-repeat="categoria in vmCat.categories"> <li> <a ng-href="{{categoria.url}}"> {{categoria.Nombre}} </a> </li> </ul> </li>
the app.js is this:
(function () { "use strict"; angular .module('app', ['ngRoute', 'ngAnimate', 'ui.bootstrap']).config(configRoute); configRoute.$inject = ['$routeProvider', '$locationProvider']; function configRoute($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: 'scripts/app/partials/Home.html', controller: 'productosPrincipalCtrl', controllerAs: 'vm' }) .when('/Mapa', { templateUrl: 'scripts/app/partials/Map.html' }) .otherwise({ redirectTo: '/' }); $locationProvider.html5Mode(false); //.hashPrefix("!") } })();
the controller for the menu Categories is this:
(function() { angular.module('app') .controller('menuCategoriesCtrl', menuCategoriesCtrl); menuCategoriesCtrl.$inject = ['categoryService']; function menuCategoriesCtrl(categoryService) { var vmCategory = this; var listCat = []; vmCategory.listCategories = []; getListCategories().then(function() { for (var i = 0; i < listCat.length; i++) { vmCategory.listCategories.push({ url: '#/Categoria/' + listCat.CategoriaId + '-' + listCat.Nombre, nombreCategoria: listCat.Nombre }); } }); function getListCategories() { return categoryService.getCategories() .then(function(response) { listCat = response; return listCat; }) .catch(function (response) { return alert('Error ' + response); }); }; } })();
and the service is this:
(function() { var uriCategorias = 'http://localhost/Api/GetCategories'; angular.module('app') .service('categoryService', categoryService); categoryService.$inject = ['$http']; function categoryService($http) { var srvCat = this; srvCat.getCategories = getCategories; function getCategories() { return $http.get(uriCategorias) .then(getCategoriesComplete) .cath(getCategoriesFail); function getCategoriesComplete(response) { return response.data; } function getCategoriesFail(response) { return alert('Error ' + response); } } } })
when i execute this in the browser i have a error for the inject in controller in the service.
Can somebody explain me why?
the name is correct i have reference all in the bundle in the app_start
thanks in advance
1 answers
solution1
1 ACCPTED 2015-12-20 17:55:17
You should call the service function, as you are using Self Executing function(IIFE pattern). Because the function of service.js not called, it doesn't bind the service component to app module. Hence injecting service in your code giving error as its not registered with app module.
Code
(function() {
//service code as is
})(); <-- () self calling function should be there
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.