2016-11-15 4 views
0

Я хочу реализовать ngRoute в моем проекте angularjs. Но <ng-view></ng-view> ничего не показывает. Я прочитал все другие сообщения об этой проблеме, но моя проблема не решена.С помощью ngRoute ng-view не работает должным образом

Я определяю $routeProvider в app.js файле следующим образом:

'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 файл включает Defenition всех моих контроллеров:

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> 

Может кто мне помочь? Большое спасибо.

+0

вы переосмысление своего модуля: 'Angu lar.module ('confusionApp', []) 'вместо' angular.module ('confusionApp') 'в вашем контроллере.js? – DTing

+0

angular.module ('confusionApp', []) переопределит новый модуль в вашем контроллере. Поэтому вам нужно использовать angular.module ('confusionApp') .... это утверждение выводит ваш угловой модуль. – Hemakumar

+0

Спасибо @DTing. Ваше руководство было правильным. :-) – sahar

ответ

4

Удалить инъекции зависимости части из controller.js файл

Изменить

От

angular.module('confusionApp',[]) 

Для

angular.module('confusionApp') 
+0

@sahar вы можете создать плункер? – Sajeetharan

+0

Благодарим за отзыв. Моя проблема решена. :-) – sahar