Setting up ngRoute module for routing

In AngularJS, the ngRoute module is used for routing in Single Page Applications (SPAs). It allows users to navigate between different views without reloading the entire page.

Why Use `ngRoute`?

Enables navigation without page reload
Supports multiple views within a single application
Improves user experience
Supports dynamic route parameters

2. Including `ngRoute` in AngularJS

The ngRoute module is not included in AngularJS by default. You need to add it separately.

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

Add the following scripts in your HTML file:

<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 `ngRoute` in AngularJS

To use routing, you need to:

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

Step 2: Create an AngularJS App with Routing

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("/", { templateUrl, controller }) → Loads home.html for the root (/) URL.
when("/about", { templateUrl, controller }) → Loads about.html for /about URL.
.otherwise({ redirectTo: "/" }) → Redirects unknown routes to the home page.

4. Creating Views (HTML Templates)

Each route should have a separate HTML template.

Step 3: Create `home.html`

<h2>Home Page</h2>
<p>Welcome to the homepage.</p>

Step 4: Create `about.html`

<h2>About Us</h2>
<p>Learn more about us.</p>

5. Creating Controllers

Each route can have a separate controller.

Step 5: Define Controllers

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 from controllers, update the views:

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

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

To load different templates dynamically, use ng-view.

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

<body ng-app="myApp">
    <nav>
        <a href="#!/">Home</a> |
        <a href="#!/about">About</a>
    </nav>

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

How It Works:

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

7. Route Parameters (`$routeParams`)

You can pass dynamic values in routes.

Step 7: Define a Route with Parameters

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

Step 8: 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. 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 ngRoute?

2. Including ngRoute in AngularJS

Step 1: Include AngularJS and angular-route.js

3. Configuring ngRoute in AngularJS