2017-02-22 11 views
0

私はコンポーネントを持つui-routerを使用する単純なプロジェクトを持っています。 「こんにちは」コンポーネントの場合、「こんにちは」リンクをクリックしても何も起こりません。 「About」リンクをクリックすると、コンポーネントを使用しないためビューが表示されます。誰かが私に「こんにちは」コンポーネントが動作していない理由を教えてもらえますか?私はangular-ui-router.jsの異なるバージョンを試しましたが、問題を修正しませんでした。ありがとう。コンポーネントが動作しないAngular UI-Router

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

関連する問題