Javascript 无法使用带组件的angular ui路由器加载路由

嗨，我是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);

});

var-app=angular
.module（'uiRouterDemoApp'，['ui.router']）；
函数HelloComponentFunction（）{
var控制器=此；
controller.greeting='Hello'；
controller.toggleGreeting=函数（）{
controller.greeting=（controller.greeting=='Hello'）？'what up'：'Hello'；
};
}
app.component（'hello'{
templateUrl:“/views/hello.html”，
控制器：HelloComponentFunction
});
app.config（函数（$stateProvider）{
变量helloGalaxy={
姓名：'你好'，
url:“/你好”，
组件：“你好”
};
var aboutState={
姓名：'关于'，
url:“/关于”，
模板：“这是UI路由器hello World应用程序！”
};
$stateProvider.state（helloGalaxy）；
$stateProvider.state（关于state）；
});

看法

你好
关于

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

试试这个

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

$stateProvider
.state（'你好'{
url:“/你好”，
模板：“”
})
.state（'about'{
url:“/关于”，
模板：“”
})

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