Menu
(AngularJS v1.2.0-rc.3 + Angular UI-Router v0.2.0)
In my index.html, I have the following code:
<div class="container" ui-view></div>
In my app.js, I have the following code:
$stateProvider
.state('projects', {
abstract: true,
url: '/projects',
template: '<ui-view />',
})
// below display properly
.state('projects.list', {
url: '',
templateUrl: 'views/project_list.html',
controller: 'ProjectListCtrl'
})
// below display properly
.state('projects.one', {
url: '/{projectId:[0-9]{1,8}}',
templateUrl: 'views/project_dashboard.html',
controller: 'ProjectCtrl'
})
// below does not display at all
.state('projects.one.campaigns', {
url: '/campaigns',
template: 'I cannot seem to display this text'
})
I can hit the following routes just fine: index.html/projects, index.html/projects/1, but I cannot hit this route: index.html/projects/1/campaigns
Does anyone know why I can't?
Bonus points if you can answer how I could display the projects.one.campaigns state on the same URL page as the projects.one state.
650
Nested routes are routes within other routes. In this tutorial, we will show you how to create a child route and display the child components. The Angular allows us to nest child routes under another child routes effectively creating a Tree of routes.
To recap, nested routes allow you to, at the route level, have a parent component control the rendering of a child component. Twitter's /messages route is the perfect example of this. With React Router, you have two options for creating nested routes.
We also see the sub routing or children routing for our components. That means, in our application, there is one root route, and other routes are for their respective components.
Routing in AngularJS is used when the user wants to navigate to different pages in an application but still wants it to be a single page application. AngularJS routes enable the user to create different URLs for different content in an application.
The reason is because projects.one matches before projects.one.campaigns
Add a projects.one abstract state and then add a projects.one.default state with the templateUrl.
.state('projects.one', {
url: '/{projectId:[0-9]{1,8}}',
abstract:true,
template: '<ui-view/>',
})
.state('projects.one.default', {
url: '',
templateUrl: 'views/project_dashboard.html',
controller: 'ProjectCtrl'
})
.state('projects.one.campaigns', {
url: '/campaigns',
template: 'I cannot seem to display this text'
}
To display the template of the campaigns on the same page of the projects.one you should not use a state but a directive instead and toggle with ng-show on the same page.
156
I just spent whole day dealing with this problem.
I found out, that you don't need abstract states at all!
Try this: index.html:
<div class="container"><ui-view/></div>
use directive ui-view as a tag in the top level template.
Now all your nested templates wrap like this:
<ui-view>
<div>
template code
</div>
</ui-view>
and now you can just:
$stateProvider
.state('list', {
url: '',
templateUrl: 'views/project_list.html',
controller: 'ProjectListCtrl'
})
// below display properly
.state('one', {
url: '/{projectId:[0-9]{1,8}}',
templateUrl: 'views/project_dashboard.html',
controller: 'ProjectCtrl'
})
// below does not display at all
.state('one.campaigns', {
url: '/campaigns',
template: 'I cannot seem to display this text'
})
I needed general solution for the nesting and this works. Now you can create very deep nesting easily (for example one.campaing.group.member.note). If you will use ui-view on the top level and wrap all templates with the ui-view, they contact of each template will replace content of the top level ui-view (which is empty).
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
