CODEWITHSUNDEEP
angularjsangular-ui-router
2K01B5
2K01B5

Reputation: 1121

Rendering a component with Angular UI Router

I can't seem to get my 'nameDisplay' component to display when I change the url to '/nameDisplay'. It doesn't display any error, it just doesn't insert the template into the ui-view. If I use template in the 'state' instead of component then it works otherwise it displays nothing.

The versioning I'm using is: angular - 1.5.8 angular ui router - 0.3.1

angular.module('app.nameDisplay', [uiRouter])
.component('nameDisplay', {
    controller: function(){
        this.name = "Keir Beckett";
        this.age = 24;
        this.changeInfo = function(){
            this.name = "Golash Bista";
            this.age = 66;
        }
    },
    template: "" +
        "<div>" +
            "<h2>{{$ctrl.name}}</h2>" +
            "<h4>{{$ctrl.age}}</h4>" +
            "<button ng-click='$ctrl.changeInfo()'>Change Info</button>" +
        "</div>"
}).config(($stateProvider, $urlRouterProvider) => {
    $stateProvider.state('nameDisplay', {
        url: '/nameDisplay',
        component: 'nameDisplay'
    })
    .state("otherDisplay", {
        url: '/otherDisplay',
        template: '<h1>Other Display</h1>'
    });
    $urlRouterProvider.otherwise('/');
})
.name;

Upvotes: 1

Views: 1317

Answers (1)

Andreas J&#228;gle
Andreas J&#228;gle

Reputation: 12240

Using components directly in the ui-router config only works from ui-router 1.0.0 on. So you should either upgrade to the (currently still) beta version or use the 0.3.x style to include components using a template for <name-display></name-display>.

See my answer for a similar question here: Angular 1.5 - UI-Router, Resolve Object returning undefined values

Upvotes: 4

Related Questions