通过使用ngRoute，ng-view无法正常工作

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.

我想在angularjs项目中实现ngRoute。但是没有显示任何内容。我阅读了有关此问题的所有其他帖子，但我的问题仍未解决。

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

我在app.js文件中定义$ routeProvider，如下所示：

'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:

我的controllers.js文件包括我所有控制器的防御：

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:

我在services.js文件中定义了工厂，如下所示：

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.

在我的index.html页面中，没有显示任何内容。我还在index.html中定义了脚本，如下所示，并且所有路径都是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.

谁能帮我？非常感谢。

1 个解决方案

#1

Remove the dependency injection part from controller.js file

从controller.js文件中删除依赖项注入部分

Change

更改

From

从

angular.module('confusionApp',[])

至

angular.module('confusionApp')

#1