It is an open source
web application JavaScript framework, in which we can use our HTML as template
language. Don’t get confused with “HTML as template language” word. Usually we
use HTML for designing static documents, but using angular (Angular
Directives), we can extend our HTML as language to build web applications. At
start things look like night mares. I will explain one by one, so that you can
digest things easily.
Ex: Consider the following UI.
In the above UI, I will
enter some text in the first textbox and I click the button “Submit”. Once I
click “Submit” button, the first textbox text will be assigned to label. Before
Angularjs, we supposed to use JQuery libraries or JavaScript to accomplish this
type of tasks.
I am using a JQuery
library to fulfill the above requirement. Let’s jump directly into the coding
stuff:
I have created a web
application and included “jquery-1.10.2.js” JQuery library.
Code:
In the above code, I
have textbox, button and a label. Now checkout the button tag, I am calling a
JavaScript function “btnClick();”.
Well using AngularJs we
can achieve the same requirement by using simple AngularJs expressions. Let’s
check that:
Before coding we need
to import latest version of Angularjs from here, click the
download button and you will get the latest version. I am using Angularjs 1.4.3
version. Include the javascript file to the solution.
You can also use
package manager console to include the latest Angularjs into the solution in
visual studio by using the below mentioned command
PM>
Install-Package Angularjs
By using the above code
you can easily accomplish the task without using any JavaScript functions or
JQuery libraries.
In the above code,
first I have given reference to the Angularjs file.
Next, we need to define
“ng-app”. “ng-app” is a built-in Angularjs directive. For more information
about the Angularjs Directive, click here.
What
is Angularjs Directive?
Directives are HTML markers and it attaches a
specific behavior to the DOM element.
In Angularjs there are
many directives such as “ng-app”, ”ng-controller”, ”ng-click”, ”ng-model” etc.
For my application I
need above “ng-app”, “ng-click” and “ng-model”.
ngClick
Directive: Adds a specific behavior when an element
is clicked. (For ex: Button Click event)
In the above example, I
am assigning “InputText” to the “OutputText”.
Actually I kept
“ng-app” value blank (ng-app=”” ) in the above example, that’s because I can
finish up the task using Angularjs Expressions instead of Angularjs
Controllers.
Then
what is Angularjs Controller and Angularjs Expressions?
Angularjs
Controller:
As we have controller
in MVC to control the data binding between model and view, the Angularjs
controller also controls the data binding in Angularjs. Angularjs Controller is
also a JavaScript file.
The data flow in the application if used Angularjs is
something as shown in the below block diagram:
Angularjs
Expressions:
Angularjs expression
evaluates the functions written in the HTM. Another way to define Angularjs
Expression is, it will bind data to the HTML elements (ex: “{{OutputText}}”
binds data to the label value).
Examples:
If we write {{2+2}} in
HTML, when page loads, it will display 4.
In the above example,
the value of “InputText” assigned to the “OutputText” variable during “ngClick”
event.
And the “OutputText”
variable is used in the Angularjs Expression, to bind data to the label.
Angularjs expressions
work only if you have “ngApp” directive.
Some
of the advantages of using Angularjs is as follows:
1.
Two way data binding, once you assign
data to scope or variables such as “OutputText” in the above example, the
Angularjs expressions resolve the value and binds to the label.
2.
Decouple data and the HTML
view code.
3.
Angularjs is an independent
framework as it doesn’t rely on any JQuery libraries.
Well, that’s it from my
side. I hope my blog helped you to understand the basic need of Angularjs.
