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"
}
}
})
Related
I want use nested views in AngularJS 1.6, with UI-router.
I have 3 states, the first is an abstract view named settings, and the second and the third are two views.
.state('settings', {
url: '/settings',
abstract: true,
template: '<ui-view />'
})
.state('settings.account', {
url: '/account',
templateUrl: './partials/settings/account.html',
resolve: {
loginRequired: loginRequired
}
})
.state('settings.password', {
url: '/password',
templateUrl: './partials/settings/password.html',
resolve: {
loginRequired: loginRequired
}
})
The problem is that nothing appears when I go to settings/account or settings/password...
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.
The issue I'm having is that for some reason when navigating to the users home aside from it not loading and causing my browser to freeze when I inspect the console. (I take out the abstract: true from app.user) in the console it shows the 's of my of app.user.base nested inside each other with the top being the mainview and the footer getting loading inside of it. What Am i doing wrong?
.state('app', {
abstract: true,
url: '',
template: '<ui-view/>'
})
.state('app.user', {
abstract: true,
url: '/user',
templateURL: 'app/user/user.html'
})
.state('app.user.base, {
url: '',
views: {
mainView: {
template: '<ui-view/>'
}
footer: {
templateUrl: 'app/user/views/footer.html',
controller: 'footerCtrl'
}
}
})
.state('app.user.base.home', {
url: '/home',
templateURL: 'app/user/views/home.html',
controller: 'uHomeCtrl'
})
.state('app.user.base.profile', {
url: '/profile',
templateURL: 'app/user/views/profile.html',
controller: 'uProfileCtrl'
})
.state('app.main, {
abstract: true,
url: '',
templateURL: 'app/main/main.html'
})
.state('app.main.home, {
url: '/home',
views: {
landing: {
templateUrl: 'app/main/views/landing.html',
controller: 'landingCtrl'
},
about: {
templateUrl: 'app/main/views/about.html',
controller: 'aboutCtrl'
}
}
})
not sure if you can have it the same url's '/home' in few places, please read this article about nested states I may help to fix you issue.
You need to make sure to remove url property from all the states you have that are not navigable. Do that first, then see what new errors you get. URLs are not at all required to be able to navigate to a state.
This might not even be possible, but I'm going to try anyway. In my website I have a couple of states defined with ui-router. One of these states should link to another domain. Is this possible?
$stateProvider
.state('index', {
url: "/index",
templateUrl: "views/home.html",
controller: "MainController",
ncyBreadcrumb: {
label: 'Home'
}
})
.state('about', {
url: "/about",
templateUrl: "views/about.html",
controller: "AboutController",
ncyBreadcrumb: {
label: 'About',
parent: 'index'
}
})
.state('Us', {
url: "/us",
parent: "about",
views : {
'#': {
templateUrl: 'views/us.html',
},
}
})
.when('contact', 'http://www.example.com')
UI router is handling internal application URL's. anyway you can achieve using script redirection.
$stateProvider.state('contact', {
url: '/',
template: 'Redirecting...<script>window.location="http://www.example.com"</script>'
});