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>中没有显示任何内容。例如，当我点击菜单标签时，网址会变为这样，菜单数据不会重新加载： http://localhost/conFusion/#!/contactus#%2Fmenu 我的默认页面是contactus。我还在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>

ng-view无法正常工作

0 个答案: