How can keep url parameters for state, after page refresh?
I have this state
.state('App.State', {
abstract: true,
url: '/App/:param',
templateUrl: '/page.html',
controller: 'pageCtrl',
params: {
'param': null,
},
})
I go to this state with this command
<a ui-sref="App.State({param: paramName})">{{paramName}}</a>
I go to the state, with the params that i want, but when i refresh page (f5) i loose the params, how can keep them after page refresh?
There is a plunker which does remove abstract: true from your code:
.state('App', {
template: '<div ui-view ></div>',
})
.state('App.State', {
//abstract: true,
url: '/App/:param',
templateUrl: 'page.html',
controller: 'pageCtrl',
params: {
'param': null,
},
})
And then we can use any kind of url (even F5 later) to get to that state
http://run.plnkr.co/WFREZ72rUUbD4ekc/#/App/SomeParam
http://run.plnkr.co/WFREZ72rUUbD4ekc/#/App/OtherParam
In case, we want to keep that state abstract - we cannot navigate to it. We need its child. There is other plunker
.state('App', {
template: '<div ui-view ></div>',
})
.state('App.State', {
//abstract: true,
url: '/App/:param',
templateUrl: 'page.html',
controller: 'pageCtrl',
params: {
'param': null,
},
})
.state('App.State.Child', {
url: "/",
template: '<h4> App.State.Child </h4>',
})
The ui-sref cannot be
<a ui-sref="App.State({param: 'xxx'})">
-- not working while abstract
we have to go to child
<a ui-sref="App.State.Child({param: 'yyy'})">
And these will work then
http://run.plnkr.co/217SWcbOjuv1k3YF/#/App/MyParam/
http://run.plnkr.co/217SWcbOjuv1k3YF/#/App/MyOtherParam/
To maintain the values you should add the parameters in the url like this:
url: '/App/:param'
And remove the params property.
Related
It doesn't work with the last one where there are three states. How do I make it work?
There is no error. The page itself doesn't load (It`s like I press link and nothing changes (except url in browser address line) )
.state('parent', {
url: '/home',
abstract: true,
template: '<ui-view/>'
})
.state('parent.index', {
url: '/index',
template: '<h1>test1</h1>'
})
.state('parent.contact', {
url: '/contact',
template: '<h1>test2</h1>'
})
.state('parent.contact.test', {
url: '/test',
template: '<h1>test3</h1>'
})
Try for this,
To be short, contact states are children of parentstate, so they can't have access of Test view, because it's related to test state.
So you need to write :
.state('parent.contact.test', {
url: "/test",
views: {
'Test#test' :{
templateUrl: "test.html"
}
}
})
I have states
.state('main', {
url: '/',
template: '<div ui-view=""></div>'
})
.state('main.header', {
url: 'header',
templateUrl: 'modules/core/views/header.html'
})
.state('main.header.sidemenu', {
url: '/sidemenu',
templateUrl: 'modules/admin/views/adminsidemenu.html'
})
.state('main.header.sidemenu.businesslist', {
url: '^/business/businesslist',
templateUrl:'modules/business/views/business.list.view.html',
})
.state('main.header.sidemenu.tabs', {
url: '',
templateUrl:'modules/business/views/tabs.business.view.html',
})
.state('main.header.sidemenu.tabs.profile', {
url: '^/business/profile',
templateUrl:'modules/business/views/tabs.business.view.html',
})
My html code in state->main.header.sidemenu.tabs.profile-> template
<li>
<a href="javascript:void(0)"
ui-sref="main.header.sidemenu.businesslist">XXXXX</a>
</li>
Then it throwing error Could not resolve 'branchUrl' from state ->main.header.sidemenu.tabs when I click anchor
How to solve this issue.
Can you please help me to this?
This error occurs when you have not defined the branchUrl state. Please check inside your state configuration and make sure branchUrl should be there.
This kind of error usually means, that some part of (js) code was not loaded. That the state which is inside of ui-sref is missing . You don't need to specify the parent, states work in an document oriented way so, instead of specifying parent: main, you could just change the state to main.header
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/main.html");
$stateProvider.state('app', {
abstract: true,
templateUrl: "url"
});
$stateProvider.state('main', {
url: '/main',
templateUrl: "url1"
});
$stateProvider.state('main.header', {
url: '/main/header',
templateUrl: "url2"
});
$stateProvider.state('main.header.sidemenu', {
url: "/main/header/sidemenu",
templateUrl: "url 3"
});
$stateProvider.state('main.header.sidemenu.businesslist', {
url: "/main/header/sidemenu/businesslist",
templateUrl: "url 4"
});
for deep nesting you need to define all the states . hope it will help you
I have states that look like this:
$stateProvider.state('base', {
url: '/base',
redirectTo: 'base.all',
template: '<div ui-view></div>'
})
.state('base.all', {
parent: 'base',
url: '?someQuery&another',
params: {
someQuery: null,
another: null
},
views: {
'': {
template: '<div>base.all</div>',
controller: function($stateParams){
console.log($stateParams.someQuery);//undefined
console.log($stateParams.another);//undefined
}
}
//some views
}
})
.state('base.all2', {
parent: 'base',
url: '/subPath?someQuery&another',
params: {
someQuery: null,
another: null
},
views: {
'': {
template: '<div>base.all2</div>',
controller: function($stateParams){
console.log($stateParams.someQuery);//foo
console.log($stateParams.another);//bar
}
}
//some views
}
});
I listen to the event $stateChangeStart and do $state.go when redirectTo is present.
My problem now is if I go to the url /base?someQuery=foo&another=bar
It will correctly go to the base.all-state but the $stateParams of the base.all-state will be empty. I don't want this state to have a subPath. The child state will only get the urlParameters set to $stateParams if it has its own subPath like /base/subPath?someQuery=foo&another=bar then it works fine and everything is set to $stateParams.
Is my attempt to have a subState with no subUrl, but only the queryParameters, possible? If so how?
It was as simple to not use the redirectTo and set parent state to abstract.
I think I was too blinded with the use of redirectTo.
And I'm not getting any warnings when routing /base, it seems it will automatically find the state base.all and everything works as expected.
I am trying to open the state 'profile.general' by default when I navigate to the parent state profile which loads the main template.
How do I activate the nested state for the ui-view when the /profile url is navigated to?
$urlRouterProvider.otherwise("/profile/general");
$stateProvider.state('profile', {
url: '/profile',
abtract: true,
views: {
"main": {
controller: 'ProfileCtrl',
templateUrl: 'src/app/profile/index.tpl.html'
}
}
}).state('profile.general', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-general.html'
//controller: 'ProfileCtrl'
}).state('profile.security', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-security.html'
}).state('profile.social', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-social.html'
}).state('profile.privacy', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-privacy.html'
}).state('profile.payments', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-payments.html'
}).state('profile.restrictions', {
//url: '/register/details',
templateUrl: 'src/app/profile/profile-restrictions.html'
});
})
HTML
<div id="profile-views" ui-view></div>
There is a working plunker
These lines should help:
$urlRouterProvider.when("/profile", "/profile/general");
$urlRouterProvider.otherwise("/profile/general");
And we should give url to the general sub state:
.state('profile.general', {
//url: '/register/details',
url: '/general',
templateUrl: 'src/app/profile/profile-general.html'
So, with these in place, we have .when redirection... which whenever user is targeting just the abstract state - does redirect to selected url.
Also, because we introduced the url for a child, we can use the .otherwise as the overall default state.
Other way how to do that, is to omit the url of one child (just exactly one child):
How to: Set up a default/index child state
Check it here
I have a problem to load second child of state. Url is changed, but page not loading.
.state('app', {
abstract: true,
template: '<ui-view/>',
controller: 'myControl',
data: {
requireLogin: true
}
})
.state('app.CarsList', {
params: { id: ':id' },
url: '/Companies/:name',
templateUrl: 'CarsList.html',
})
.state('app.CarsList.CarInfo', {// second child
url: '/Info',
templateUrl: "CarInfo.html"
})
There should be a ui-view in the CarsList.html, child states will load their templates into their parent's ui-view.
Check the Documentation