Question

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

我在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');
}]);

我的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

    }]);

我在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;
    });

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

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

任何人都可以帮助我吗？非常感谢。

Answer 1

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

更改

发件人

angular.module('confusionApp',[])

要

angular.module('confusionApp')

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

1 个答案: