4.2.6. Angular JS

Angular JS is not just another JavaScript library. It is much more than that. This framework for dynamic web apps uses HTML and allows you extend HTML syntax for your application needs.

Similar to Spring, Angular provides data binding and dependency injection to simplify code. Unlike Spring, Angular does it on the client side, making HTML-easy to partner-handshake server side via Ajax.
Angular offers the browser new syntax and opportunities:

Data binding, as in {{}}.
Controlling, showing and hiding Web Document Object Model (DOM) elements (fields, buttons, forms, etc.)
Event handling and form validations.
Creating reusable groups of HTML components.

Angular was designed for simple data handling applications with Create, Read, Update, Delete (CRUD) in mind.
So, not all applications are good fit for Angular. For example, GUI intensive, Games, and sophisticated data processing apps are not a good fit.

Angular makes common tasks trivial by drastically improving code structure and making testing easy.
The framework decouples client side from the server side and walks a developer through entire application from UI to business logic, data, and testing.

Angular allows you to declare application behavior and the framework does the rest.
Major code simplifications areas are:

UI ? Just declare how the UI should change with the application state changes
Data changes (CRUD) translation into UI changes and back (marshalling data)
Initialization code is done by the framework. You save tons of code typically written to just start.
Full control over the initialization process in automated tests.
Start with AngularJS

Download the library from: https://angularjs.org/
Copy and Paste the file angular.min.js to the js - directory of the project 4.2.6.Angular.
Here is a simple example of Data Binding.
In the html-folder create an HTML file angularDataBinding.html with a form as you see below.
The form has input fields for quantity and price whose values are multiplied to produce the total:







  



 





  

  Calculate Total:

  

    Quantity: 

  

  

    Price: 

  

  

    Total: {{qty * price | currency}}

Calculate Total:

Quantity:

Price:

Total: {{qty * price | currency}}

This looks like normal HTML, with some new markup. In Angular, this HTML file like is called a template. The file includes new HTML tags, called directives, which Angular parses using its compiler to produce a web page.
For example, the ng-app attribute is linked to a directive that automatically initializes our application. Angular also defines a directive for the input element that adds extra behavior to the element. The ng-model directive stores and updates the value of the input field into/from a variable.

Was it clear so far?

Another example:











  Name: 



  {{companyName}}

In the following example we introduce AngularJS module (ng-app) and
AngularJS controller (ng-controller) with their directives. The controller defines a function that connects the models with their values provided in the text fields. Try to update the text fields to see the scope changing.









Update text fields.



First Name: 


Last Name: 





Full Name: {{firstName + lastName}}

Update text fields.

First Name:
Last Name:

Full Name: {{firstName + lastName}}

Assignments:
1. Create 4.2.6.Angular project with js and html directories.
2. Place necessary js libraries (angular.min.js) in the js directory.
3. Create 4 similar to above examples in the 4.2.6.Angular project to demonstrate the features you just learned.
4. Read more about the AngularJS by searching Google for tutorials.
5. Watch two sessions on Youtube on AngularJS
6. Write an essay with examples and email as MS Word 4.2.6.Angular.Your.Name.doc to dean@ituniversity.us
7. Create a CLICKER type game with images. Each click can add score or subtract the score depending on the image/event.
Here is the sample game: http://orteil.dashnet.org/cookieclicker/
In your game each 5 additional scores would change the image(s).

Note: learning from Google and Youtube is an essential skill used daily by the developers.
And even more important skill is to express what you learn in a very clear way.

<!doctype html> <br/><html lang="en"> <br/><head> <br/> <meta charset="utf-8"> <br/> <br/> <script src="../js/angular.min.js"></script> <br/></head> <br/><body > <br/> <div ng-app ng-init="qty=5;price=2.5"> <br/> <b>Calculate Total:</b> <br/> <div> <br/> Quantity: <input type="number" min="0" ng-model="qty"> <br/> </div> <br/> <div> <br/> Price: <input type="number" min="0" ng-model="price"> <br/> </div> <br/> <div> <br/> <b>Total:</b> {{qty * price | currency}} <br/> </div> <br/></div> <br/></body></html>

<!DOCTYPE html> <br/><html> <br/><script src="../js/angular.min.js"></script> <br/><body> <br/><div ng-app=""> <br/> <p>Name: <br/><input type="text" ng-model="companyName"></p> <br/> <p>{{companyName}}</p> <br/></div> <br/></body> <br/></html>

<!DOCTYPE html> <br/><html> <br/><script src= "../js/angular.min.js"></script> <br/><body> <br/><p>Update text fields.</p> <br/><div ng-app="myApp" ng-controller="myCtrl"> <br/>First Name: <input type="text" ng-model="firstName"><br> <br/>Last Name: <input type="text" ng-model="lastName"><br> <br/><br> <br/>Full Name: {{firstName + lastName}} <br/></div> <br/><script> <br/>var app = angular.module('myApp', []); <br/>app.controller('myCtrl', function($scope) { <br/> $scope.firstName= "John"; <br/> $scope.lastName= "Doe"; <br/>}); <br/></script> <br/></body></html> <br/>