I have been diving into a tutorial on egghead.io that delves into application architecture, tweaking certain components to fit my specific application needs.
Just a heads up, I am relatively new to Angular, so I'm hoping the issue at hand is easy to identify.
I've structured my controllers and templates in a hierarchical manner for my app, using ui-router.
Below is the code snippet for my app.start.js definition and dependencies:
angular.module('sb', [
'ui.router',
'angularLocalStorage',
'events',
'user'
]
After that, I proceeded to define my events.js controller along with its dependencies and 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'
},
}
})
})
Everything seems to be working smoothly up to this point. However, when attempting to navigate to url.com/#/events/create, the template appears to be fetched based on Chrome developer tools but is not updating to display visibly on the site.
This leads me to my events-create.js file:
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, there is a ui-view="events" in my main HTML template.
If you have any insights or suggestions, they would be greatly appreciated!