2016-06-17 2 views
0

도움이 될지 궁금했습니다.AngularJS 경로 로딩 오류

저는 AngularJS를 배우고 있으며 Angular Route lib를 사용하기로 결정했습니다. 로드 할 때 계속 오류가 발생합니다.

angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=jargonBuster&p1=Err…loudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.3.0%2Fangular.min.js%3A18%3A3) 

내 코드는 다음과 같습니다. 링크가 변경되어 아무런 효과가 없는지 확인합니다.

HTML

<!DOCTYPE html> 
<html ng-app = "jargonBuster"> 
<head> 
    <meta charset="utf-8"> 
    <title>Angular.js Example</title> 
    <link type="text/css" rel="stylesheet" href="style.css"/> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js"></script> 

</head> 
<body> 
    <section ng-controller="MainCtrl"></section><!-- VIEW --> 
</body> 
</html> 
<script src="script.js"></script> 

JS

var app = angular.module('jargonBuster', ['ngRoute']); 

//router 
app.config(function($routeProvider) { 
    $routeProvider. 
    when('/', { 
     templateUrl:'keyword-list.html', 
     controller: 'MainCtrl' 
    }). 
    otherwise({ 
     redirectTo: '/' 
    }); 
}); 


// The Controller 
app.controller('MainCtrl', function($scope, $http) { 
    $http.get("getdecks.php").success(function(data) { //Gets data from The Decks Table 
     $scope.deckData = data;}); 
    $http.get("getcards.php").success(function(data) { //Gets data from The Cards Table 
     $scope.cardsData = data;}); 

    $scope.sortField = 'keyword'; 
    $scope.reverse = true; 

});// End of the controller 

감사합니다, 어떤 아이디어?

+0

제거'NG 컨트롤러 = "MainCtrl"'또한 HTML –

+0

에서 다른 관찰. 스크립트 일 로드에서'각도 경로'는'1.3.14'이지만 주 각도 스크립트는'1.3.0'입니다. angular.js에 대한 스크립트를 '1.3.14'로 변경해보십시오. – Lexi

답변

3

을 시도 할 수 있습니다. 당신이

<section ng-view></section> 

<section ng-controller="MainCtrl"></section> 

에서 변경하면 당신은 템플릿로드를 참조한다 (다른 오류가, 당신은하지 않았다 키워드 list.html 파일에서 다운 스트림을 잘라하지 않습니다 제공 난 내 자신의 간단한 키워드 list.html 파일로 코드를 설정

. 제공하고 잘 작동합니다.

+0

굉장합니다, 고마워요. 그것은 일했다 :) – HybridHaylee

-1

각도가 서로 다른 두 가지 버전을로드 중입니다. 충돌이 있다고 생각합니다. angular-route.js 스크립트가 angular.js 스크립트보다 최신 버전입니다. 아래로 업데이트 해보세요. 당신은 당신에게 HTML

외부 정의를 보유하고 스크립트를 넣어

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script> 
0

당신은 문제가 실제로 HTML 마크 업입니다 순서

<!DOCTYPE html> 
<html ng-app = "jargonBuster"> 
<head> 
<meta charset="utf-8"> 
<title>Angular.js Example</title> 
<link type="text/css" rel="stylesheet" href="style.css"/> 


</head> 
<body> 
<section ng-controller="MainCtrl"></section><!-- VIEW --> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js"></script> 
<script src="script.js"></script> 
</body> 
</html> 
+1

실제로이 작업을 수행 할 필요는 없습니다. 스크립트가 멋진 애니메이션을위한 것이 아닌 한, head 태그에 js 스크립트가있는 것이 더 일반적입니다. –

+0

관련 문제는 모듈을 보유하고있는 스크립트가 html 외부에서 정의한 것임 – abdoutelb

+0

이제 스크립트가 html 바깥에 있다고 말했을 때 나는 그가 파일의 맨 아래에 모든 것을 넣었음을 알지 못했다. . 그는 헤드 태그 –