Not able to load route with angular ui-router with component

Question

Hi I am new to ui router and currently learning it. I am trying to route to component but not able to do so.

JS File:

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

});

View

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

When clicking on the the links in the view hello url is not showing the view. Please tell what I am doing wrong.

Answer 1

try this

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