AngularJS : ui-router components not showing

Question

I am trying to write a simple angular application that uses angular ui-router to display components in my application.

I can get it to work using templates and controllers, but when I refactor to components they don't render on the screen. I don't get any console errors either.

Here is my app, it is based on the angular sample application Hello Solarsytem

app.js

var myApp = angular.module('materialThings', ['ui.router']);

myApp.config(function ($stateProvider) {
    // An array of state definitions
    var states = [
        {
            name: 'about',
            url: '/about',
            component: 'about'
        }
    ]

    // Loop over the state definitions and register them
    states.forEach(function (state) {
        $stateProvider.state(state);
    });
});

myApp.run(function($rootScope) {
    $rootScope.$on("$stateChangeError", console.log.bind(console));
});

index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My AngularJS App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
    <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
    <link rel="stylesheet" href="app.css">
    <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="app.js"></script>
    <script src="about.js"></script>

</head>
<body ng-app="materialThings">

<a ui-sref="about" ui-sref-active="active">About</a>

<ui-view></ui-view>

<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->

</body>

about.js

angular.module('materialThings').component('about', {
    template: '<h3>Its the UI-Router<br>Hello Solar System app!</h3>'
})

which version of ui-router is this?

Mahesh
– Mahesh

2016-10-28 19:46:30 +00:00
Commented Oct 28, 2016 at 19:46 — Mahesh
– Mahesh, Commented Oct 28, 2016 at 19:46

Community · Accepted Answer · 2017-05-23 11:46:20Z

2

Refer to this question: Angular - UI.Router not loading component

If you are using 0.3.x that won't work. Upgrade to 1.0.0 (I think beta is the latest) and try please.

component attribute is available from [email protected](see here and in CHANGELOG.MD - it was added in 1.0.0-aplpha) so it's not available 0.3.1

Also refer to my answer for a similar post - https://stackoverflow.com/questions/40089948/angular-ui-router-works-with-template-but-not-component

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Oct 28, 2016 at 19:49

Mahesh

1,11910 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leo Over a year ago

Thank you! I checked my dependencies and I am using angular-ui-router 0.3.

Stanislav Ostapenko Over a year ago

Take a look stackoverflow.com/questions/40575749/…

Fernando Farias · Accepted Answer · 2016-10-28 19:40:34Z

0

try to change your states variable to this:

 var states = [
    {
        name: 'about',
        url: '/about',
        template: '<about></about>'
    }
]

Unfortunately ui-router guide to components doesn't seem explain in this way, I'll keep looking more to tell you why.

answered Oct 28, 2016 at 19:40

Fernando Farias

1961 silver badge8 bronze badges

1 Comment

mmey Over a year ago

Check the version and have a look at github.com/angular-ui/ui-router/issues/2627

Collectives™ on Stack Overflow

AngularJS : ui-router components not showing

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related