Route Parameters in AngularJS

Key Concepts

Route parameters in AngularJS allow you to pass dynamic data through the URL. This is useful for creating dynamic routes where the content displayed depends on the parameters provided. The key concepts related to route parameters include:

• Defining Route Parameters
• Accessing Route Parameters
• Using Route Parameters in Controllers
• Optional Route Parameters
• Query Parameters
• Route Parameter Validation
• Route Parameter Updates
• Route Parameter Events

1. Defining Route Parameters

Route parameters are defined in the route configuration using a colon followed by the parameter name. For example, to define a route parameter named id, you would write:

        $routeProvider.when('/user/:id', {
            templateUrl: 'user.html',
            controller: 'UserController'
        });
    

In this example, :id is a route parameter that can be any value, such as /user/123.

2. Accessing Route Parameters

Route parameters can be accessed in the controller using the $routeParams service. This service provides an object containing all the route parameters.

Example:

        app.controller('UserController', function($scope, $routeParams) {
            $scope.userId = $routeParams.id;
        });
    

In this example, the id parameter from the URL is accessed and assigned to $scope.userId.

3. Using Route Parameters in Controllers

Route parameters are often used to fetch data from a server or to display specific content based on the parameter value. For example, you might use the id parameter to fetch user details from an API.

Example:

        app.controller('UserController', function($scope, $routeParams, $http) {
            $http.get('/api/users/' + $routeParams.id).then(function(response) {
                $scope.user = response.data;
            });
        });
    

In this example, the id parameter is used to make an HTTP request to fetch user data.

4. Optional Route Parameters

Optional route parameters are defined using a question mark after the parameter name. These parameters are not required for the route to match.

Example:

        $routeProvider.when('/product/:id?', {
            templateUrl: 'product.html',
            controller: 'ProductController'
        });
    

In this example, the id parameter is optional, so the route will match both /product and /product/123.

5. Query Parameters

Query parameters are additional parameters that can be passed in the URL after a question mark. These parameters are not part of the route definition but can be accessed using the $location service.

Example:

        app.controller('SearchController', function($scope, $location) {
            $scope.query = $location.search().q;
        });
    

In this example, the q query parameter is accessed and assigned to $scope.query.

6. Route Parameter Validation

Route parameter validation ensures that the parameters passed in the URL are valid. This can be done by checking the parameter value in the controller or by using custom route resolvers.

Example:

        app.controller('UserController', function($scope, $routeParams) {
            var id = parseInt($routeParams.id, 10);
            if (isNaN(id)) {
                $scope.error = 'Invalid user ID';
            } else {
                $scope.userId = id;
            }
        });
    

In this example, the id parameter is validated to ensure it is a valid number.

7. Route Parameter Updates

Route parameters can be updated dynamically using the $location service. This is useful for changing the URL without reloading the page.

Example:

        app.controller('UserController', function($scope, $location) {
            $scope.updateId = function(newId) {
                $location.path('/user/' + newId);
            };
        });
    

In this example, the updateId function updates the id parameter in the URL.

8. Route Parameter Events

AngularJS provides events that are triggered when route parameters change. These events can be used to perform actions when the route changes.

Example:

        app.run(function($rootScope) {
            $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
                console.log('Route changed to: ' + current.$$route.originalPath);
            });
        });
    

In this example, the $routeChangeSuccess event is used to log the new route path when the route changes.