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

Answer 1

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

Answer 2

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'

Answer 3

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.