I have one parent view and many child views. Is it possible to specify state for one of this child as for grandchild, but without specifying current child name in state and how?
So, in my configuration I want to have something like this:
.state("parent", {
url: "" // Resulting url is /
})
.state("parent.child", {
url: /ChildUrl // Resulting url is /ChildUrl/
})
.state("parent.{some param}.grandchild", {
url: "" // Resulting url is /ChildUrl/
})
OR How to change one child view with another without changing url in browser without grandchild solution?
Use inside the parent template.
<div class="parentTemplate">
<h1>Parent Title</h1>
<ui-view></ui-view>
</div>
child1 template:
<div class="child1Template">
<h1>Child1 Title</h1>
</div>
child2 template:
<div class="child2Template">
<h1>Child2 Title</h1>
</div>
The state config:
.state("parent", {
url: "",
templateUrl: "templates/parent-template.html"
})
.state("parent.child1", {
templateUrl: "templates/child1-template.html"
})
.state("parent.child2", {
templateUrl: "templates/child2-template.html",
params: { 'child2Param': 'Default' }
})
Going to parent.child1 or parent.child2 will be at / however the <ui-view> directive will be filled with the appropriate child templates. You do not need a URL to navigate between states. Inject $state into the controller with the navigation and use $state.go('parent.child1'). If you need parameters to be passed define them in the params property on each states and invoke the change in states with $state.go('parent.child2', {'child2Param', someObject.withDynamicValue }.
So, finally solved it with removing url parameter in states configuration for parent view and child view which could be represented as a grandchild. It works in way that I need
Related
I'm trying to use angular ui-router in my project and I'm running into an issue about maintaining url parameters in the parent route while adding child ones...
I have a settings page with the following route: /settings/:messageCode/:status
And now I need to add a piece of template that changes depending on the route so the new display looks like this: https://imgur.com/a/dHKzVD6
<div>
<div id="sidebar">...</div>
<div id="topbar">...</div>
<div ui-view>
<!-- This is the variable content depending on the route -->
</div>
</div>
The new routes I need to add are the following:
/settings/studio
/settings/payments
And this is my code for the nested routing
...
$stateProvider
.state("register", {...})
.state("settings", {
url: "/settings", // the objective is to keep the previous route "/status/:messageCode/:status"
templateUrl: 'settings/settings.view.html',
controller: 'SettingsCtrl as vm',
params: {
messageCode: {
value: null,
squash: true,
dynamic: true,
},
success: {
value: null,
squash: true,
},
})
.state("settings.studio", {
url: "/studio",
templateUrl: 'template-tab-studio.html',
controller: 'SettingsCtrl as vm',
})
.state("settings.payments", {
url: "/payments",
templateUrl: 'template-tab-payments.html',
controller: 'SettingsCtrl as vm',
})
At the moment, the routing is working fine, but I lost the URL params on the parent component (settings home), while adding its new children without having to add the url parameters to all childrens.
The problem of having to add the URL params to all children, is that I'll need to add many more views, so having to maintain all that routes will complicate things.
Is there a way to keep the original route in the parent (/settings/:messageCode/:status) while adding children so they can also recieve that paremeters?
Target routes would look like this: /settings/{dinamicView}/:messageCode/:status.
can't get what parameters do you mean, to pass variables to child route you could use resolve
to keep previous route change url: "/settings" to url: "settings"
How to configure in ui-router a parent/children relationship where siblings coexist in parent page? I can't make child state multiple named views working.
This is my parent page:parent.html:
<div> I have two child pages:
child page1 detail: <ui-view /> and
child page2 detail:<ui-view />.
I need both pages
</div>
I don't know how to or if I should use multiple-named views since multiple named views seem parallel and separable rather than wrapped around by other text like in the code above.
My ui router config:
$stateProvider
.state('parent', {
url: '/parent',
templateUrl: 'parent.html'
})
.state('parent.children', {
url: '/children',
views: {
'child1': {
templateUrl: 'child1.html'
},
'child2': {
templateUrl: 'child2.html'
}
}
});
The unnamed ui-view only allows one child to be plugged in.
See code in
Plunker
The <ui-view>s in your example are incorrect. It's not a self-closing tag and when ui-view is used as the element instead of an attribute directive you need a name attribute to use named views. If you change your parent.html to the following it should work.
<div> I have two child pages:
child page1 detail: <ui-view name="child1"></ui-view> and
child page2 detail:<ui-view name="child2"></ui-view>.
I need both pages
</div>
I'm developing an application where I have the use for a child state. The purpose of making a child state is
To inherit the resolve
To inherit the url base
When I navigate to the child state, the parent state's view and controller is initialized. The child controller isn't initialized at all, and the view isn't showing at all. One thing that I think is weird is that the child view is actually loaded over XHR, but then it never seems to appear.
How can I make the child state's view appear, and the child state's controller initialize with resolves from the parent state?
.state('restaurant', {
url: "/{city:[a-zA-ZåäöÅÖÄ]{2,}}/{restaurantUrl:[a-zA_ZåäöÅÄÖ\-]{2,}}",
views: {
"main": {
templateUrl: "/views/restaurant.html",
controller: "RestaurantCtrl",
resolve: {
restaurant: function($q, $stateParams, RestaurantsSrvc) {
/*Some stuff going on that returns a promise*/
}
}
}
}
})
.state('restaurant.checkout', {
url: "/checkout",
views: {
"main": {
templateUrl: "/views/checkout.html",
controller: "CheckoutCtrl"
}
}
})
Add the <div ui-view="main"></div> to restaurant.html. Populating ui-view elements outside of the parent template is apparently not possible.
Also make sure that there is one ui-view per template with child states. When you have only one place to insert child templates, don't use named views, they are for cases where multiple child views need to be shown at the same time. The sketch in the documentation illustrates this use case nicely.
Also note that by default the parent view is shown when a child state is active, because the ui-view for the child is within the parent template. If you need to hide the parent stuff (or just parts of it) use ng-hide with the $state service as indicated by this answer.
'update-approved-product-campaign-ad' this is the child state of 'product-campaigns.product-campaign-detail' when i call child state through ui-sref parent state view gets called along with child state view which i don't want. I want only child state view.
i solved this issue by wrapping the parent view with <div ui-view="">
This will override the ui-view with the child when navigating to a child state, otherwise it will contain the patent state's view.
This can be done using view targeting.
Say you have an unnamed ui-view for the parent at the root. When the child is activated, it can take over the parent's unnamed view using targeted views. The child view can put its own content directly into the parent's view:
var app = angular.module("plunker", ['ui.router'])
app.config(function($stateProvider) {
$stateProvider.state('parent', {
url: "",
template: "<a ui-sref='.child'>Go to child</a><h1>Parent</h1>"
}).state('parent.child', {
url: '/child',
views: {
"#": {
template: "<a ui-sref='^'>Back to parent</a><h1>child</h1>"
}
}
})
})
or it could replace the parent view with a template that just has a nested ui-view, which it in turn targets
var app = angular.module("plunker", ['ui.router'])
app.config(function($stateProvider) {
$stateProvider.state('parent', {
url: "",
template: "<a ui-sref='.child'>Go to child</a><h1>Parent</h1>"
}).state('parent.child', {
url: '/child',
views: {
"#": {
template: "<small>parent ui-view overridden by parent.child</small> <div ui-view='child'/>"
},
"child#parent.child": {
template: "<a ui-sref='^'>Back to parent</a><h1>child</h1>"
}
}
})
})
Targeted named views are "viewname#statename". The named view "#" means target the view named empty string ("") at (#) the root state ("").
http://plnkr.co/edit/iff63xbNWCbK9MEPMb4f?p=preview
As far as i know its not possible to load only the child view. Whenever a childs view is loaded, its parents' view is loaded too alongwith it.
I'm using Angular's ui-router on my application to try and route to child views of a main view. Both the main and the child have their own associated IDs. Currently I can navigate to the parent, but my link to the child is not working.
In my Application.js
$stateProvider
//Working Route
.state('Project', {
url: '/Project/{projectId}',
views: {
"ContentMain" : {
templateUrl: "/Scripts/Dashboard/templates/MainContent/ProjectMainContent.html",
controller: function ($stateParams) {
console.log("Project state hit!");
}
},
...
}
})
//Non-Working Route
.state('Project.ViewResource', {
url: '/Resource/:resourceId',
parent: 'Project',
views: {
"ContentMain" : {
templateUrl: "/Scripts/Dashboard/templates/MainContent/ProjectResourceViewContent.html"
controller: function ($stateParams) {
console.log("Project.ViewResource state hit!");
}
},
...
}
});
In my HTML:
<!-- Working Link-->
<a ui-sref="Project({ projectId: 5 })"><h3> My Projects </h3></a>
<!-- Non-working Links -->
<a ui-sref="Project.ViewResource({ projectId: 5, resourceId: 3 })">View Project Resource. </a>
<a ui-sref="Project.ViewResource({ resourceId: 3})">I'm a Resource Image. </a>
The first link works, however when I click either of the "non-working" child links my browser updates to: "Home/Index/#/Project/5/Resource/3" which is the desired route, however the page content
Any idea where I'm going wrong?
Edit1: To add the lines of code in the 'views' object which should be swapping out.
Edit2: To further demonstrate the issue, I've added the controller code blocks. When I hit the first html link, my console outputs "Project state hit!" When I click either of the non-working links, there is no new output to the console. Ie, the route is likely not being hit.
Figured out what was happening. After taking a closer look at the document on multiple named views here, I realized that my child view was searching for ui-view tags within the parent template, rather than the root template. Essentially, my child was trying to nest within my parent, while my desired behavior was to replace the parent views.
So, to target ui-views within the root, my solution looked like:
.state('Project.Resource', {
url: '/Resource/{resourceId}',
parent: 'Project',
views: {
"MainControls#": { templateUrl: "/Scripts/Dashboard/templates/MainControls/MainControls.html" },
"ContentMain#": {
...
},
...
}
})