Leo Leo - 1 month ago 6
AngularJS Question

AngularJS : ui-router components not showing

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>'
})

Answer

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 ui-router@1.0.0(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 - http://stackoverflow.com/questions/40089948/angular-ui-router-works-with-template-but-not-component