2016-08-24 2 views
0

라우팅을 이해하는 중이며 헤더 영역의 상단에 몇 개의 버튼이있는 간단한 애플리케이션이 있습니다. 버튼은 잘 작동하고 올바른 정보를 표시하지만, 내가 만든 "myController"컨트롤러를 사용하는 페이지 (directory.html) 중 하나를 지시했지만 대신 실제 범위 데이터가 아닌 curley braces를 계속 제공합니다. 누군가 내가 뭘 잘못하고 있다고 말할 수 있습니까?왜 내 페이지가 내 컨트롤러를 선택하지 않는가

HTML

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 
    <head> 
    <title>Sample app</title> 
    <link href="content/css/styles.css" rel="stylesheet" type="text/css" /> 
    <script src="app/lib/angular.min.js"></script> 
    <script src="app/lib/angular-route.min.js"></script> 
    <script src="app/app.js"></script> 
    </head> 

    <body> 
    <header ng-include="'header.html'"></header> 
    <main ng-view></main> 
    </body> 
</html> 

JS

angular.module('myApp', ['ngRoute']) 

.config(['$routeProvider', function($routeProvider){ 
    $routeProvider 
     .when('/home', { 
      templateUrl: 'views/home.html' 
     }) 
     .when('/directory', { 
      templateUrl: 'views/directory.html', 
      //since this page requires a controller 
      controller: 'myController' 
     }) 
     .otherwise({ 
      redirectTo: '/home' 
     }); 
}]); 


angular.module('myApp', []) 
    .controller('myController', function($scope) { 
     $scope.message = ("Hello World"); 
}); 

에 directory.html

<p>This is my directory page.</p> 
<p>{{message}}</p> 

Header.html

<div id="menu-bar"> 
    <h1>My Sample App</h1> 
     <ul> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#directory">Directory</a></li> 
     </ul> 
</div> 

답변

1

js 파일은 유효하지 않습니다. 당신은 설정 모듈 내부의 컨트롤러를 배치 한

angular.module('myApp', ['ngRoute']) 

.config(['$routeProvider', function($routeProvider){ 
    $routeProvider 
     .when('/home', { 
      templateUrl: 'views/home.html' 
     }) 
     .when('/directory', { 
      templateUrl: 'views/directory.html', 
      //since this page requires a controller 
      controller: 'myController' 
     }) 
     .otherwise({ 
      redirectTo: '/home' 
     }); 

}]); 

angular.module('myApp', []) 
    .controller('myController', function($scope) { 
     $scope.message = ("Hello World"); 
}); 

...

+0

Thalaivar, 답장을 보내 주셔서 감사합니다. 귀하의 답변을 기반으로 내 코드를 수정하고 원래 게시글에서 JS를 수정했습니다. 불행히도 버튼이 작동하지 않습니다. –

+0

신경 쓰지 마세요. 나에 관한 녀석이었다. 고맙습니다 !! –

관련 문제