无法使用带有组件的角度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>

单击视图中的链接时，hello url未显示该视图。 请告诉我我做错了。

Answer 1

尝试这个

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