错误:$injector:unp未知提供程序角度

Error: $injector:unpr Unknown Provider Angular

本文关键字：程序 未知 injector unp 错误      更新时间：2023-09-26

我已经在布局中创建了一个项目MVC，我有这个（用于加载菜单类别）：

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

js是这样的：

(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("!")
    }
})();

菜单类别的控制器是这样的：

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

服务是这样的：

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

当我在浏览器中执行此操作时，服务中的注入控制器出现错误。

有人能解释一下为什么吗？

名称是正确的，我在app_start 中引用了捆绑包中的所有内容

提前感谢

您应该调用服务函数，因为您使用的是自执行函数（IIFE模式）。因为service.js的函数没有被调用，所以它没有将service组件绑定到app模块。因此，在代码中注入服务会导致错误，因为它没有在应用程序模块中注册。

代码

(function() {
    //service code as is
})(); <-- () self calling function should be there
相关文章：