🧭 AngularJS Navigation & Router Reference – Complete Guide for SPA Routing (2025)

🧲 Introduction – Why Understand AngularJS Navigation & Router Reference?

In AngularJS Single Page Applications (SPAs), navigating between views without reloading the browser is crucial. AngularJS uses the ngRoute module for routing and provides built-in support for programmatic navigation, hash-based URL tracking, deep linking, and view injection through <ng-view>.

Understanding AngularJS navigation empowers developers to:

• Build seamless user experiences
• Navigate programmatically with $location
• Use $route and $routeParams for route-specific logic
• Manage browser history effectively

🎯 In this guide, you’ll learn:

• How AngularJS handles routing and navigation
• How to configure, control, and reference routes
• Useful APIs: $route, $location, $routeParams
• Real-world navigation patterns and routing tips

---

📦 Setting Up ngRoute in AngularJS

<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"]);

---

🛠️ Basic Route Configuration

app.config(function($routeProvider) {
  $routeProvider
    .when("/home", {
      templateUrl: "views/home.html",
      controller: "HomeCtrl"
    })
    .when("/about", {
      templateUrl: "views/about.html",
      controller: "AboutCtrl"
    })
    .otherwise({
      redirectTo: "/home"
    });
});

---

🔗 HTML Navigation with Hash URLs

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

<!-- View outlet -->
<div ng-view></div>

✅ These anchor tags change the route without reloading the page.

---

🔄 Programmatic Navigation using $location

AngularJS offers $location service to navigate using JavaScript:

$scope.goToAbout = function() {
  $location.path("/about");
};

🧾 You can call this on button click or any other user event.

---

📬 Route Parameters via $routeParams

If you define a route like /user/:id, use $routeParams to access it:

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

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

✅ /user/42 will set userId to 42.

---

🧾 AngularJS Router API Reference

Service / Directive	Purpose
$routeProvider	Configure routes during app setup
ng-view	Placeholder for dynamically injected view
$location	Read and change the URL
$routeParams	Access route parameters like :id
$route	Get route-specific info and metadata

---

📘 $location Methods – URL Control

Method	Description
$location.path()	Get or set current path
$location.search()	Read or write query parameters
$location.url()	Full URL manipulation
$location.hash()	Manage the hash fragment

Example:

$location.path('/products').search({ category: 'books' });

✅ Navigates to: #!/products?category=books

---

🔍 $route Object – Access Route Config

app.controller("Ctrl", function($scope, $route) {
  console.log($route.current.templateUrl);  // View being loaded
});

$route Property	Description
current	The currently active route config
routes	All route definitions
params	Route parameters passed in URL

---

🚦 Real-World Use Case – Button-Based Navigation

<button ng-click="navigateTo('contact')">Contact Us</button>

$scope.navigateTo = function(view) {
  $location.path('/' + view);
};

✅ Navigates to /contact using custom logic.

---

🛠️ Deep Linking with Bookmark Support

AngularJS enables deep linking via #! in URLs:

<a href="#!/product/123">View Product</a>

• Bookmarkable
• Sharable
• Supports back/forward navigation

✅ Ideal for SPAs needing SEO-friendly or user-friendly links.

---

⚙️ Best Practices for AngularJS Navigation

✔️ Use ng-view for dynamic routing
✔️ Use $location.path() to navigate programmatically
✔️ Always use named routes with :params for scalability
✔️ Sanitize $routeParams before use
✔️ Use otherwise() to redirect unknown paths

---

📌 Summary – Recap & Next Steps

AngularJS offers a powerful and straightforward routing system ideal for SPAs. With built-in services like $location, $routeParams, and ng-view, you can create dynamic, client-driven navigation flows with deep linking support.

🔍 Key Takeaways:

• AngularJS uses ngRoute for SPA navigation
• Use ng-view to load route-based templates
• Navigate using anchor tags or $location.path()
• Use $routeParams to access dynamic route variables

⚙️ Real-world Relevance:
Used in dashboards, portals, eCommerce apps, admin panels, and any app requiring SPA-style navigation.

---

❓ FAQ – AngularJS Navigation & Routing

---

❓ How do I change routes in AngularJS via code?
✅ Use $location.path('/new-route') to navigate programmatically.

---

❓ What is ng-view in AngularJS?
✅ It’s a directive that serves as a placeholder for injecting templates based on the current route.

---

❓ Can I access query parameters in AngularJS routes?
✅ Yes. Use $location.search() to read or write query strings.

---

❓ How do I create a default route for unknown URLs?
✅ Use .otherwise({ redirectTo: '/' }) in your $routeProvider config.

---

Share Now :