无法加载具有组件的角度ui路由器的路由

Question

嗨，我是ui路由器的新手，目前正在学习它。我试图路由到组件，但无法这样做。

JS文件：

var app = angular 
.module('uiRouterDemoApp', ['ui.router']); 

function HelloComponentFunction() { 
var controller = this; 
controller.greeting = 'Hello'; 
controller.toggleGreeting = function() { 
controller.greeting = (controller.greeting === 'Hello') ? 'whats up' : 'hello'; 
}; 
} 

app.component('hello', { 
templateUrl: '/views/hello.html', 
controller: HelloComponentFunction 
}); 


app.config(function($stateProvider){ 
var helloGalaxy = { 
name: 'hello', 
url: '/hello', 
component: 'hello' 
}; 

var aboutState = { 
name: 'about', 
url: '/about', 
template: '<h4>Its the UI-Router hello World app!</h4>' 
}; 

$stateProvider.state(helloGalaxy); 
$stateProvider.state(aboutState); 

}); 

查看

<div class="container"> 
    <ul class=" list list-inline"> 
    <li><a ui-sref="hello" ui-sref-active="activelink">Hello</a></li> 
    <li><a ui-sref="about" ui-sref-active="activelink">About</a></li> 
    </ul> 
</div> 

当在视图招呼URL的链接点击不显示视图。请告诉我做错了什么。

Answer 1

试试这个

 $stateProvider 
      .state('hello', { 
       url: '/hello', 
       template: '<hello></hello>' 
      }) 
      .state('about', { 
       url: '/about', 
       template: '<about></about>' 
      })