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
Related
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.
I have state as follow. I can navigate from app to app.child1. But I cannot navigate from app.child1 to app.child1.child2. There is no error in browser console. Do note that I am developing an ionic application but i dont think that this is ionic issue.
app.state('app', {
url: '/app',
abstract: true,
templateUrl: '',
controller: ''
})
.state('app.child1', {
url: '/app',
views: {
'menuContent': {
templateUrl: '',
controller: ''
}
}
})
.state('app.child1.child2', {
url: '/app/child1/child2',
views: {
'menuContent': {
templateUrl: '',
controller: ''
}
}
})
Navigation:
<button ui-sref="app.child1.child2">Change Page</button>
There is a working plunker
There are few issues with the state definition, which are covered in comments below:
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'app.tpl.thml',
controller: 'appCtrl'
})
.state('app.child1', {
// child1 should have url part /child1
// while the /app is inherited from parent
//url: '/app',
url:'/child1',
views: {
'menuContent': {
templateUrl: 'child1.tpl.html',
controller: 'child1Ctrl'
}
}
})
.state('app.child1.child2', {
// all parts are inherited from parents
// so just /child2 is enough
//url: '/app/child1/child2',
url: '/child2',
views: {
// we target named view in a grand parent
// not in parent, we need to use the absolute name
// 'menuContent': {
'menuContent#app': {
templateUrl: 'child2.tpl.html',
controller: 'child2Ctrl'
}
}
})
These links will work now
<a href="#/app/child1">
<a href="#/app/child1/child2">
<a ui-sref="app.child1">
<a ui-sref="app.child1.child2">
Check it in action here
Your states don't have a template (templateUrl: ''). They should have a template with ui-view directive where it's child state can be injected.
Is it possible to tell a specific child to not use the parent html template using abstract set to true ?
$stateProvider
.state('contacts', {
abstract: true,
url: '/:my_id/contacts',
templateUrl: 'contacts.html'
})
.state('contacts.list', {
url: 'list',
// loaded into ui-view of parent's template
templateUrl: 'contacts.list.html'
})
.state('contacts.detail', {
url: 'detail',
'dontUseParentTemplate': true, // something like that
// loaded into ui-view of parent's template
templateUrl: 'contacts.detail.html'
})
I'm new to ui-router and can't get layout.directory.teams or layout.directory.people to load their respective templates. I expect those templates to be loaded in the ui-viewon the layout state's template.
/dashboard works fine...the dashboard.html template is loaded in the ui-view in content.html template.
/directory/teams doesn't load the teams.html template.
/directory/people doesn't load the people.html template.
.state('layout', {
abstract: true,
templateUrl: "components/common/content.html"
})
.state('layout.dashboard', {
url: "/dashboard",
controller: 'DashboardCtrl',
controllerAs: 'dashboard',
templateUrl: "app/features/dashboard/views/dashboard.html",
})
.state('layout.directory', {
abstract: true,
url: "/directory"
})
.state('layout.directory.teams', {
url: "/teams",
controller: 'DirectoryCtrl',
controllerAs: 'directory',
templateUrl: "app/features/directory/views/teams.html",
})
.state('layout.directory.people', {
url: "/people",
controller: 'DirectoryCtrl',
controllerAs: 'directory',
templateUrl: "app/features/directory/views/people.html",
})
A child state renders its template in the template of its parent where ui-view directive is, even if the parent is abstract.
So, in your case, add ui-view to the template of layout.directory state:
.state('layout.directory', {
abstract: true,
url: "/directory",
template: "<div ui-view></div>"
})
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