2015-12-20 95 views
1

我在佈局創建一個項目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提前

回答

1

感謝您應該撥打服務功能,您使用的是自執行功能(IIFE模式)。由於未調用service.js的功能,因此它不會將service組件綁定到app模塊。因此,在代碼中注入服務會導致錯誤,因爲它沒有在應用程序模塊中註冊。

代碼

(function() { 

    //service code as is 

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

這是正確的,非常感謝! –

+0

很高興爲您效勞。謝謝 –

相關問題