2014-01-16 4 views
4

저는 각도 JS를 배우기 시작했습니다. 라우팅을위한 테스트 코드를 만들었습니다. 그러나이 작동하지 않는 것 같다AngularJS 라우터 설정이 작동하지 않습니다.

demoApp.js

var demoApp = angular.module('demoApp',[]) 

demoApp.config(function($routeProvider){ 
    $routeProvider 
     .when('/view1', 
      { 
       controller:'SimpleController' 
       ,templateUrl : 'View1.html' 
      }) 
     .when('/view2', 
      { 
       controller:'SimpleController' 
       ,templateUrl : 'View2.html' 
      }) 
     .otherwise({redirectTo:'/view1'}); 

}); 

demoApp.controller('SimpleController',function($scope){ 
     $scope.customers = [ 
       {name:'Terry.Cho',city:'Seoul'}, 
       {name:'Cath',city:'Suwon'}, 
       {name:'Carry',city:'Suwon'} 
     ]; 
     alert('hello controller'); 
    }); 


alert("hello"); 

home.html을

<html ng-app="demoApp"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script> 
    <script src="demoApp.js"></script> 
</head> 
<body> 
    <a href="#/view1">View1</a> 
    <a href="#/view2">View2</a> 

    <div> 
     <div ng-view></div> 
    </div> 
</body> 
</html> 

view1.html

<div class="container"> 
    <h2> View 1 </h2> 

view2.html

<div class="container"> 
    <h2> View 2 </h2> 

demoApp.config 또는 컨트롤러 설정에 뭔가가 누락 되었습니까? 는 또한 오류 메시지를 얻었다 스크립트 콘솔

처리되지 않는 오류 : $ 인젝터 : modulerr] http://errors.angularjs.org/1.2.9/ $ 주입기/modulerr P0 = demoApp & P1 = 오류 % 3A ... ogleapis.com % 2Fajax % 2Flibs % 2Fangularjs % 2F1?. 2.9 % 2Fangular.min.js % 3A32 % 3A232)

+1

당신이 언급 한 것처럼 'angular.route.min.js'는 그 때문에 그 자체로 이동 분리 된 파일. – Ravi

답변

4

ngRoute 모듈이 누락되었습니다. 이 같은 모듈을 스크립트에 angular-route.js 파일을 추가하고로드 할 수 있습니다 당신에게 따라 HTML 당신이 당신의 응용 프로그램 모듈에 ngRoute 모듈에 대한 참조를 누락

angular.module('demoApp', ['ngRoute']); 
0

.

var demo = angular.module('demoapp',['ngRoute']); 
2

이 demo.js

var demoApp = angular.module('demoApp',['ngRoute']) 

및 home.html을 추가 추가 아래

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js 
관련 문제