Question

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

的包中引用了所有内容

提前致谢

Answer 1

您应该调用服务功能，因为您正在使用自执行功能（IIFE模式）。由于未调用service.js的功能，因此它不会将service组件绑定到app模块。因此，在代码中注入服务会产生错误，因为它未在app模块中注册。

<强>代码

(function() {

    //service code as is

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

错误：$ injector：unpr未知的提供程序角度

1 个答案: