AngularJS ui-router - template not displaying

Question

I've been following along on a tutorial on egghead.io showing application architecture, and changing relevant sections to suit my application's requirements.

Please keep in mind I'm fairly new to Angular, so hopefully this will be an easy issue to spot.

I've set up several controllers and templates in a hierarchical fashion for my application. I'm using ui-router.

Here is my app.start.js definition and dependencies

angular.module('sb', [
    'ui.router',
    'angularLocalStorage',
    'events',
    'user'
]

I then go on to define my events.js controller and dependencies, along with the stateProvider

angular.module('events', [
    'sb.models.events',
    'events.show',
    'events.list',
    'events.edit',
    'events.create'
])
    .config(function($stateProvider) {
        $stateProvider
            .state('sb.events', {
                url: '/',
                views: {
                    'events@': {
                        controller: 'EventsCtrl as evm',
                        templateUrl: 'app/events/list/event-list.tmpl.html'
                    },
                }
            })
    })

At this point, everything is working fine. However, when I try to navigate to url.com/#/events/create, I can see the template being retrieved in chrome developer tools, but it's not updating the actual visible template to show this.

This is my events-create.js

angular.module('events.create', [

])
    .config(function($stateProvider) {
        $stateProvider
            .state('sb.events.create', {
                url: 'events/create',
                templateUrl: 'app/events/create/event-create.tmpl.html',
                controller: 'EventsCreateCtrl as ecc',
            })
    })

and just to clarify, my main html template does have a ui-view="events"

Any pointers would be massively appreciated

No error is thrown at all, the first "view" loads fine, but it appears to be the sub-view which causes the issue. — user43138
– user43138, Commented May 9, 2015 at 18:39
List your directory structure and some of your html. Angular might be having issues finding your html file? — Matthew Brown
– Matthew Brown, Commented May 9, 2015 at 19:57
It doesn't appear to have issues finding the html templates. If I inspect the network, then I can see the returned template is loaded fine, but just not updated on the page — user43138
– user43138, Commented May 9, 2015 at 20:49

Erik Honn · Accepted Answer · 2015-05-10 00:46:00Z

2

It's hard to know for sure without knowing where your ui-views are (posting a bit of the html to show us how it's structured would help a lot in cases like this), but this would be my best guess from the given information:

The big question here is does your event-list.tmpl.html contain a ui-view? Because it needs one. When you are calling your state sb.events.create you are asking your router to load it inside the main ui-view of the sb.events-state. If none of the templates for that state actually contains a ui-view, it has no place to add the html.

If you actually wanted to replace the event-list template with the event-create template then you should call it sb.eventsCreate or similar, and/or load it into events@ in the same way as you are loading your events list.

Also, I assume this is not the issue since your events-list loads fine, but just in case it's not clear: Not that events@ assumes that the ui-view named events is located in the root. If the view is located in say sb the use either relative names (events, i.e. without the @) or events@sb.

edited May 10, 2015 at 0:46

answered May 10, 2015 at 0:31

Erik Honn

7,5665 gold badges36 silver badges42 bronze badges

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

1 Comment

user43138 Over a year ago

Thank you Erik, you hit the nail on the head. Although the ui-view="events" was in the root, I was missing an un-named ui-view.

GraehamF · Accepted Answer · 2015-12-15 18:03:21Z

1

Had similar symptoms, but my issue was that I had ng-view (ngRoute) instead of ui-view (ui-route) in my markup.

answered Dec 15, 2015 at 18:03

GraehamF

2,01925 silver badges24 bronze badges

Comments

GraehamF · Accepted Answer · 2016-03-30 00:40:13Z

0

Just had the same symptoms caused by a different issue: defining a state's url to be camelCase instead of hyphenated.

Instead of url: '/someUrl' have url: '/some-url'

answered Mar 30, 2016 at 0:40

GraehamF

2,01925 silver badges24 bronze badges

Collectives™ on Stack Overflow

AngularJS ui-router - template not displaying

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related