By using ngRoute, ng-view not working properly

Question

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 1

Remove the dependency injection part from controller.js file

Change

From

angular.module('confusionApp',[])

To

angular.module('confusionApp')