Introduction to AngularJS Routing

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("/", { ... }) → Loads home.html when the URL is /.
when("/about", { ... }) → Loads about.html when 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.userId will be 5.

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...");
    });
});