AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, declarative and maintainable front-end applications which provides solutions to standard infrastructure concerns.
The one popular JavaScript framework we know is jQuery. This would be sufficient when we are creating normal web applications to manipulate the DOM. Using jQuery we can create rich websites with ease but not web applications to the core.
Web applications are more dynamic and it requires more than DOM manipulation. Let’s, for example, you need to Create, Update, and Delete of forms, etc. Building this in jQuery would be pain and complex. Using AngularJS this would be easy.
AngularJs is a framework, which internally uses jQuery and has all the power of jQuery and so much more.
Contents
1. Introduction
AngularJS is a JavaScript MVC Framework that integrates two-way data binding,
Angular does one very specific job very well – that is, moving data around inside a single-page application, dynamically updating the view as the data changes without the need for specific listener code. If you have a website where this type of functionality is important (there’s more and more of them now) then it might fit the bill for you.
There are other JavaScript frameworks placed on the client to manage the flow of data from the server to your application, like
2. How to Embed AngularJS in your page?
For including AngularJS to your page you first need to download AngularJS library from its Official Website. After downloading the library copy or move the file to your project folder. Then include the file within your page same as we include a jQuery library or any other JavaScript file.
<script type="text/javascript" src="angular.min.js"></script>
Or you can directly include from CDN <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
Let’s create a new HTML file index.html and include AngularJS script on it.
<!DOCTYPE html>
<html lang="en" ng-app="">
<head >
<meta charset="UTF-8">
<title>First AngularJS program</title>
<script src="angular.min.js" type="text/javascript"></script>
</head>
<body>
<div>
</div>
</body>
</html>
In above HTML code, you may be noted that <html> tag contains ng-app attribute.
What is ng-app ?
ng-app is an AngularJS directive there are many such directives are available in AngularJS. Here, ng prefix stands for Angular. the ng-app directive is a starting point of AngularJS application. Angular Framework first checks the ng-app directive within the HTML page. If its found then Angular bootstrap itself and starts to manage the section of the page that have a ng-app directive. Everything within the HTML tag section will be managed by Angular.
Let’s do some Angular
Let’s compute the sum of 40 + 50.
Here, we use double curly braces {{ }} in Angular it means binding expressions. Within that, we can specify any Angular expression.
In above code, 40+50 treated as an expression and add both values.
When we execute the above program, it will produce the following output –
40 + 50 = 90
Now let’s change ng-app directive position in our current code
In our previous code <html> code contain ng-app directive. Let’s move the ng-app directive position to <div> tag and add another <div> and it also contains an Angular expression.
Here, ng-app directive only present in first <div> that means Angular going to manage only that section of the page and any children element it contains. Angular is not responsible for rest of the page that means second <div> element which contains Angular expression is not been evaluated.
When we execute the above program, it will produce the following output –
40 + 50 = 90
50 + 60 = {{ 50+60 }}
Valid expressions
Using relational operator to create an expression. It returns True or False based on values.
<div ng-app="">
{{ 31 > 20 }}
{{ 43 < 50 }}
{{ 13 >= 23 }}
{{ 12 <= 40 }}
{{ 5 == 5 }}
{{ 4 != 5 }}
</div>
Its gives the following Output –
true true false true true true
Using JavaScript object in expression
<div ng-app="">
{{ {name:'Yogesh',age:22}.name }}
</div>
Its gives the following Output –
Yogesh
JavaScript Array in expression
<div ng-app="">
{{ ['Yogesh','Sonarika','Vishal'][1] }}
</div>
Its gives the following Output –
Sonarika
3. Advantages
- Two-way Data binding
In AngularJS Framework Two-way data binding is an approach to synchronize the data between model and view that means if there is any change made in the model then the view will be updated.
While you can write a simple two-way data-binding event in jQuery, JavaScript MVC libraries provide a more declarative (using HTML) way of connecting models to your view.
- Faster application Development
The MVC architecture ensures that the application development, testing & maintenance is fast & quick! It helps in enhancing the productivity of the developers too!
- Less Code
It helps to write less code. Using AngularJS developers can achieve more functionality with writing less code.
- Templating
Angular combines the template with information from the model and controller to render the dynamic view that a user sees in the browser.
- Greate for SPA (Single Page Application)
Single Page Application(SPA) is a web application that fits on a single web page with dynamic actions without refreshing the page. Single Page Application interactions can be handled without reaching the server. Single Page Application can improve performance in several ways like loading time, using AJAX, easy to navigate pages etc. End users will be more comfortable with Single Page Application, It is very easy to navigate to different page and filter content.
- Supported by Google and a great development community.
4. Why?
To built more responsive web applications, full page refresh takes the time to built up a connection with the server while AJAX is amazingly fast in fetching data from already connected server. The community is awesome, it’s google.
Plus you can build an app like Gmail using it. I have listened from sources that Google is reinventing its Gmail app using AngularJS and the new design will roll out to soothe the eye of consumer and suit the needs of current web era.
