I've recently developed an MVC project and encountered an issue regarding the loading of Menu Categories within the layout.
<html data-ng-app="app">
.
.
.
//menu section
<li class="dropdown" ng-controller="menuCategoriesCtrl as vmCat">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Categories<span class="caret"></span>
</a>
<ul id="listaCategorias" class="dropdown-menu" aria-labelledby="dropdownMenu1" ng-repeat="category in vmCat.categories">
<li>
<a ng-href="{{category.url}}">
{{category.Name}}
</a>
</li>
</ul>
</li>The app.js file includes:
(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: 'mainProductsCtrl',
controllerAs: 'vm'
})
.when('/Map', {
templateUrl: 'scripts/app/partials/Map.html'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(false); //.hashPrefix("!")
}
})();The controller for the Menu Categories is defined as:
(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: '#/Category/' + listCat.CategoryId + '-' + listCat.Name,
categoryName: listCat.Name
});
}
});
function getListCategories() {
return categoryService.getCategories()
.then(function(response) {
listCat = response;
return listCat;
})
.catch(function (response) {
return alert('Error ' + response);
});
};
}
})();Additionally, the service for handling categories is shown below:
(function() {
var categoriesUri = '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(categoriesUri)
.then(getCategoriesComplete)
.cath(getCategoriesFail);
function getCategoriesComplete(response) {
return response.data;
}
function getCategoriesFail(response) {
return alert('Error ' + response);
}
}
}
})While trying to run this code in the browser, I encountered an injection error in the controller and the service. Can someone help me understand why?
All required references are correctly included in the bundle in the app_start section.
Thank you in advance