Configuring routes with $routeProvider

$routeProvider is part of AngularJS’s ngRoute module, which enables Single Page Application (SPA) navigation. It helps define different routes (URLs) and associate them with specific templates and controllers.

Why Use `$routeProvider`?

Enables navigation between different views without reloading the page.
Allows dynamic content rendering based on the URL.
Supports route parameters for passing data in URLs.
Improves user experience and performance.

2. Including `ngRoute` in Your Project

Before using $routeProvider, you need to include AngularJS and angular-route.js in your project.

Step 1: Add AngularJS and `angular-route.js`

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

3. Configuring Routes with `$routeProvider`

To define routes, you need to:

Create an AngularJS module.
Inject ngRoute as a dependency.
Configure $routeProvider.

Step 2: Define Routes

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

app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl: "home.html",
        controller: "HomeController"
    })
    .when("/about", {
        templateUrl: "about.html",
        controller: "AboutController"
    })
    .when("/contact", {
        templateUrl: "contact.html",
        controller: "ContactController"
    })
    .otherwise({
        redirectTo: "/"
    });
});

Explanation:

.when("/", { templateUrl, controller }) → Loads home.html with HomeController.
.when("/about", { templateUrl, controller }) → Loads about.html with AboutController.
.when("/contact", { templateUrl, controller }) → Loads contact.html with ContactController.
.otherwise({ redirectTo: "/" }) → Redirects unknown routes to the home page.

4. Creating View Templates

Each route should have an HTML template.

Step 3: Create `home.html`

<h2>Home Page</h2>
<p>Welcome to our homepage!</p>

Step 4: Create `about.html`

<h2>About Us</h2>
<p>Learn more about our company.</p>

Step 5: Create `contact.html`

<h2>Contact Us</h2>
<p>Get in touch with us.</p>

5. Creating Controllers

Each route has a controller to manage data and logic.

Step 6: Define Controllers

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

app.controller("AboutController", function($scope) {
    $scope.message = "This is the About Page.";
});

app.controller("ContactController", function($scope) {
    $scope.message = "Contact us for more information.";
});

To display the controller data in views, update the templates:

<h2>Home Page</h2>
<p>{{ message }}</p>

6. Using `ng-view` in `index.html`

To load different templates dynamically, use ng-view.

Step 7: Define `ng-view` in `index.html`

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <title>AngularJS Routing</title>
</head>
<body>
    <nav>
        <a href="#!/">Home</a> |
        <a href="#!/about">About</a> |
        <a href="#!/contact">Contact</a>
    </nav>

    <div ng-view></div>
</body>
</html>

How It Works:

When you visit #!/, AngularJS loads home.html inside ng-view.
When you visit #!/about, it loads about.html inside ng-view.
When you visit #!/contact, it loads contact.html inside ng-view.

7. Using Route Parameters (`$routeParams`)

You can pass dynamic values in routes.

Step 8: Define a Route with Parameters

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

Step 9: Retrieve the Parameter in the Controller

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

Example URL:

http://example.com/#!/user/5
$scope.userId will be 5.

8. Redirecting Unknown Routes

Use .otherwise() to handle invalid URLs.

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

9. Resolving Data Before Navigation

You can preload data before displaying a page using resolve.

Example: Preloading User Data

.when("/profile/:userId", {
    templateUrl: "profile.html",
    controller: "ProfileController",
    resolve: {
        userData: function($http, $route) {
            return $http.get("api/users/" + $route.current.params.userId);
        }
    }
});

Retrieve Data in Controller

app.controller("ProfileController", function($scope, userData) {
    $scope.user = userData.data;
});

10. Listening to Route Changes (`$routeChangeStart`)

You can listen to route changes globally.

app.run(function($rootScope) {
    $rootScope.$on("$routeChangeStart", function(event, next, current) {
        console.log("Route is changing...");
    });
});

Why Use $routeProvider?

2. Including ngRoute in Your Project

Step 1: Add AngularJS and angular-route.js

3. Configuring Routes with $routeProvider