2014-12-27 2 views
0

Я пытаюсь создать простой AngularApp здесь. Я пытаюсь добавить routeProvider и использовать конфигурацию для того же самого. Но страница никогда не работала так, как ожидалось. Когда я попытался использовать firebug в firefox, я обнаружил, что функция, присутствующая в config, никогда не вызывалась. Таким образом, код внутри него остается нетронутым. (Я смог подтвердить это с помощью контрольных точек).AngularJS routeprovider.config не называется

Я считаю, что здесь отсутствует что-то тривиальное. Пожалуйста, помогите мне разобраться.

index.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
     <title></title> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js" type="text/javascript"></script> 
     <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
     <script type="text/javascript" src="js/navbar.js"></script> 
     <script type="text/javascript" src="js/kscApp.js"></script> 
</head> 
<body> 
    <div ng-app="navbar"> 
     <nav-bar></nav-bar> 
    </div> 
    <div ng-app="kscapp"> 
     <ul> 
      <li><a href="#home"> Home </a></li> 
      <li><a href="#contact"> Contact </a></li> 
     </ul> 
     <div ng-view></div> 
    </div> 
</body> 
</html> 

kscapp.js

//Define an angular module for our app 
var sampleApp = angular.module('kscapp',[]); 

//Define Routing for app 
//STACKOVERFLOW: The function is not getting invoked here. Please feel free to use firebug to verify the same. 
sampleApp.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/home', { 
    templateUrl: 'templates/home.html', 
    controller: 'HomeCtrl' 
     }). 
     when('/Contact', { 
    templateUrl: 'templates/contact.html', 
    controller: 'ContactCtrl' 
     }). 
     otherwise({ 
    redirectTo: '/home' 
     }); 
}]); 


sampleApp.controller('HomeCtrl', function($scope) { 

console.log('inside Hc'); 
}); 


sampleApp.controller('ContactCtrl', function($scope) { 

console.log('inside Cc'); 

}); 

navbar.js

var navBarModule = angular.module('navbar', []); 

navBarModule.directive('navBar', function() { 
    return { 
     scope: {}, 
     templateUrl: 'templates/navbar.html' 
    }; 
}); 

EDIT: У меня было два нг-приложения в источнике. Я удалил navBar, и теперь все начинает работать нормально. Может кто-нибудь объяснить мне, почему это поведение наблюдается? Оба модуля не зависят друг от друга.

ответ

0

Вы не впрыскивать нг маршрут module.It должен быть

var sampleApp = angular.module('kscapp',['ngRoute']); 
+0

Пробовал это, но не работал для меня. – user1493281

+0

Вы можете посмотреть свой «консольный журнал», а затем опубликовать то, что видите. –

+0

Мои журналы полностью пусты. Журнала нет. – user1493281

0

Вы используете различные версии для Angular.min.js и углового route.min.js. обновить угловой-маршрут от 1.2.9 в 1.3.8

Также впрыснуть 'ngRoute' в kscapp модуля.

+0

Пробовал, но все равно не улучшил – user1493281

0

Вы можете использовать 'ng-app' один раз в вашей заявке.

рассмотривать двигая нг-приложение = "kscapp" до HTML тега, и обновление kscapp к:

var sampleApp = angular.module('kscapp',['ngRoute', 'navbar']);

Более подробную информацию о ngApp, читайте ngApp API.

Смежные вопросы