2017-02-22 8 views
0

구성 요소가있는 ui-router를 사용하는 간단한 프로젝트가 있습니다. '안녕하세요'구성 요소의 경우 '안녕하세요'링크를 클릭해도 아무런 변화가 없습니다. '정보'링크를 클릭하면 구성 요소를 사용하지 않기 때문에보기가 표시됩니다. 누군가 'hello'구성 요소가 작동하지 않는 이유를 알려주십시오. angular-ui-router.js의 다른 버전을 사용해 보았지만 문제를 해결하지 못했습니다. 감사.구성 요소가 작동하지 않는 각도 UI 라우터

index.html을 :

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> 
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script> --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.js"></script> 
<script src=https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"> </script> 
<script src="js/hello-component.js"></script> 
<script src="js/hellogalaxy-module.js"></script> 

<style>.active { color: red; font-weight: bold; }</style> 
</head> 
<body ng-app="hellogalaxy"> 
    <a ui-sref="hello" ui-sref-active="active">Hello</a> 
    <a ui-sref="about" ui-sref-active="active">About</a> 
<ui-view></ui-view> 
</body> 
</html> 

hellogalaxy-module.js :

var myApp = angular.module('hellogalaxy', ['ui.router']); 
myApp.config(function($stateProvider) { 
var helloState = { 
     name: 'hello', 
     url: '/hello', 
     component: 'hello' 
}; 

var aboutState = { 
     name: 'about', 
     url: '/about', 
     template: '<h3>Its the UI-Router hello world app!</h3>' 
} 
$stateProvider.state(helloState); 
$stateProvider.state(aboutState); 
}); 

헬로 component.js :

angular.module('hellogalaxy').component('hello', 
{ 
    template: '<h3>{{$ctrl.greeting}} Solar System!</h3>'    
    controller: function() { this.greeting = 'hello'} 
}) 

답변

1

요 모듈을 먼저로드 한 다음 구성 요소를로드해야합니다.

<script src="js/hellogalaxy-module.js"></script> 
<script src="js/hello-component.js"></script> 
+0

감사합니다. 이로 인해 문제가 해결되었습니다. – jlp

+0

대답이 도움이 되었다면 – Sajeetharan

+0

내가 시도하고 있었고 xx 분 안에 답변을 수락 할 수 있다고 말했습니다. – jlp

관련 문제