Using $routeParams to pass data between views

In AngularJS, $routeParams is a built-in service provided by the ngRoute module that allows you to capture and pass parameters between views and controllers when navigating between routes. It is especially useful in single-page applications (SPAs) where the URL changes, but the page does not fully reload. $routeParams allows for dynamic navigation and provides a simple mechanism for passing data between different views.

1. Setting Up ngRoute in AngularJS

Before you can use $routeParams, you must configure routing in your AngularJS application. The $routeProvider is part of the ngRoute module, and it allows you to define routes, templates, and controllers.

Include ngRoute in Your Application

To begin, you need to add the ngRoute module to your application. Make sure you have included the angular-route.js script.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-route.min.js"></script>

Include ngRoute in the Module Dependencies

var app = angular.module('myApp', ['ngRoute']);

Configure Routes

You configure the routes using the $routeProvider service within the config block. Here’s an example configuration of routes:

app.config(function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'home.html',
      controller: 'HomeController'
    })
    .when('/user/:userId', {
      templateUrl: 'user.html',
      controller: 'UserController'
    })
    .otherwise({
      redirectTo: '/home'
    });
});

In the route /user/:userId, :userId is a route parameter that can be passed and accessed using $routeParams.

2. Accessing Route Parameters with `$routeParams`

When navigating to a route that has parameters, you can access the parameters using $routeParams. These parameters are dynamic and can be used in your controllers to display data based on the URL.

Example of Accessing `$routeParams` in the Controller

For the route /user/:userId, you can access the userId parameter in the UserController like so:

app.controller('UserController', function($scope, $routeParams) {
  // Access the userId parameter from the URL
  $scope.userId = $routeParams.userId;
});

Template Example for Displaying Route Parameters

Here’s how you can use the route parameters in the template:

<!-- user.html -->
<div>
  <h2>User Profile</h2>
  <p>User ID: {{userId}}</p>
</div>

When the URL is /user/123, the value 123 will be accessible through $routeParams.userId, and the view will display User ID: 123.

3. Passing Data Between Views

The primary use of $routeParams is to pass data via the URL. When navigating to a new view, you can append data to the URL as part of the route parameters. The data can then be accessed in the target controller using $routeParams.

Example: Passing Data from Home to User View

Suppose you want to pass a user ID from the home page to the user profile page.

Home Controller (HomeController)

app.controller('HomeController', function($scope, $location) {
  $scope.goToUserProfile = function(userId) {
    // Redirect to the user profile page with the userId parameter
    $location.path('/user/' + userId);
  };
});

Home Template (home.html)

<!-- home.html -->
<div>
  <h1>Welcome Home</h1>
  <button ng-click="goToUserProfile(123)">Go to User 123 Profile</button>
</div>

User Controller (UserController)

app.controller('UserController', function($scope, $routeParams) {
  // Access the userId parameter from the URL
  $scope.userId = $routeParams.userId;
});

User Template (user.html)

<!-- user.html -->
<div>
  <h2>User Profile</h2>
  <p>User ID: {{userId}}</p>
</div>

In this case:

When the user clicks the button on the home page, they are redirected to /user/123.
The UserController will capture the userId parameter via $routeParams.userId and display it in the view.

4. Using `$routeParams` to Access Multiple Parameters

You can define multiple parameters in a route and access them through $routeParams. Here’s an example:

Configuring the Route with Multiple Parameters

jsCopyEdit$routeProvider
  .when('/user/:userId/post/:postId', {
    templateUrl: 'post.html',
    controller: 'PostController'
  });

Accessing Multiple Parameters in the Controller

In the controller for this route, you can access both parameters:

app.controller('PostController', function($scope, $routeParams) {
  // Access both userId and postId from the URL
  $scope.userId = $routeParams.userId;
  $scope.postId = $routeParams.postId;
});

Displaying Data in the Template

htmlCopyEdit<!-- post.html -->
<div>
  <h2>User Profile</h2>
  <p>User ID: {{userId}}</p>
  <p>Post ID: {{postId}}</p>
</div>

If the URL is /user/123/post/456, the values 123 and 456 will be captured by $routeParams and displayed in the template.

5. Using `$routeParams` to Control Navigation

You can use $routeParams to control navigation or make decisions in your controllers based on the data passed through the URL. For example, you could implement conditional logic in your controller based on the route parameter.

Example: Conditional Logic in Controller

app.controller('UserController', function($scope, $routeParams, $location) {
  var userId = $routeParams.userId;
  
  // Check if the userId is valid
  if (!userId || isNaN(userId)) {
    // Redirect to home if userId is invalid
    $location.path('/home');
  } else {
    $scope.userId = userId;
  }
});

In this example:

If the userId is missing or invalid, the user will be redirected to the home page.

6. Limitations of `$routeParams`

While $routeParams is convenient for passing simple data through the URL, there are a few limitations:

Limited to URL parameters: $routeParams can only pass data in the URL, making it less suitable for complex or sensitive data.
Data Exposure: Since the parameters are part of the URL, they can be visible in the browser’s address bar, which is not ideal for passing sensitive information.

If you need to pass more complex or secure data, you might want to consider using services or $rootScope for data sharing.