AngularJS - Step 9: Routing (For Java Developers)

Play Store Application link – Java to AngularJS in 16 Steps – App on Google Play

Routing in AngularJS enables you to create Single Page Applications (SPAs) where users can navigate between different “pages” without refreshing the whole page. This functionality is achieved through the ngRoute module, which handles the routing mechanism.

Java Comparison:

In Java web applications, you often handle page navigation using servlets and JSP. For example, you might use servlet mappings in web.xml to direct requests to different servlets. AngularJS routing serves a similar purpose, but it operates entirely on the client side, making navigation smoother and faster.

Java Example (Servlet Mapping):

<!-- In web.xml -->
<servlet>
    <servlet-name>HomeServlet</servlet-name>
    <servlet-class>com.example.HomeServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>HomeServlet</servlet-name>
    <url-pattern>/home</url-pattern>
</servlet-mapping>

In this Java example, requests to /home are routed to the HomeServlet.

AngularJS Routing Example

Let’s see how you can implement routing in AngularJS.

Include the ngRoute Module:
You need to include the ngRoute module in your AngularJS application to use routing.
Define Routes:
Use the $routeProvider service to define different routes and associate them with specific views and controllers.
Create Controllers:
Define controllers for each route to handle the business logic.
Set Up Navigation Links:
Add links in your HTML to navigate between different routes.

Code Example

Here’s a complete AngularJS example demonstrating routing. Save this code as an HTML file and open it in a browser to see it in action.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>AngularJS Routing Example</title>
  <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.min.js"></script>
</head>
<body>

  <!-- Navigation links -->
  <a href="#!/home">Home</a>
  <a href="#!/about">About</a>
  <a href="#!/contact">Contact</a>

  <!-- Container for the routed content -->
  <div ng-view></div>

  <script>
    // Define the AngularJS module and include ngRoute as a dependency
    var app = angular.module('myApp', ['ngRoute']);

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

    // Define the controllers
    app.controller('HomeController', function($scope) {
      $scope.message = 'Welcome to the Home page!';
    });

    app.controller('AboutController', function($scope) {
      $scope.message = 'Learn more About us!';
    });

    app.controller('ContactController', function($scope) {
      $scope.message = 'Get in touch with us through the Contact page!';
    });
  </script>

</body>
</html>

Breakdown of the Example:

Include AngularJS and ngRoute:

AngularJS: Include both AngularJS and the ngRoute module in your HTML file.
Java Equivalent: Similar to including servlet APIs or other libraries in a Java web app.

Define Routes:

AngularJS: Use $routeProvider to define routes. Each route maps a URL path to a specific template and controller.
Java Equivalent: This is similar to servlet mappings where URLs are mapped to specific servlets or JSP pages.

Controllers:

AngularJS: Define controllers that handle the logic for each route. These controllers manage the data and interactions for their respective views.
Java Equivalent: In a Java web application, this is similar to servlet classes handling requests and responses.

Navigation Links:

AngularJS: Use href="#!/route" for navigation. AngularJS handles changing views without reloading the page.
Java Equivalent: This is like using hyperlinks or form actions to navigate between different pages in a Java web app.

Key Takeaways:

Routing in AngularJS allows for smooth transitions between different views within a single page application.
Directives like ng-view are used to load the content for each route dynamically.
Configuration is handled in the AngularJS module configuration using $routeProvider, similar to setting up servlet mappings in Java.

By understanding AngularJS routing in the context of Java web development, you can leverage your existing knowledge of web applications to build more interactive and seamless SPAs with AngularJS.

Java Programmatic Universe

Java- write once, run away!

AngularJS – Step 9: Routing (For Java Developers)