Trying to link to a child URL using Angular UI-Router (very new to this)
I have:-
app.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise("/products")
$stateProvider
.state('products', {
url: "/products",
templateUrl: "products.html",
})
.state('products.edit', {
url: "/:id",
templateUrl: "products.edit.html",
controller: function ($scope, $stateParams) {
$scope.id = $stateParams.id;
console.log($stateParams.id)
}
})
.state('customers', {
url: "/customers",
templateUrl: "customers.html",
});
//$locationProvider.html5Mode(true);
});
I can navigate to products and customers, but not the products.edit state.
Here is a PLUNKER
Because products.edit
is the child state of products
, the view of the former is to be embedded into the view of the latter. So in products.html
, you need to include a <ui-view>
where ui-router
will place the child view. Like this:
<div>
<h4>Products Page</h4>
<ui-view></ui-view>
</div>
See this updated plunker .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.