Course Progress 62%

AngularJS Routing

← AngularJS Animations AngularJS Application →

AngularJS Routing का उपयोग Single Page Application (SPA) बनाने के लिए किया जाता है। Routing की मदद से बिना page reload किए URL change किया जा सकता है और अलग-अलग views (pages) load किए जा सकते हैं। User को ऐसा लगता है जैसे multiple pages हैं, लेकिन असल में पूरा application एक ही page पर चलता है।

AngularJS में routing के लिए ngRoute module का उपयोग किया जाता है।

Routing क्या है और क्यों जरूरी है

Traditional websites में:

  • हर URL पर नया HTML page load होता है
  • Page reload होता है
  • Performance slow होती है

AngularJS Routing में:

  • Page reload नहीं होता
  • URL change होने पर सिर्फ view change होता है
  • Application fast और smooth बनता है

ngRoute Module क्या है

ngRoute AngularJS का official routing module है जो URL के आधार पर different templates और controllers load करता है।

Main components:

  • $routeProvider
  • ng-view
  • Routes configuration

ngRoute Include करना

Routing use करने के लिए पहले angular-route.js include करना जरूरी है।

<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>

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

Code Explanation

  • angular-route.min.js routing support देता है
  • "ngRoute" dependency add की गई है
  • बिना ngRoute routing काम नहीं करेगी

ng-view Directive

ng-view directive वह जगह define करता है जहाँ routed content load होगा।

<div ng-app="myApp">
  <div ng-view></div>
</div>

Code Explanation

  • ng-view placeholder की तरह काम करता है
  • Route match होने पर template यहाँ render होता है

Basic Routing Example

app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      template: "<h2>Home Page</h2>"
    })
    .when("/about", {
      template: "<h2>About Page</h2>"
    });
});

Code Explanation

  • $routeProvider.when() URL define करता है
  • / और /about दो अलग routes हैं
  • URL change होते ही view change हो जाता है

Routing with External Templates

Large applications में templates external files में रखे जाते हैं।

app.config(function($routeProvider) {
  $routeProvider
    .when("/home", {
      templateUrl: "home.html"
    })
    .when("/contact", {
      templateUrl: "contact.html"
    });
});

Code Explanation

  • templateUrl external HTML file load करता है
  • Code clean और maintainable बनता है

Routing with Controllers

हर route के लिए अलग controller assign किया जा सकता है।

app.config(function($routeProvider) {
  $routeProvider
    .when("/home", {
      templateUrl: "home.html",
      controller: "homeCtrl"
    })
    .when("/about", {
      templateUrl: "about.html",
      controller: "aboutCtrl"
    });
});

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

app.controller("aboutCtrl", function($scope) {
  $scope.message = "About Us Page";
});

Code Explanation

  • हर route का अपना controller है
  • Controllers view का data manage करते हैं
  • MVC structure clear रहता है

Navigation Links with Routing

<a href="#!/home">Home</a>
<a href="#!/about">About</a>

Code Explanation

  • #! hashbang routing का हिस्सा है
  • Browser reload नहीं होता
  • AngularJS route detect करता है

Default Route (otherwise)

अगर कोई route match न हो तो default page दिखाया जाता है।

$routeProvider
  .otherwise({
    redirectTo: "/home"
  });

Code Explanation

  • Invalid URL पर user को safe page पर भेजता है
  • 404-like issue avoid होता है

Route Parameters

URL से dynamic data pass किया जा सकता है।

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

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

Code Explanation

  • :id dynamic parameter है
  • $routeParams से value access होती है
  • Dynamic pages बनाना आसान होता है

Multiple Parameters Example

$routeProvider.when("/product/:category/:id", {
  templateUrl: "product.html",
  controller: "productCtrl"
});

Code Explanation

  • Multiple parameters support होते हैं
  • Complex URLs handle किए जा सकते हैं

Reload Behavior Control

$routeProvider.when("/home", {
  templateUrl: "home.html",
  reloadOnSearch: false
});

Code Explanation

  • URL query change होने पर reload avoid किया जा सकता है
  • Performance improve होती है

$route Service

$route current route information देता है।

app.controller("mainCtrl", function($scope, $route) {
  $scope.current = $route.current;
});

Code Explanation

  • Active route की details मिलती हैं
  • Advanced logic के लिए useful है

Route Change Events

AngularJS routing lifecycle events provide करता है।

Common events:

  • $routeChangeStart
  • $routeChangeSuccess
  • $routeChangeError
app.run(function($rootScope) {
  $rootScope.$on("$routeChangeStart", function() {
    console.log("Route changing...");
  });
});

Code Explanation

  • Route change पर event trigger होता है
  • Authentication और loader logic में useful

Routing Best Practices

  • Routes clear और meaningful रखें
  • Controllers lightweight रखें
  • Templates reusable बनाएं
  • Authentication routes centrally handle करें

Common Routing Mistakes

  • ng-view add करना भूल जाना
  • ngRoute include न करना
  • Incorrect template path
  • Controllers में heavy logic लिखना

Summary

इस chapter में आपने सीखा:

  • AngularJS Routing क्या है
  • ngRoute module का उपयोग
  • ng-view directive
  • Template और controller based routing
  • Route parameters
  • Route events और best practices
← AngularJS Animations AngularJS Application →
  • Home