Angular Template UI-Router templateUrl
I am still learning UI-Router for AngularJS and was hoping to get some help. I am using the functionality of nested views, but am running into some hiccups. My top level parent status works, but as soon as I start creating children, the template url takes effect. It's as if templateUrl is not dynamic to its top level parent. Have I named my template / view files incorrectly? I did my best to follow the contact example provided on the repo.
projectsApp.js
var app = angular.module('scynergyApp.projects', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouteProvider){
$stateProvider
//////////////
// Projects //
//////////////
.state('projects',{
url: '/projects',
templateUrl: 'app/projects/projects.html' // THIS TEMPLATE URL WORKS
})
/////////////////////////
// Projects > Details ///
/////////////////////////
.state('projects.details', {
url: '/details',
templateUrl: 'app/projects/projects.details.html' // THIS TEMPLATE URL DOESNT WORK -> only if its '../app/projects/projects.details.html'
})
///////////////////////////////////
// Projects > Details > Overview //
///////////////////////////////////
.state('projects.details.overview', {
url: '/overview',
templateUrl: 'app/projects/projects.details.overview.html' // THIS TEMPLATE URL DOESNT WORK -> only if its '../app/projects/projects.details.html'
});
}]);
File tree
public
app
projects
ProjectsController.js
projectsApp.js //dependency of app.js
projects.html
projects.details.html
projects.details.overview.html
app.js
Any direction in this regard would be very helpful. Thanks you
+3
source to share