Angularjs UI router submodules and URLs - angularjs

Question

I have an app where a module looks at the URL. If the URL has anything past the "Document" section then one state is set using the information beyond that URL. If the URL has nothing beyond that point, then another state is set. So the two URLs are ...
www.xyz.com/Document/
and
www.xyz.com/Document/someData
I am currently solving the problem as below. This works, but I really need the two states to be in the same module and I can't figure out how to make that happen.
So, instead of the second state applying to app.documentEmpty, I want it to apply to app.document.empty.
angular
.module('app.document', [
'app.document.worksheet',
'app.document.tableOfContents',
'app.document.properties',
'app.document.bibliography',
'app.document.inputs',
'app.document.datasets',
'app.document.fileAsFunction',
'app.document.importedFunctions',
'app.document.directory'
])
.config(config);
/** #ngInject */
function config($stateProvider, $translatePartialLoaderProvider, msApiProvider, msNavigationServiceProvider)
{
$stateProvider.state('app.document', {
url : '/Document/{path:.*}/',
views : {
'content#app': {
templateUrl: 'app/main/apps/document/worksheet/worksheet.html',
controller : 'DocumentController as vm'
}
},
resolve : {
Documents: function (msApi)
{
return msApi.resolve('document.documents#get');
},
emptyDocuments: function (msApi)
{
return msApi.resolve('document.emptyList#get');
}
},
bodyClass: 'worksheet'
}).state('app.documentEmpty', {
url : '/Document/',
views : {
'content#app': {
templateUrl: 'app/main/apps/document/documentEmpty.html',
controller : 'DocumentController as vm'
}
},
resolve : {
Documents: function (msApi)
{
return msApi.resolve('document.documents#get');
},
emptyDocuments: function (msApi)
{
return msApi.resolve('document.emptyList#get');
}
},
bodyClass: 'document'
});
The problem is that whenever I remove the second state from above and replace it with something like what's below in the directory submodule, the URL is not recognized and the proper page is not loaded. There are several other submodules that do not depend upon URL and they work fine.
$stateProvider.state('app.document.directory', {
url : '/Document/',
views : {
'content#app': {
templateUrl: 'app/main/apps/document/directory/directory.html',
controller : 'DocumentController as vm'
}
},
bodyClass: 'directory'
});
Is it not possible to route to submodules via URLs?

Answer 1

You are confused with state and module.
The dot notation in ui-router indicates child states. So when you are doing this: $stateProvider.state('app.document.directory',{}), the views will only be populated IF your app.document exists and it has a ui-view directive in it. Added to that, the url parameters set in the state object will be appended AFTER the url defined in app.document state.
Say for your example above, you have defined a state like this:
$stateProvider.state('app.document', {
url : '/Document/{path:.*}/',
//... omitted for brevity
Now, this will work:
.state('app.documentEmpty', {
url : '/Document/',
//... omitted for brevity
because app.document and app.documentEmpty are sibling states.
On the other hand, this will not work:
$stateProvider.state('app.document.directory', {
url : '/Document/',
//... omitted for brevity
because app.document.directory is the child state of app.document (child states are defined by the dot notation, i.e .directory)
So in order to work, you have to rethink of your states hierarchy. In your app.document.directory module, define a state app.documentDirectory (note that there is no dot after the document):
angular.module("app.document.directory",[])
.config('$stateProvider',function($stateProvider){
$stateProvider.state('app.documentDirectory',{ //not app.document.directory, because this will make it a child state of app.document
url:'/directory'
//omitted for brevity
})
});