Step 1 - AngularJs Expressions (For Java Developers)

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

Definition:

AngularJS expressions allow you to bind data to your HTML, similar to how Java’s JSP can display dynamic data. In AngularJS, expressions let you dynamically show data from your model (JavaScript object) inside your HTML.

Comparing with Java (Servlets + JSP):

In Java Servlets and JSP, you typically set data in request attributes and display it using JSP expressions like ${}. Here’s an example:

Java JSP Example:

<%-- In Servlet --%>
request.setAttribute("myVariable", "Hello World");
<%-- In JSP --%>
<p>${myVariable}</p>

In AngularJS, instead of sending the data from the server and embedding it in JSP, you bind the data directly in the HTML using expressions.

Syntax:

In AngularJS, there are two ways to bind data:

{{ }} (Curly Braces): Displays the value of a variable.
ng-bind=” “: Another way to bind and display a value in HTML.

Example in AngularJS (Code-Oriented):

Let’s explore a basic example using AngularJS expressions. You can copy the following code, save it as an anyName.html file, and open it in a browser.

Java Comparison Example (JSP)

<%-- In Servlet --%>
request.setAttribute("myVariable", "Hello World");

<%-- In JSP --%>
<p>${myVariable}</p> <!-- Similar to Angular's {{myVariable}} -->

AngularJS Code Example:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="MyController">
        <!-- Displaying a variable value using curly braces -->
        <p>{{myVariable}}</p>

        <!-- Displaying a variable value using ng-bind -->
        <p ng-bind="myVariable"></p>

        <!-- Defining the variable in the controller -->
        <script>
            var app = angular.module('myApp', []);
            app.controller('MyController', function($scope) {
                $scope.myVariable = 'Hello World';
                $scope.myFunction = function() {
                    return 'Hello from a function!';
                };
                $scope.showElement = true;
                $scope.itemList = ['Item 1', 'Item 2', 'Item 3'];
            });
        </script>

        <!-- Calling a function using curly braces -->
        <p>{{myFunction()}}</p>

        <!-- Calling a function using ng-bind -->
        <p ng-bind="myFunction()"></p>

        <!-- Conditional rendering -->
        <div ng-if="showElement">
            <p>This element will be displayed if showElement is true.</p>
        </div>

        <!-- Iterating over a list using curly braces -->
        <ul>
            <li ng-repeat="item in itemList">{{item}}</li>
        </ul>

        <!-- Iterating over a list using ng-bind -->
        <ul>
            <li ng-repeat="item in itemList" ng-bind="item"></li>
        </ul>
    </div>
</body>
</html>

Explanation of Code:

{{myVariable}} vs. ng-bind: Both methods bind and display data in the HTML, similar to how ${} is used in JSP to output data set in the Servlet.
Controller (MyController): Like how you set request attributes in Java Servlets, here you define variables and functions inside the controller.
In Java, you’d use request.setAttribute("key", value); in AngularJS, you assign values directly to $scope like $scope.myVariable = 'Hello World';.
Function Call: Just like you can call Java methods in Servlets and forward their results to JSP, you can call JavaScript functions inside AngularJS expressions using {{myFunction()}}.
Conditional Rendering (ng-if): In Java, you’d conditionally include parts of your JSP using <c:if> or plain Java if-else. In AngularJS, you use ng-if to conditionally show or hide elements based on the model’s data.
Java JSP: <% if(showElement) { %> <p>This element will be displayed.</p> <% } %>
AngularJS: <div ng-if="showElement"> <p>This element will be displayed if showElement is true.</p> </div>
Looping over a List (ng-repeat): Like in Java, you can loop over a list of items and display them in JSP using JSTL’s <c:forEach> tag. In AngularJS, you use ng-repeat to iterate over an array of items and display them.
Java JSP: <c:forEach items="${itemList}" var="item"> <li>${item}</li> </c:forEach>
AngularJS:
“`html
- {{item}}
“`

Key Differences:

Dynamic Data Binding: AngularJS binds the data dynamically to the HTML, and any changes made to the model immediately reflect in the view without needing to refresh the page. In Java (Servlets/JSP), the server must process the request and send back a response to update the view.
Two-Way Data Binding: AngularJS allows for two-way data binding, meaning changes in the view update the model automatically and vice-versa. This feature is similar to JavaScript frameworks but not natively available in Java Servlets/JSP.

Quick Comparison Table:

Concept	Java (Servlet + JSP)	AngularJS
Data Binding	Use `${}` in JSP to bind request attributes	Use `{{ }}` or `ng-bind`
Function Call	Servlet methods, JSP expressions	AngularJS `{{myFunction()}}`
Conditional	`<c:if>` or Java `if` statements in JSP	`ng-if` to show/hide elements
Loop	`<c:forEach>` in JSP	`ng-repeat` to loop through arrays

Conclusion:

AngularJS expressions allow you to dynamically bind data and display it in HTML, making the process smoother and more efficient compared to traditional Java Servlets and JSP. It reduces the need for server round-trips and enhances the user experience with faster data updates.

Java Programmatic Universe

Java- write once, run away!

Step 1 – AngularJs Expressions (For Java Developers)