In ngRoute you can do:
let params = {
template: "some template"
};
$routeProvider.when("/root/cardboards/deparments", params)
.when("/suppliers/:_supplier/cardboards/deparments", params);
How to achieve the same thing using ui-router?
Add a comment
|
1 Answer
If you really only have two states you can do:
$stateProvider.state({
name: 'cardboardDepartments',
url: '/root/cardboards/departments',
template: 'my template'
})
$stateProvider.state({
name: 'supplierCardboardDepartments',
url: '/suppliers/{supplierId}/cardboards/departments',
template: 'my template'
})
Slightly more fleshed out example, assuming UiRouter > 1.0.0, using parent property (instead of parent.child name convention), and using components. You can use $stateProvider to register your routes:
$stateProvider.state({
name: 'root',
url: '/root',
component: 'rootComponent'
})
$stateProvider.state({
name: 'cardboards',
parent: 'root',
url: '/cardboards',
component: 'cardboardsComponent'
})
$stateProvider.state({
name: 'cardboardsDepartments',
parent: 'cardboards',
url: '/departments',
component: 'cardboardsDepartmentsComponent'
})
$stateProvider.state({
name: 'suppliers',
url: '/suppliers',
component: 'suppliersComponent'
})
$stateProvider.state({
name: 'supplier',
parent: 'suppliers',
url: '/:supplierId',
component: 'supplierComponent'
})
$stateProvider.state({
name: 'supplierCardboards',
parent: 'supplier',
url: '/cardboards',
component: 'cardboardsComponent'
})
$stateProvider.state({
name: 'supplierCardboardsDepartments',
parent: 'supplierCardboards',
url: '/departments',
component: 'cardboardsDepartmentsComponent'
})
If you do have a nested structure as shown above and you want to maintain parent-child relationships but it doesn't make sense to nest multiple ui-views you should look into named views.
If you are using controllers and templates, you can just replace the component property on these state definitions to:
controller: 'cardboardsController',
template: 'your template'
You can check out UiRouter's tutorial here. The guide is also a great resource.
