2016-06-27 2 views
1

Angularjs 라이브러리의 $ routeProvider 및 ng-view를 사용하여 index.html에 뷰를 삽입하려고합니다. 누구나 삽입되지 않는 이유를 알아낼 수 있습니까?Angular.js 웹 페이지 라우팅이 SPA에서 작동하지 않습니다 (ng-view 및 routeProvider 사용)

index.html을 :

<!doctype html> 
<html lang='en' ng-app="myApp"> 
<head> 


    <script src="app/lib/angular.min.js"></script> 
    <script src="app/lib/angular-route.min.js"></script> 
    <script src="app/lib/app.js"></script> 

    <link rel="stylesheet" href="styles.css"> 
</head> 
<body> 

<main ng-view> 
</main> 

</body> 
</html> 

app.js :

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

myApp.config(['$routeProvider', function($routeProvider){ 

$routeProvider 

    .when('/login', { 
    templateUrl: 'views/login.html' 
    }) 

    .otherwise({ 
    redirectTo: '/login' 
    }); 

}]); 

내 로그인 여기

내 index.html을, 내보기, 내 app.js 파일입니다. html (내 프로젝트의보기 폴더에 있음) :

<h1>Welcome to the login page!</h1> 

원자에서이 페이지를 미리 보려고하면 index.html이 비어 있습니다. 어떤 생각이 잘못 되었습니까?

+1

죄송합니다 ... 메인이란 무엇입니까? – abdoutelb

답변

1

바라건대 일부 서버에서 응용 프로그램을 실행하고 있습니다. 동일한 코드가 정상적으로 작동하기를 바랍니다.

app.js는 plunker 작업에 대한

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

app.config(['$routeProvider', function($routeProvider) { 

    $routeProvider 
    .when('/login', { 
     template: '<h1>Welcome to the login page!</h1>' 
    }) 
    .otherwise({ 
     redirectTo: '/login' 
    }); 

}]); 

클릭 here 파일.

+0

예, 원자에서 미리보기 문제가 생겼습니다. 감사합니다! –