What is AngularJS?
AngularJS or simply Angular is a JavaScript framework that makes the development of RIA internet applications easier. It is an extension to HTML with new attributes. It makes use of declarative programming for building UI. This article is an introduction to AngularJS. It describes the basic overview of AngularJS. Summary of the article:
- What is AngularJS?
- History of AngularJS
- Why AngularJS?
- Advantage of AngularJS
- AngularJS Directives
- AngularJS Expressions
- AngularJS Modules
What is AngularJS?
AngularJS is a open source JavaScript framework for creating single page web applications. These types of applications need HTML, CSS and JavaScript only. AngularJS extends our existing HTML attributes with Directives and binds data to HTML with Expressions. AngularJS is written in JavaScript and is distributed as a JavaScript file can be added to a web page with a script tag:
AngularJS is a open source JavaScript framework for creating single page web applications. These types of applications need HTML, CSS and JavaScript only. AngularJS extends our existing HTML attributes with Directives and binds data to HTML with Expressions. AngularJS is written in JavaScript and is distributed as a JavaScript file can be added to a web page with a script tag:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
AngularJS is client side, so everything is occur in web browser. AngularJS is based on the MVC (Model View Control) pattern. So it separates our RIA applications into models, views and controllers. The views are specified using HTML and AngularJS’s own attributes. The models and controllers are specified via JavaScript objects and JavaScript functions. Thus, as like HTML the views are specified declaratively, and as like JavaScript the models and controllers are specified imperatively. It has some difference with jQuery.
History of AngularJS
AngularJS was originally developed by Miško Hevery and Adam Abrons in 2009 at Brat Tech LLC. It is now officially backed by Google.
AngularJS was originally developed by Miško Hevery and Adam Abrons in 2009 at Brat Tech LLC. It is now officially backed by Google.
Why AngularJS?
HTML is great for creating static documents. But it is faulty when we try to use it for declaring dynamic views in web-applications. AngularJS lets us to extend HTML vocabulary for your application. Its output is readable, extraordinarily expressive, and time consuming to develop.
HTML is great for creating static documents. But it is faulty when we try to use it for declaring dynamic views in web-applications. AngularJS lets us to extend HTML vocabulary for your application. Its output is readable, extraordinarily expressive, and time consuming to develop.
Advantage of AngularJS
The advantages of AngularJS is given bellow:
The advantages of AngularJS is given bellow:
- Need to write lesser code
- It helps to create template that is reusable in multiple times
- It provides two way data binding
- We can directly call the code behind code in the html
- We can validate forms and input fields in client side without writing a single line of code
- It provides complete DOM structure show/hide, changing everything with AngularJS properties
- It allows writing basic flow end-to-end testing, UI mocks, and unit-testing
AngularJS Directives
AngularJS directives are used to specify custom and reusable HTML tags that moderate the behavior of certain elements. AngularJS provides some predefined directives to perform faster operations. But we can creates our custom directives also. Some common directives are given bellow:
AngularJS directives are used to specify custom and reusable HTML tags that moderate the behavior of certain elements. AngularJS provides some predefined directives to perform faster operations. But we can creates our custom directives also. Some common directives are given bellow:
ng-app
This directive initializes an AngularJS application. It is the root element of the application allowing behavior to be modified through custom HTML tags.
This directive initializes an AngularJS application. It is the root element of the application allowing behavior to be modified through custom HTML tags.
ng-bind
This directive binds application data to the HTML view. We can see the value of data on runtime.
This directive binds application data to the HTML view. We can see the value of data on runtime.
ng-model
This directive binds the value of HTML controls (select, input, textarea) to application data.
This directive binds the value of HTML controls (select, input, textarea) to application data.
ng-model-options
This directive allows tuning how model updates are done.
This directive allows tuning how model updates are done.
ng-class
This directive allows class attributes to be dynamically loaded.
This directive allows class attributes to be dynamically loaded.
ng-controller
This directive specifies a JavaScript controller class that evaluates HTML expressions.
This directive specifies a JavaScript controller class that evaluates HTML expressions.
ng-repeat
This directive repeats an HTML element.
This directive repeats an HTML element.
ng-show & ng-hide
This directive show or hide an element based on the value of a boolean expression.
This directive show or hide an element based on the value of a boolean expression.
ng-switch
This directive performs an action from a set of choices based on the value of a selection expression.
This directive performs an action from a set of choices based on the value of a selection expression.
ng-view
This directive is responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.
This directive is responsible for handling routes that resolve JSON before rendering templates driven by specified controllers.
ng-if
This directive works like our traditional if statement.
This directive works like our traditional if statement.
AngularJS Expressions
The expressions in AngularJS are written inside double braces, like: {{ expression }}. They bind data to HTML the same way as the ng-bind directive. They are much like JavaScript expressions and can contain operators, variables, and literals.
Example {{ 2 + 3 }} or {{ FirstName + ” ” + LastName }}
The expressions in AngularJS are written inside double braces, like: {{ expression }}. They bind data to HTML the same way as the ng-bind directive. They are much like JavaScript expressions and can contain operators, variables, and literals.
Example {{ 2 + 3 }} or {{ FirstName + ” ” + LastName }}
AngularJS Expressions Example:
<div ng-app="">
<p>Sum of 2 and 3 is: {{ 2 + 3 }}</p>
</div>
AngularJS Numbers, Strings, Arrays, Objects are as like as JavaScript. Example is given bellow:
<div ng-app="" ng-init="Length=2;Width=6;FirstName='John';LastName='Kerry';Students={FirstName:'John',LastName:'Kerry'};Marks=[10,5,60,25,20]">
<p>Area of a rectangle : {{ Length * Width }} </p>
<p>The full name is : {{ FirstName + " " + LastName }} </p>
<p>The last name is : {{ Students.LastName }} </p>
<p>The mark is : {{ Marks[3] }} </p>
</div>
AngularJS Modules
In AngularJS module is as like as a container for the different parts of applications (controllers, directives, services, filters, etc). Like others applications angular applications don’t have main method. In AngularJS application all the controllers should belong to a module. It makes our application more readable, reusable, and keeps the global namespace clean. Consider the following example where “myModule” is a module and “myController” is a controller.
In AngularJS module is as like as a container for the different parts of applications (controllers, directives, services, filters, etc). Like others applications angular applications don’t have main method. In AngularJS application all the controllers should belong to a module. It makes our application more readable, reusable, and keeps the global namespace clean. Consider the following example where “myModule” is a module and “myController” is a controller.
<div ng-app="myModule" ng-controller="myController">
A controller without a module where controller function is global is given bellow:
<div ng-app="" ng-controller="myController">
{{ Name + " " + Address }}
</div>
<script>
function myController($scope) {
$scope.Name = "Kamal";
$scope.Address = "Dubai";
}
</script>
A controller with a module is given bellow. Here ng-app=”myModule” is a module and the controller is a property of that module.
<div ng-app="myModule" ng-controller="myController">
{{ Name + " " + Address }}
</div>
<script>
var app = angular.module("myModule", []);
app.controller("myController", function ($scope) {
$scope.Name = "Kamal";
$scope.Address = "Dubai";
});
</script>
AngularJS provides all the features that are required to develop CRUD applications. Its data validations, code reusability, URL routing, data binding features are really fantastic. We can use AngularJS with ASP.NET also.
No comments