AngularJS Routing: The Single Page App Experience - FadiZahhar/AngularJs GitHub Wiki

The StartApp Team Unlocks Seamless Navigation

Scene: The Client Wants Real Pages—Without Page Loads

The StartApp Task Manager app works well, but the client has a new goal:

“Can you make it so users click ‘Dashboard’, ‘Tasks’, or ‘Profile’ and the app updates the content—without refreshing the whole page?”

Mike (Team Lead): “That’s called SPA (Single Page Application) routing. AngularJS does this beautifully using ngRoute!”

Sara (Junior Dev): “Let’s set up routing so our app loads different templates and controllers based on the URL—super fast and modern!”

1. Setting Up AngularJS Routing

Step 1: Include the AngularJS Route library after AngularJS:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>

Step 2: Declare "ngRoute" as a dependency in your app module:

var app = angular.module('startApp', ['ngRoute']);

2. Configure Routes with $routeProvider

Sara: “We’ll use $routeProvider to map URLs to templates and controllers.”

app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "dashboard.html",
      controller: "dashboardCtrl"
    })
    .when("/tasks", {
      templateUrl: "tasks.html",
      controller: "tasksCtrl"
    })
    .when("/profile", {
      templateUrl: "profile.html",
      controller: "profileCtrl"
    })
    .otherwise({
      redirectTo: "/"
    });
});

3. Set Up the HTML with ng-view

ng-view is where the routed content will appear:

<body ng-app="startApp">
  <div class="w3-bar w3-blue">
    <a href="#!/" class="w3-bar-item w3-button">Dashboard</a>
    <a href="#!/tasks" class="w3-bar-item w3-button">Tasks</a>
    <a href="#!/profile" class="w3-bar-item w3-button">Profile</a>
  </div>
  <div class="w3-container">
    <div ng-view></div>
  </div>
</body>

4. Creating View Templates and Controllers

dashboard.html:

<h2>Welcome to the Dashboard!</h2>
<p>This is your SPA home page.</p>

tasks.html:

<h2>Tasks</h2>
<ul>
  <li ng-repeat="t in tasks">{{ t.name }}</li>
</ul>

profile.html:

<h2>Profile</h2>
<p>Name: {{ user.name }}</p>
<p>Email: {{ user.email }}</p>

Controllers:

app.controller('dashboardCtrl', function($scope) {});

app.controller('tasksCtrl', function($scope) {
  $scope.tasks = [
    { name: "Design logo" },
    { name: "Setup database" },
    { name: "Write docs" }
  ];
});

app.controller('profileCtrl', function($scope) {
  $scope.user = { name: "Lina", email: "[email protected]" };
});

5. Navigation in Action

  • When a user clicks “Tasks”, the URL becomes #/tasks and tasks.html loads inside ng-view—no reload.
  • “Profile” loads profile.html and its controller.
  • “Dashboard” loads the main page.

6. Team Discussion: Why Use AngularJS Routing?

  • Sara: “We can build apps that feel as fast as native desktop or mobile apps.”
  • Lina (Designer): “The user never waits for reloads—just smooth navigation.”
  • Mike: “Each view has its own template and controller, keeping code organized.”

7. Full Example: Simple SPA with AngularJS Routing

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AngularJS SPA Routing Example</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>
<body ng-app="startApp">
  <div class="w3-bar w3-blue">
    <a href="#!/" class="w3-bar-item w3-button">Dashboard</a>
    <a href="#!/tasks" class="w3-bar-item w3-button">Tasks</a>
    <a href="#!/profile" class="w3-bar-item w3-button">Profile</a>
  </div>
  <div class="w3-container">
    <div ng-view></div>
  </div>
<script>
var app = angular.module('startApp', ['ngRoute']);
app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "dashboard.html",
      controller: "dashboardCtrl"
    })
    .when("/tasks", {
      templateUrl: "tasks.html",
      controller: "tasksCtrl"
    })
    .when("/profile", {
      templateUrl: "profile.html",
      controller: "profileCtrl"
    })
    .otherwise({
      redirectTo: "/"
    });
});
app.controller('dashboardCtrl', function($scope) {});
app.controller('tasksCtrl', function($scope) {
  $scope.tasks = [
    { name: "Design logo" },
    { name: "Setup database" },
    { name: "Write docs" }
  ];
});
app.controller('profileCtrl', function($scope) {
  $scope.user = { name: "Lina", email: "[email protected]" };
});
</script>
</body>
</html>

Create dashboard.html, tasks.html, and profile.html in your project folder.

8. Quick Team Challenge: Add a “Settings” Page

Create a new route for /settings that loads settings.html with its own controller and message.

Key Takeaways

  • AngularJS routing makes real SPAs with no full-page reloads.
  • Organize your app into logical, navigable pieces—each with their own controller and template.
  • Super-fast, user-friendly experience—like a desktop app in your browser!

Team Conclusion

Lina: “This feels like a real app! Navigation is instant and everything just flows.”

Mike: “Next, let’s try deeper navigation—maybe parameters, or passing data between routes!”

Try these examples live in the [W3Schools AngularJS Routing TryIt Editor](https://www.w3schools.com/angular/angular_tryit.asp?filename=tryangular_routing).

⚠️ **GitHub.com Fallback** ⚠️