Angular UI-Router組件不起作用

Question

我有一個使用ui-router與component的簡單項目。 對於“ hello”組件，如果我單擊“ hello”鏈接，則什么也沒有發生。 如果單擊“關於”鏈接，則會顯示該視圖，因為它不使用組件。 有人可以讓我知道為什么“ hello”組件不起作用嗎？ 我嘗試了不同版本的angular-ui-router.js，但沒有解決問題。 謝謝。

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);
 });

hello-component.js：

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

Answer 1

您應該先加載模塊，然后加載組件，將順序更改為

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

Angular UI-Router組件不起作用

問題描述

1 個解決方案

解決方案1
2 已采納 2017-02-22 19:26:06

Angular UI-Router組件不起作用

問題描述

1 個解決方案

解決方案1 2 已采納 2017-02-22 19:26:06

解決方案1
2 已采納 2017-02-22 19:26:06