Previous

AngularJS Routing

Routing in AngularJS enables you to navigate between different views in your application. It helps in creating single-page applications (SPAs) by loading different content dynamically without the need to reload the entire page. The AngularJS ngRoute module is commonly used for handling routing, which allows you to map URLs to specific templates and controllers.

Key Concepts of AngularJS Routing

  1. $routeProvider: Configures the routes of the application.
  2. ng-view: Placeholder directive where the template for the route will be displayed.
  3. $location: Provides methods for interacting with the browser’s URL.
  4. $route: Provides information about the current route.

 

How to Set Up AngularJS Routing

Step 1: Include ngRoute Module

To use routing in AngularJS, first, you need to include the ngRoute module in your application.

Example:

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

Step 2: Define Routes Using $routeProvider

You configure the routes of your application using the $routeProvider inside the .config() block of your AngularJS module.

Example:

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

app.config(function($routeProvider) {
  $routeProvider
    .when('/home', {
      templateUrl: 'home.html',
      controller: 'homeCtrl'
    })
    .when('/about', {
      templateUrl: 'about.html',
      controller: 'aboutCtrl'
    })
    .otherwise({
      redirectTo: '/home'
    });
});
  • when('/route', { templateUrl, controller }): Defines a route, the template to be shown, and the controller that will be associated with that route.
  • otherwise({ redirectTo: '/home' }): Specifies the default route if no route matches.

Step 3: Add ng-view to the HTML Template

In the HTML template, you need to use the ng-view directive where the routed content will be inserted.

Example:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>AngularJS Routing</title>
</head>
<body>
  <div>
    <a href="#/home">Home</a> | 
    <a href="#/about">About</a>
  </div>
  
  <div ng-view></div>
  
  <script src="app.js"></script>
</body>
</html>
  • ng-view: A placeholder where the content for the selected route will be displayed.

 

Controllers for Each Route

For each route, you can define a controller that will manage the data and logic for that view.

Example of homeCtrl and aboutCtrl:

app.controller('homeCtrl', function($scope) {
  $scope.message = "Welcome to the Home Page!";
});

app.controller('aboutCtrl', function($scope) {
  $scope.message = "This is the About Page!";
});
  • homeCtrl and aboutCtrl are simple controllers where each one manages the message shown on the respective route.

 

Route Parameters

AngularJS allows you to pass parameters in the URL, which can be accessed by controllers.

Example of Route with Parameters:

$routeProvider.when('/user/:userId', {
  templateUrl: 'user.html',
  controller: 'userCtrl'
});
  • :userId is a parameter in the URL that will be passed to the controller.

 

Accessing Parameters in Controller:

app.controller('userCtrl', function($scope, $routeParams) {
  $scope.userId = $routeParams.userId;
});
  • $routeParams.userId: Retrieves the userId parameter from the URL.

 

Nested Routes

AngularJS also supports nested routes. You can define child routes within a parent route.

Example of Nested Routes:

$routeProvider
  .when('/parent', {
    templateUrl: 'parent.html',
    controller: 'parentCtrl',
    controllerAs: 'parent'
  })
  .when('/parent/child', {
    templateUrl: 'child.html',
    controller: 'childCtrl',
    controllerAs: 'child'
  });

In this case, parent.html could include an <ng-view></ng-view> tag, which will display the child route's content.

 

Using $location Service

The $location service provides methods for interacting with the browser's URL. It allows you to programmatically navigate to different routes.

Example:

app.controller('myCtrl', function($scope, $location) {
  $scope.changeRoute = function() {
    $location.path('/about');
  };
});
  • $location.path('/about'): Changes the route to /about programmatically.

 

Summary

AngularJS routing allows for seamless navigation within single-page applications, enabling dynamic loading of views based on the URL. Using $routeProvider, you can easily define routes, templates, and controllers, while the ng-view directive is used to display routed content. You can also pass route parameters, handle nested routes, and navigate programmatically with the $location service. With AngularJS routing, creating a responsive and interactive SPA is straightforward and efficient.

Previous