Route parameters not passing correctly

1. Understanding Route Parameters in AngularJS

AngularJS uses route parameters to pass dynamic values in URLs using $routeParams. These parameters help fetch specific data from a URL pattern.

Example of Route with Parameters:

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

Here, :id is a route parameter that gets dynamically assigned based on the URL.

2. Common Issues & Fixes

Fix 1: Ensure `$routeParams` is Injected in the Controller

If $routeParams is missing in the controller, parameters won’t be available.

Incorrect Code (Causes Error)

app.controller('UserCtrl', function($scope) {
    console.log($routeParams.id); //  Error: `$routeParams` is undefined
});

Corrected Code

app.controller('UserCtrl', function($scope, $routeParams) {
    console.log("User ID:", $routeParams.id); //  Correct: Logs the dynamic parameter
});

$routeParams must be injected into the controller.

Fix 2: Check Route URL Format

If the route definition does not match the actual URL, parameters won’t be passed.

Incorrect Route Definition

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

If you navigate to /user/123, AngularJS does not recognize 123 as a parameter.

Corrected Route Definition

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

Ensure that :id is included in the route definition.

Fix 3: Check How URL is Being Navigated

If you navigate incorrectly, parameters won’t be passed.

Incorrect Navigation (Causes Error)

<a href="/user/123">View User</a>  <!-- Reloads the page, breaking SPA -->

Corrected Navigation Using `ng-href`

<a ng-href="#/user/123">View User</a>  <!--  Uses AngularJS routing -->

Use ng-href and ensure the URL includes # for AngularJS.

Fix 4: Enable HTML5 Mode for Clean URLs

By default, AngularJS uses hash-based routing (#/route). If using HTML5 mode, ensure it’s configured properly.

Enable HTML5 Mode in `config`

app.config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
});

Now, routes work without #, like /user/123 instead of #/user/123.

Fix 5: Debug Route Changes Using `$rootScope`

Use $routeChangeStart to check if parameters are being passed.

app.run(function($rootScope) {
    $rootScope.$on("$routeChangeStart", function(event, next, current) {
        console.log("Changing route:", next);
    });
});

This logs route changes and helps debug missing parameters.

Fix 6: Use `$location.search()` for Query Parameters

If you are passing query parameters (?key=value), use $location.search().

Example of Query Parameters (`?id=123`)

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

app.controller('UserCtrl', function($scope, $location) {
    console.log($location.search().id); // Retrieves `id` from URL
});

Use $location.search() when working with ?id=value instead of /user/:id.

3. Summary & Best Practices

Issue	Solution
`$routeParams` is undefined	Inject `$routeParams` into the controller
Route URL does not match	Ensure route definition matches navigation
Direct link reloads the page	Use `ng-href="#/route"` instead of `<a href>`
HTML5 mode not enabled	Configure `$locationProvider.html5Mode(true)`
Query parameters (`?id=value`) missing	Use `$location.search()` instead of `$routeParams`
Debugging needed	Use `$rootScope.$on("$routeChangeStart")`