Many of you might be wondering what is AngularJS and where AngularJS is used. This is an open-source framework for browser-based (client-side) applications, maintained by Google. So without worrying much, let’s learn what this framework is all about and the scope of AngularJS.
What is AngularJS?
AngularJS is a structural Javascript framework used for dynamic web applications. It is used for designing browser-based applications with the Model-View-Controller capability and reduce the amount of Javascript needed to make web applications functional. Such applications are called Single Page applications which load a single HTML page and update dynamically as and when the user interacts with it.
AngularJS is a completely client-side solution. It makes use of HTML as the basic template language and then extends with HTML’s syntax to express the application’s components briefly and clearly. It follows the MVC pattern such as models, controller, services, factory and the custom codes like directives.
The scope of AngularJS:
Angular is a complete solution for rapid front-end development. Any other plugins or the frameworks are not necessary to build data-driven web applications. We can see few stand-out features of AngularJS as below.
- Follows MVVM Pattern:
MVVM(Model-View-ViewModel) is an architectural pattern where the User Interface controls and their presentation logic is separated. It provides the separation concerns between the display and its back end logic or business logic.
The main components of this pattern are Models, View, and View-Models. Models represent the data objects (holds the data). ViewModel holds representational data i.e. responsible for converting the data from models to the view representational data and to model object data. The view represents the User Interface which is just an HTML. Because of the concept of logic separation, we can reuse the logic in many other views.
- Supports REST Architecture:
REST is an architectural style for designing distributed systems. REST based web services provide interoperability between the computer systems which is nothing but communicating from the server to the client and vice-versa using stateless operations.
Using AngularJS, in a single line of code, you can easily talk to the server and quickly get the data you need to interact with your web pages. AngularJS turns this into a simple JavaScript object as Models, following the MVVM (Model View View-Model) pattern.
- Data Binding and Dependency Injection:
This is the main reason why we go for AngularJS. Let us delve deeper into this.
In MVVM pattern, if anything changes in the model, it is automatically communicated across UI. Hence it is not required a separate layer for wrappers or getters/setters for updating the change in values being communicated between UI and business logic.
AngularJS handles all of this, so you can express your data as simply as with JavaScript primitives like arrays, or as a complex object or using custom data types. Hence anything that changes in either way i.e. from and to UI, immediately both model and UI will get updated. This can be done using the $scope object which holds the model data used to update the user interface(UI) through the attribute called ng-model and also updates itself whenever there are any changes from UI.
Dependency injection is a software design pattern which describes how software components retain their dependencies. This pattern basically is used to avoid tight coupling.
In C# this is done by creating the instances of classes and accessing functions using these instances. With AngularJS it is very easy to handle. We can create each module with no dependencies on any other module and can be used in another module through Dependency Injection. It is achieved by passing the dependencies as parameters in service functions.
- Extends HTML:
The most websites built today are just the series of <div> tags which is lengthy, does not have much clarity and difficult to understand. We need to create comprehensive and exhaustive CSS classes to express the intention of each object in the DOM.
Now with Angular, it has become easy to work with HTML. We can operate HTML like XML, giving endless possibilities for tags and attributes. Angular does this through its HTML compiler and the use of directives to trigger behaviors based on the newly-created syntax we write.
- HTML as Template:
Angular is very simple to understand because it uses basic HTML as its template language. It represents the UI controls using the HTML’s syntax. It also makes use of its own written custom code called directives like ng-directives and MD-directives.
The HTML template is converted into DOM elements and then these DOM elements are passed to the AngularJS compiler, which can be extended, executed or reused. This compiled code is raw DOM components, which can be allowed to manipulate directly or can be extended.
- Enterprise-level Testing:
As we have already understood, AngularJS does not require any additional frameworks or plugins, even including testing. You can easily test your app with all built-in features of AngularJS which indirectly reduces the project cost and improves performance.
These are the fundamental principles that guide AngularJS to creating an efficient, performance-driven, and maintainable front-end code base thus providing a rich and fast experience to the end user.
Example :
Let us go through a simple example.
In this example, we will build a form to display the current Date and Time for a specific time zone as selected. The web page looks like below.
As we can see above, we have three options for time zones. For each selected time zone we display the date and time. Initially, no option is selected. When you select any one of them, it displays its specific date&time. You can see as below.
Now we will see its design page(HTML) as shown below.
This looks like a normal HTML, with some new directives. This is called a template in AngularJS. In this example, we use the ng-app attribute, which is a custom angular directive that automatically initializes our application when started. The ng-model is a directive used for input fields which stores/updates the value of the input field into/from a variable. Here we are using $watch which keeps monitors the status of zone variable bound to all three radio buttons. So as and when any option is selected we use $scope object’s date variable to display the date & time.
I hope this article helped you to understand the basics of the AngularJS platform.
– Contributed by Preeti Dhavali.