错误：$injector:unpr 未知提供者 Angular答案

【问题标题】：Error: $injector:unpr Unknown Provider Angular错误：$injector:unpr 未知提供者 Angular
【发布时间】：2016-03-26 18:31:31
【问题描述】：

我已经在布局中创建了一个项目 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>

app.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 的包中引用了所有内容

提前致谢

【问题讨论】：

标签： javascript angularjs asp.net-mvc angularjs-service iife

【解决方案1】：

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

代码

(function() {

    //service code as is

})(); <-- () self calling function should be there

【讨论】：