An introduction to AngularJS

An
Introduction to
AngularJS
By makitweb.com

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.

Intro
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 -
Backbone, Knockout, React, Meteor, Aurelia, etc.

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>

Example
<!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 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.
<!DOCTYPE html>
<html lang="en" ng-app="">
<head >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body >
<div >
40 + 50 = {{ 40+50 }}
</div>
</body>
</html>

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.

<!DOCTYPE html>
<html lang="en" >
<head >
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body>
<div ng-app="">
40 + 50 = {{ 40+50 }}
</div>
<div>
50 + 60 = {{ 50+60 }}
</div>
</body>
</html>

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>
Yogesh
JavaScript Array in expression
<div ng-app="">
{{ ['Yogesh','Sonarika','Vishal'][1] }}
</div>
Sonarika

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.

Advantages
● 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!
● Templating
Angular combines the template with information from the model and controller to
render the dynamic view that a user sees in the browser.

Advantages
● 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.

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.

Thanks!
yssyogesh@makitweb.com
@yssyogesh_singh on twitter
www.makitweb.com

An introduction to AngularJS

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (7)

Similar to An introduction to AngularJS

Similar to An introduction to AngularJS (20)

More from Yogesh singh

More from Yogesh singh (8)

Recently uploaded

Recently uploaded (20)

An introduction to AngularJS