2014-12-27 5 views
0

여기 간단한 AngularApp를 작성하려고합니다. 나는 routeProvider를 추가하고 같은 것을 사용하려고한다. 그러나이 페이지는 예상대로 작동하지 않았습니다. Firefox에서 fireBug를 사용해 보았을 때 config에있는 함수가 호출되지 않았다는 것을 알았습니다. 따라서 내부의 코드는 그대로 유지됩니다. (나는 breakpoints로 그것을 확인할 수 있었다).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' 
    }; 
}); 

편집 : 나는 소스의 두 NG-응용 프로그램을 가지고 있었다. navBar를 제거했는데 이제는 정상적으로 작동하기 시작합니다. 누군가이 행동이 보이는 이유를 설명해 줄 수 있습니까? 두 모듈은 서로 독립적입니다.

답변

0

당신은 NG 경로 module.It이

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

시도해 보았지만 나를 위해 일하지 마십시오. – user1493281

+0

'콘솔 로그 '를보고 당신이 보는 것을 게시 할 수 있습니다. –

+0

내 기록이 완전히 비어 있습니다. 로그가 없습니다. – user1493281

0

당신은 Angular.min.js 및 각도-route.min.js에 대해 서로 다른 버전을 사용해야 주입하지 않습니다. 1.3.8

1.2.9에서 각-경로를 업데이트 또한 모듈을 kscapp하는 'ngRoute'을 주입.

+0

시도했지만 여전히 개선되지 않았습니다. – user1493281

0

응용 프로그램에서 'ng-app'을 한 번만 사용할 수 있습니다.

는 재질 - 구글 번역 참고 html 태그까지 당신의 NG-응용 프로그램 = "kscapp을"이동 및 업데이트 kscapp에 :

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

자세한 내용은 ngApp에, ngApp API를 참조하십시오.