sahar sahar - 23 days ago 12
AngularJS Question

By using ngRoute, ng-view not working properly

I want to implement

ngRoute
in my angularjs project. But
<ng-view></ng-view>
doesn't show anything. I read all other posts about this problem, but my problem is not resolved.

I define
$routeProvider
in app.js file as follows:

'use strict'
angular.module('confusionApp', ['ngRoute'])
.config(['$routeProvider',function($routeProvider) {

$routeProvider

.when('/contactus', { // route for the contactus page
templateUrl : 'contactus.html', controller : 'ContactController'
})

.when('/menu', { // route for the menu pag
templateUrl : 'menu.html', controller : 'MenuController'
})

.when('/menu/:id', { // route for the dish details pag
templateUrl : 'dishdetail.html', controller : 'DishDetailController'
})

.otherwise('/contactus');
}]);


My controllers.js file includes the defenition of all my controllers:

angular.module('confusionApp',[])

.controller('MenuController',['$scope','menuFactory',function($scope,menuFactory){

$scope.dishes = menuFactory.getDishes();
//other codes which deleted for simplicity

}])

.controller('dishDetailController',['$scope','$routeParams',
'menuFactory', function($scope,$routeParams,menuFactory){

var dish = menuFactory.getDish(parseInt($routeParams.id,10));
this.dish = dish;
//other codes which deleted for simplicity

}])

.controller('contactController',['$scope',function($scope){

//some code here

}])

.controller('feedbackController',['$scope',function($scope){

//some code here

}]);


And I defined factory in services.js file as follows:

angular.module('confusionApp')

.factory('menuFactory',function(){

var menufac = {};

var dishes=[{... some data ...}];

menufac.getDishes = function(){
return dishes;
};

menufac.getDish = function(index){
return dishes[index];
};

return menufac;
});


In my index.html page
<ng-view></ng-view>
doesn't show anything. Also I define scripts in index.html as follows and all the paths are true.

<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>


Can anyone help me? Thanks a lot.

Answer

Remove the dependency injection part from controller.js file

Change

From

angular.module('confusionApp',[])

To

angular.module('confusionApp')