I have a stateConfig with a inheritance hierarchy as follows dep->chan->ying. However when i issue $state.go('ying') i see the url changing from dep/opt to dep/opt/test but the template app/ying.html doesn't load! How to get the template loaded on child state transition especially when the parent doesn't have abstract as true?
function config ($stateProvider) {
$stateProvider
.state('chan', {
parent : 'dep',
url : '/opt',
params : {
},
reloadOnSearch : false,
template : '<chan></chan>'
})
.state('ying', {
parent : 'chan',
url : '/test',
templateUrl : '/app/ying.html',
resolve : {
access : access
},
onEnter : onEnter
});
}
Related
In my project I have displayed my navigation menus using :
function config($stateProvider, msNavigationServiceProvider){
$stateProvider.state('app.contacts', {
url : '/contacts',
views : {
'content#app': {
templateUrl: 'app/main/apps/contacts/contacts.html',
controller : 'ContactsController as vm'
}
},
resolve: {
}
});
//For Navigation
msNavigationServiceProvider.saveItem('apps.contacts', {
title : 'Contacts',
icon : 'icon-account-box',
state : 'app.contacts',
weight: 10
});
}
Now I want to show navigation on a condition that when super admin has assigned the sub user its permission. So what I should do in that condition?
Until now I tried adding this $stateProvider.state and msNavigationServiceProvider.saveItem in if condition, where in if contained a response from a service (a service which defines which items should appear in navigation), but this isn't working, calling of service is not allowed in config.
So what should I do for this?
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?
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
})
});
I work on a project jhipster
I have had a blockage is part of angularjs, I would like to integrate a menu in the admin profile so
I modified scripts/app/admin.js but nothing happens.
'use strict';
angular.module('pmappApp').config(function($stateProvider) {
$stateProvider.state('admin', {
'abstract' : true,
parent : 'site',
views : {
'gmenu#' : {
templateUrl : 'scripts/app/admin/gmenu/gmenu.html',
controller : 'GmenuController'
}
}
});
});
By using
$stateProvider.state('admin', {
'abstract' : true,
parent : 'site',
views : {
'gmenu#' : {
templateUrl : 'scripts/app/admin/gmenu/gmenu.html',
controller : 'GmenuController'
}
}
});
I can see the additional menu are properly inserted while accessing /audits
I am trying to implement nested states using stateProvider. Facing issues while loading the nested states using url-routing. I have created two independent states and 2 nested states for one of the inndependent state. Please check the state configuration below:
.state('state1',{
url : "/page1",
templateUrl : "/views/page1.html",
contoller : 'page1ctrl'
})
.state('state2', {
url : "/page2",
templateUrl : "/views/page2.html",
controller : 'page2ctrl'
})
state('state2.nestedstate1', {
url : "/:nestedstate1", //passing as parameter
templateUrl : "/views/temp1.html",
controller : 'page2ctrl'
})
.state('state2.nestedstate1.nestedstate2', {
url : "/nestedstate2/:param1/:param2",
templateUrl : "/views/temp2.html",
controller : 'ctrl'
})
Issue : If I try to load complete page directly using complete url index.html/page2/nestedstate1/nestedstate2/fname/lname, it will first load data from last child state nestedstate2 and then fall back to its parent state 'nestedstate1' and also updates the url to index.html/page2/nestedstate1.
Required behaviour is to execute parent state first then the child state. For Example, nestedstate1 is necessary to load before nestedstate2.
Please suggest if I am missing any configuration.
Thanks
I created working example here. It is 1:1 to your scenario.
In the above script I found only one typo:
// missing dot
state('state2.nestedstate1', {
// should be
.state('state2.nestedstate1', {
The example is then working, while using these calls:
<a ui-sref="state1">
// ui-sref
<a ui-sref="state2">
<a ui-sref="state2.nestedstate1({nestedstate1: 'theNestedStateA'})">
<a ui-sref="state2.nestedstate1.nestedstate2({
nestedstate1: 'theNestedStateB', param1: 'value1' ,param2: 'value2'})">
// href
<a href="#/page2">
<a href="#/page2/nestedstate0">
<a href="#/page2/nestedstate1/nestedstate2/fname/lname">
All the rest should be almost the same. You can compare this working version with your local code, to find out what is wrong...
Check it here
Extend
Each view in (state2 chain) is provided with its own controller
.state('state2', {
url : "/page2",
templateUrl : "/views/page2.html",
controller : 'page2ctrl'
})
.state('state2.nestedstate1', {
url : "/:nestedstate1", //passing as parameter
templateUrl : "/views/temp1.html",
controller : 'page2Nestedctrl'
})
.state('state2.nestedstate1.nestedstate2', {
url : "/nestedstate2/:param1/:param2",
templateUrl : "/views/temp2.html",
controller : 'ctrl'
})
And they are like this:
.controller('page2ctrl', ['$scope', function ($scope) {
console.log('page2ctrl')
}])
.controller('page2Nestedctrl', ['$scope', function ($scope) {
console.log('page2Nestedctrl')
}])
.controller('ctrl', ['$scope', function ($scope) {
console.log('ctrl')
}])
Then when navigating to url: page2/nestedstate1/nestedstate2/fname/lname, we can see this in console:
page2ctrl
page2Nestedctrl
ctrl
And that should show, that all the states are initiated in expected order
Is my $stateProvider:
$stateProvider
.state('home', {
url : '/',
templateUrl : '/admindesktop/templates/main/',
controller : 'AdminDesktopMainController'
}).state('company', {
url : '/company',
templateUrl : '/admindesktop/templates/grid/',
controller : 'CompanyGridController'
}).state('company.detail', {
url : '/{id:\d+}', //id is
templateUrl : '/admindesktop/templates/company/detail/',
controller : 'CompanyDetailController'
});
It's work for 'company' state (I use ui-sref), but this code not work (called from 'company' state):
$state.go('.detail', {
id: $scope.selectedItem.id //selectedItem and id is defined
});
I read official docs and answers from StackOverflow, but I don't found solution. I can't use ui-sref, I use ui-grid, and new state opened after select one row from table for editing.
What i do wrong?
What would always work is the full state definition:
// instead of this
// $state.go('.detail', {
// use this
$state.go('company.detail', {
id: $scope.selectedItem.id //selectedItem and id is defined
});
In doc there are defined these options, but they depend on CURRENT state:
to string
Absolute state name or relative state path. Some examples:
$state.go('contact.detail') - will go to the contact.detail state
$state.go('^') - will go to a parent state
$state.go('^.sibling') - will go to a sibling state
$state.go('.child.grandchild') - will go to grandchild state
My error is in regular expression, really:
.state('company.detail', {
url : '/{id:\d*}',
templateUrl : '/admindesktop/templates/company/detail/',
controller : 'CompanyDetailController'
})
{id:\d*} worked (integer id).
To load the current state. Check this out.
$state.go($state.current, {}, {reload: true}); //second parameter is for $stateParams
Reference