I decided to write this article as the technology is relatively new and there is a certain learning curve for decision makers and IT personnel. Business decisions and productivity can very well be influenced with this technology.
AngularJS is a web applications framework developed by one of the teams at Google in 2009. They were experienced front end developers who felt a need to simplify both development and testing of front end components / web based user interfaces.
Angular is based on a MVC (Model-View-Controller) architectural model which basically divides the application in three different components:
- the model = captures the behavior of the application
- the view = displays an output of the application (such as a chart or a graph on the screen)
- the controller = accepts input and converts it into commands
The controller usually sends commands to the model to update its state or to the view to change its presentation, the model notifies its associated views and controllers when it was a change in the state and the view requests info from the model to update its presentation to the user.
So, in short, Angular works by reading the HTML page with its embedded custom tag attributes. These attributes are interpreted as directives instructing Angular to bind input and output parts of the page to a model that is described with standard Javascript variables.
AngularJS is designed to:
- decouple the UI from the Application's Logic
- decouple the client side of the application from its server side
- provide a structure to the sequential operations of designing UI, writing business logic, coding and testing
- reduce the difficulty of testing (by the way the code is structured)
Angular presents the programmer with very powerful directives that allow for re-usable custom HTML-type of elements. Here are some of these directives:
- ng-app = declares the root of an angular.js application
- ng-bind = sets the text of a DOM element to the value of an expression
- ng-model = establishes a two-way data binding between the view and the scope
- ng-view = handles JSON data before rendering templates
- ng-controller = specifies a JavaScript controller class that evaluates HTML expressions
Here is a version of a "Hello World!" type of application in AngularJS:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>----<!DOCTYPE html><html ng-app><head>
<title>Hello World in AngularJS</title>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </head><body>
Textbox:
<input type="text" ng-model="mytext" />
<h1>Hello {{ mytext }}</h1>
</body>
</html>
The ng-app attribute basically tells Angular to be active in this part of the page. The ng-model attribute binds the state of the textbox with the value of the model (which is mytext). In a two-ways binding way, when mytext value changes Angular automatically changes the model with this value. And if we change the model's value Angular will change the value of mytext.
In conclusion, AngularJS presents the following advantages and opportunities in comparison with traditional JavaScript/jQuery programming:
- enables the programmers to create software quicker and with less effort
- delivers code that is easier to maintain and expand
- improves testing experience
- encourages good programming practices
- allows for easier, smoother collaboration with your team
Examples of applications where AngularJS is a great choice are:
- single or multiple pages web applications / front ends prone to future expansion
- complex, data intense applications
- web applications where the front-end developers do not have access to the back-end
- detailed, "grid-type" front-end applications such as financial applications or applications for accounting firms
- any other kind of application where html rendering in the browser makes sense
Examples of applications where AngularJS would not be the best choice are:
- highly computational / mathematical applications
- games
Make it a great day!
Adrian Corbuleanu
Miami Beach, FL
http://wittywebnow.com
Notes: to document for this article I used the following online resources.
1. http://wikipedia.com
2. https://angularjs.org
3. http://viralpatel.net
4. http://jeremyzerr.com
