AngularJS

 

 

angularjs

Introduction to  AngularJS

AngularJS version 1.0 was released in 2012.

Misko Hevery, a Google employee, started to work with AngularJS in 2009.

AngularJS is a JavaScript framework designed for creating single page web application.

AngularJS is entirely based on HTML and JavaScript, so there is no need to learn any other syntax or language.

What is AngularJS?

AngularJS is structural framework for dynamic web apps. It lets you use HTML as your template language and lets you HTML’s syntax to your application’s components clearly and succinctly. AngularJS’s data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Features of AngularJS

1.You don’t need to write special code to bind data to the HTML controls. This can be done by just adding few snippets of code.

2.When carrying out DOM(document object model) manipulation a lot of JavaScript was required to be written to design any application. But with AngularJS, you will be amazed with the lesser amount of code need to write for DOM manipulation.

3.AngularJS provides developers options to write client side application(using JavaScript) in clean MVC(model view controller).

4.AngularJS is open source, completely free, and used by thousands of developers around the world

 

Advantages of AngularJS

1.MVC(Model view controller)

Most frameworks require programmers to splitting the app into multiple MVC components. After that, the programmer has to write a code to put them together again. AngularJS, however, strings it together automatically. That saves you time, and reduces the app’s time to market.

2.Two way Binding

It is possible to do two way binding with AngularJS, meaning you can make any data related  changes and would immediately be propagated to the corresponding views and when any change is made in the view, that would happen in the underlying models as well. As soon as the app data changes, there will be corresponding changes in the UI as well.

3.Dependency Injection

The built in dependency injection is something most developers love about AngularJS. This feature helps them to develop, test and understood application in a better way.

Dependency Injection is a software design pattern in which components are given their dependencies  instead of hard coding them within the component. This relieves a component from locating the dependency and makes dependencies configurable. This helps in making component reusable, maintainable and testable.

4.Routing

AngularJS can take care of routing which means moving from one view to another. This is the key fundamental of single page application, wherein you can move to different functionalities in your web application based on user interaction but still stay on the same page.

Disadvantages of AngularJS

Though AngularJS comes with lots plus points but same time we should consider the following points:-

1.Confusing

There are multiple ways to do the same thing with AngularJS sometimes, it can be hard for novices to say which way is better for a task. Hence it is imperative for programmers to develop an understanding of the various components and how they help.

2.Not secure

Being JavaScript only framework, application written in AngularJS are not safe. Server side an authentication is must to keep an application secure.

3.Not degradable

If your application user disables JavaScript then user will just see the basic page and nothing.

First AngularJS program

Before we start with creating our first AngularJS program, let us see what are the important part of a AngularJS application

1.ng-app

This directive defines AngularJS application.

2.ng-model

This directive bind the value of HTML controls to application data.

3.ng-bind

This directive bind the application data to HTML view.

4.Expression

AngularJS expression can be written inside double braces.{{expression}}

NOTE:

AngularJS lets you extend HTML with new attribute called directive.

AngularJS directive are prefix with ng-.

Steps to create AngularJS program

1.Load framework

framework

 2.Declare HTML body as an AngularJS application using ng-app

ngapp

3.Define model name using ng-model directive

ngmodel

4.Accesing member varible

expression

Now our first AngularJS program

first

output

output1

output2

 

 

What do you think?

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s