2014-06-15 4 views
9

정말 이상한 버그가 있습니다. 내 경로와 컨트롤러를 설정했습니다. 이제 오류가없는 빈 페이지가 생겼습니다.AngularJS : ngRoute, 그렇지 않으면 작동하지 않습니다.

index.html;

<!DOCTYPE html> 
<html ng-app="RekenTalent" lang="nl"> 
    <head> 
     <title>Rekentalent.nl: Ben jij een talent in Rekenen?</title> 
     <!-- Stylesheets --> 
     <link rel="stylesheet" type="text/css" href="/app/front/assets/stylesheets/style.css"> 
     <!-- AngularJS --> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.min.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.min.js"></script> 
     <!-- Controllers --> 
     <script src="/app/front/controllers/controller.js"></script> 
     <!-- Router --> 
     <script src="/app/front/router.js"></script> 
    </head> 

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

>

Controller.js :

/** 
* RekenTalent 
* 
* Copyright 2014 - Rekentalent.nl 
*/ 
var RekenTalent = angular.module('RekenTalentControllers', []); 

RekenTalent.controller('rekenCtrl', ['$scope', function($scope){ 

}]); 

Router.js을 :

var RekenTalent = angular.module('RekenTalent', [ 
    'ngRoute', 'RekenTalentControllers' 
]); 

RekenTalent.config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
    when('/index', { 
     templateUrl: '/templates/index.html', 
     controller: 'rekenCtrl' 
    }). 
    otherwise({ 
     redirect: '/index' 
    }); 
}]); 

그리고 /templates/index.html는 '안녕하세요'단지 말한다. 아무도 왜 내가 빈 페이지를 알 수 있습니까? /index.html로 리디렉션해야하며 /index.html은 /templates/index.html을 템플릿으로 사용해야합니다. 문제와 해결 방법은 무엇입니까?

UPDATE :

나는/작동 인덱스, 그래서 그렇지 않으면 PARAM의 어쩌려 구`t 작업, 왜 안로 이동?

+0

파일 참조 오류라고 생각합니다. 색인과 PC의 각진 스크립트는 어디에 있습니까? – Milad

+0

그리고 콘솔을 추가 할 수 있습니다.컨트롤러가 올바르게 작동하는지 여부를 확인하기 위해 컨트롤러에 log ('load')를 입력하십시오. 하지만 여전히 콘솔을 넣을 때 그 에러 메시지가 – Milad

+0

index.html => /app/front/templates/index.html이라고 생각합니다. .log ('hi') 컨트롤러에 콘솔에 로그가 없습니다. – DazDylz

답변

16

변화 redirectredirectTo

그리고 문제의 모든 종류를 피하기 위해 home.template를 사용하는 것이 좋습니다에, 나는 고려 의미 :

을 당신은 당신의 전체를 포함하는 index.html 스크립트를 포함해야 각도, jquery 같은 ... 그리고 body 태그에 ng-view, ok?

이제 welcome과 같은 템플릿이나 색인 용 템플릿이 있다면 home.html에 해당 템플릿을 작성하십시오. 이처럼 :

index.html을 :

<body ng-app="yourapp"> 
    <div ng-view> 
    </div> 
</body> 

home.html을

<div> 
    Welcome, user. This is index. 
    </div> 

앱 구성 :

yourapp.config(function($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'partials/home.html', 
     controller: 'homeCtrl' 
     }) 
     .otherwise({redirectTo:'/'}); 
} 

그리고 그것은 모두 넣어 좋은 방법은 당신의 아버지 폴더에 index.html이 들어있는 partials 폴더 내의 템플릿

root 
    yourAppFolder 
     1-Assets 
      Css 
      Js 

     2-Partials 
      home.html 
      login.html 

     3-index.html 
2

발견; 리디렉션은 redirectTo 여야합니다.

var RekenTalent = angular.module('RekenTalent', [ 
    'ngRoute', 'RekenTalentControllers' 
]); 

RekenTalent.config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
    when('/index', { 
     templateUrl: '/app/front/templates/index.html', 
     controller: 'rekenCtrl' 
    }). 
    otherwise({ 
     redirectTo: '/index' 
    }); 
}]); 
1

나는 예를 들어,이 코드 샘플을 가지고

.config(['$routeProvider', 
function($routeProvider) { 
    console.log('routeando'); 
    //alert('otherwise' + $routeProvider.route); 
    $routeProvider. 
     when('/', {  templateUrl: 'home'}). 
     when('/route1', { templateUrl: 'route1'}). 

     /*Without the next line, redirectTo doesnt work*/ 
     when('/error', { templateUrl: 'error'}). 
     otherwise({  redirectTo: '/error'}); 
}]);  

그렇지 않으면 단지 당신이 이미 그 길에 대해 "때"매개 변수가있는 경우 일 것입니다.

영어로 실례합니다. 좋은 하루 되세요.