![]()
1. What is AngularJS Routing?
Routing in AngularJS allows you to create single-page applications (SPA) by dynamically loading content without reloading the entire page. It helps in navigating between different views based on the URL.
Why Use Routing in AngularJS?
Single Page Application (SPA) Support – No full-page reloads.
Improved User Experience – Faster navigation.
Modular Development – Separate views for different components.
Better Maintainability – Easier to manage multiple views.
2. Setting Up AngularJS Routing
To enable routing, you need to include AngularJS route module:
<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.js"></script>
Then, configure routing in your AngularJS app.
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "home.html",
controller: "HomeController"
})
.when("/about", {
templateUrl: "about.html",
controller: "AboutController"
})
.otherwise({
redirectTo: "/"
});
});
Explanation:
when("/", { ... })→ Loadshome.htmlwhen the URL is/.when("/about", { ... })→ Loadsabout.htmlwhen the URL is/about.otherwise({ redirectTo: "/" })→ Redirects unknown routes to the homepage.
3. Creating Views (Templates)
Each route loads a different HTML template dynamically.
home.html
<h2>Home Page</h2>
<p>Welcome to the homepage.</p>
about.html
<h2>About Us</h2>
<p>Learn more about our team.</p>
4. Creating Controllers
Each route can have its own controller to manage data.
app.controller("HomeController", function($scope) {
$scope.message = "Welcome to the Home Page!";
});
app.controller("AboutController", function($scope) {
$scope.message = "Learn more about us on this page.";
});
To display data, update the views:
<h2>Home Page</h2>
<p>{{ message }}</p>
5. Using ng-view to Load Templates
To render views, use ng-view in your index.html.
<body ng-app="myApp">
<nav>
<a href="#!/">Home</a> |
<a href="#!/about">About</a>
</nav>
<div ng-view></div>
</body>
🔹 ng-view acts as a placeholder for different templates.
6. Route Parameters in AngularJS
You can pass dynamic values using route parameters.
Example: Passing User ID
$routeProvider
.when("/user/:id", {
templateUrl: "user.html",
controller: "UserController"
});
Accessing Route Parameters
app.controller("UserController", function($scope, $routeParams) {
$scope.userId = $routeParams.id;
});
Example URL:
http://example.com/#!/user/5$scope.userIdwill be5.
7. Redirecting Routes
Use .otherwise() to handle invalid URLs.
$routeProvider.otherwise({
redirectTo: "/"
});
8. Resolving Data Before Routing
Use resolve to fetch data before loading a view.
.when("/profile", {
templateUrl: "profile.html",
controller: "ProfileController",
resolve: {
profileData: function(ProfileService) {
return ProfileService.getUserProfile();
}
}
});
In Controller:
app.controller("ProfileController", function($scope, profileData) {
$scope.profile = profileData;
});
9. Handling Route Changes Using $routeChangeStart
You can listen for route changes globally.
app.run(function($rootScope) {
$rootScope.$on("$routeChangeStart", function(event, next, current) {
console.log("Route is changing...");
});
});
