Menu
Can someone explain how I can route to a Url using parameters?
E.g. id like to click on a product and open more info of the product by Id.
My Routing so far ...
angular.module('shop', ["customFilters", "cart", "ngRoute"])
.config(function ($routeProvider){
$routeProvider.when("/complete", {
templateUrl: "../app/views/orderComplete.html"
});
$routeProvider.when("/placeorder", {
templateUrl: "../app/views/placeOrder.html"
});
$routeProvider.when("/checkout", {
templateUrl: "../app/views/checkoutSummary.html"
});
$routeProvider.when("/products", {
templateUrl: "../app/views/productList.html"
});
$routeProvider.when("/product:", {
templateUrl: "../app/views/product.html"
});
$routeProvider.otherwise({
templateUrl: "../app/views/productList.html"
});
});
So By clicking ...
<a class="btn btn-default" href="#/product/{{item.id}}">More Info</a>
Id like to be routed to product/{{id}}.html ...
Can someone advise what I am missing in ...
$routeProvider.when("/product:id", {
templateUrl: "../app/views/product.html"
});
708
To access the route parameters, we use route.snapshot , which is the ActivatedRouteSnapshot that contains information about the active route at that particular moment in time. The URL that matches the route provides the productId . Angular uses the productId to display the details for each unique product.
The $routeParams service allows you to retrieve the current set of route parameters. Requires the ngRoute module to be installed. The route parameters are a combination of $location 's search() and path() . The path parameters are extracted when the $route path is matched.
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.
We use $routeProvider to configure the routes. The config() takes a function that takes the $routeProvider as a parameter and the routing configuration goes inside the function. The $routeProvider is a simple API that accepts either when() or otherwise() method. We need to install the ngRoute module.
2 things, but you are basically there.
First you are missing a slash before the URL param. Happens to the best of us.
routeProvider.when("/product/:id", {
templateUrl: "../app/views/product.html"
});
Secondly you should use ng-href instead href when you have dynamic URL params.
<a ng-href="#/product/{{item.id}}">More Info</a>
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
