Introduction to AngularJS
I am sure that if you are a web developer, you could have come across this opensource Javascript framework called AngularJS offered ...
https://www.programming-free.com/2013/09/introduction-to-angularjs.html
I am sure that if you are a web developer, you could have come across this opensource Javascript framework called AngularJS offered by Google. Lot of useful and excellent articles are available on the web already, explaining the 'what, why and how' of AngularJS. Still, I want to write at least a few articles here on AngularJS purely inspired by its awesomeness of enabling web developers to do real magic without having to write much javascript code.
For an introductory level quick understanding of what AngularJS is, if you are a web developer with little knowledge of jQuery, you know with jQuery you can manipulate the DOM elements to make it dynamic. In jQuery, selectors(id, name or class of an element) are used to find DOM elements(ex. div,h1,p etc.) and then bind/register event handlers to them. When an event triggers, that code executes to update/change the DOM. This we call as Imperative programming. With jQuery you tell the DOM what needs to happen, step by step. With AngularJS you describe what results you want but not how to do it. This we call as declarative programming.
So, now let us come out of jQuery and think purely in AngularJS way. AngularJS is a Javascript Framework that simplifies web development by automatically taking care of DOM Manipulation, setting up listeners and notifiers, and form input validation. Apart from this, AngularJS is amazed upon by most of the web developers with these following features,
-- Two way Data Binding
-- Directives
-- Templates
-- MVVM Architechture (Model View ViewModel)
-- Dependency Injection
-- Testing
Let us get introduced to Directives and Two way data binding in this article followed by other features in my upcoming articles.
Directives
AngularJS comes with a set of in-built directives. The directives can be placed in element names, attributes, class names, as well as comments. If you are familiar with HTML5 data attributes, you can imagine directives as something similar to that for now. You can also build custom directives and attach it to any HTML element to give it a custom behavior. All inbuilt directives starts with 'ng-'.
What do these directives do? Consider a simple jquery/javascript plugin for creating a dropdown menu out of an unordered list,
<ul class="main-menu">
<li class="active">
<a href="#/home">Home</a>
</li>
<li>
<a href="#/menu1">Menu 1</a>
<ul>
<li><a href="#/sm1">Submenu 1</a></li>
<li><a href="#/sm2">Submenu 2</a></li>
<li><a href="#/sm3">Submenu 3</a></li>
</ul>
</li>
<li>
<a href="#/home">Menu 2</a>
</li>
</ul>
We would then activate it with jquery like this,
$('.main-menu').dropdownMenu();
When you look at the view (html) you will have no idea what this unordered list is going to be used for, in the front end. Only after you examine the jQuery code you will know that this is going to produce a menu in the browser. For small applications this is fine, but for non-trivial applications, this is really confusing and becomes hard to maintain. On the other hand with AngularJS, you could just instruct the unordered list to behave as a menu with a directive such as this, which is easy to understand for someone who looks at the html at the very first glance,
<ul class="main-menu" dropdown-menu>
...
</ul>
Directives set up the event handlers behind the scenes for us and give us dynamic databinding. Selectors are rarely used, so the need for IDs (and some types of classes) is greatly diminished.
Now let us start doing a few hands-on to understand some of the basic features of AngularJS. To use angularjs framework you just have to include a reference to the angularjs script in the head section of your html page. Take a look at the below simple html page,
<html lang="en" ng-app>
<head>
<title>My First AngularJS Program</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
Output
Nothing here yet!
There are three things you have to notice in the above code snippet,
-- ng-app directive in tag
For AngularJS to work, you should use this directive. In this example, AngularJS is active throughout the document. If you want to use AngularJS only in specific portions of an html page you can declare this directive in that particular element.
-- angularjs library reference in the section
AngularJS javascript file, hardly 80kb in size is included in the head section of the html page. Google's CDN is recommended for loading the scripts faster.
-- {{ }} double curly braces binding an expression in tag.
If you notice the paragraph element in the above code snippet, it has the content placed inside double curly braces. This changes our HTML page into templates, thus paving way for adding dynamic contents easily. The binding tells Angular that it should evaluate an expression and insert the result into the DOM in place of the binding. In the above example it is just a simple text, but in the coming examples we will see how to use these expressions to bind the content dynamically.
I assume that by now you have a fair understanding of what directives mean in AngularJS. There are lots more to explore about Directives. I will try to add a post on how to create custom directives in AngularJs later. For now, let us proceed and look into 'ng-model' directive, that can be used to achieve two way data binding.
Two Way Data Binding
In general, model is something that holds the data to be presented in the view. For example, a book model can contain an array of book names. The data in the model can be given as static input or you can fetch it from a database by issuing a server side call (AJAX). The concept of loading/updating model data to the DOM elements in the view is called Data Binding.
Traditionally, when the model changes, the developer is responsible for manually manipulating the DOM elements and attributes to reflect these changes. Also when the user updates something in the front end, then again we have to manually update our model. This is further complicated by user interaction, since the developer is then responsible for interpreting the interactions, merging them into a model, and updating the view. This is a very manual and cumbersome process, which becomes difficult to control, as an application grows in size and complexity.
But with AngularJS you have this awesome feature referred to as two way binding, which updates the DOM automatically when the model changes and model is also updated when there is a change in the DOM. There are five ways in which you can create a model to achieve two way data binding in AngularJS. Model and View are glued together using an AngularJS javascript object called $scope. For now let us not get into the details of creating a model by explicitly creating scope properties. Let us look at a simple client side example of two way databinding,using 'ng-model' . directive. When you use this directive, AngularJS creates the models implicitly (by creating a scope property and assigning it a suitable value).
Please try the demo yourself to understand this concept. As you type your name in the textbox, you will see the h1 tag getting updated with the text. We have defined a model called 'yourname' and bound it to a textbox. When the text in the textbox changes the value in the model 'yourname' also changes. We are able to visualize this, since we have bound the same model to 'h1' element also. This is only a simple client side example of two way data binding. We will see in detail on how to create models using server side data and achieve two way databinding later in an article in this tutorial series.
Please note that I have discussed some features of jQuery in this article just to provide a better understanding for the beginners. By this comparison, I do not in anyway insist AngularJS should be chosen over jQuery. Both libraries has its own advantages and limitations.
Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!!
<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple Two Way Binding - programming-free.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script></head>
<body>
Write your name:
<input type="text" ng-model="yourname" />
<h1>Hello {{ yourname }}</h1>
</body>
</html>
Please try the demo yourself to understand this concept. As you type your name in the textbox, you will see the h1 tag getting updated with the text. We have defined a model called 'yourname' and bound it to a textbox. When the text in the textbox changes the value in the model 'yourname' also changes. We are able to visualize this, since we have bound the same model to 'h1' element also. This is only a simple client side example of two way data binding. We will see in detail on how to create models using server side data and achieve two way databinding later in an article in this tutorial series.
Please note that I have discussed some features of jQuery in this article just to provide a better understanding for the beginners. By this comparison, I do not in anyway insist AngularJS should be chosen over jQuery. Both libraries has its own advantages and limitations.
Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!!
Good Article for beginners
ReplyDeleteBusinesses might get a competitive edge by hiring Ukrainian IT experts on the outside. The technical proficiency of Ukrainian IT professionals is well-known, and many have prior experience dealing with foreign clients. Businesses who outsource IT services to Ukraine gain access to a highly skilled workforce that can complete difficult projects on time and under budget. Additionally, outsourcing enables companies to take advantage of the newest IT industry developments and trends, which can help them outperform the competition. Choose Dynamics 365 Business Central Implementation by following this link!
ReplyDelete