Nicht in der Lage, Route mit eckigen ui-Router mit Komponente zu laden

Question

Hallo Ich bin neu zu UI-Router und derzeit lernt es. Ich versuche, zur Komponente zu gelangen, aber nicht dazu in der Lage.

JS Datei:

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

}); 

Ansicht

<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> 

Wenn auf die die Links in der Ansicht hallo URL klicken, um die Ansicht nicht angezeigt. Bitte sag was ich falsch mache.

Answer 1

versuchen, diese

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