AngularJS - Introduction

AngularJS is the client-side technology, written entirely in JavaScript. It works with the long-established technologies of the web (HTML, CSS and JavaScript) to make the development of web apps easier and faster than even before.

AngularJS extends HTML with new attributes. It is a framework that is primarily used to build single-page web applications. AngularJS makes it incredibly easy to build web applications; it also makes easy to build complex applications.

Features

•  Separation of application logic, data models and view
•  Ajax Services
• Dependency Injections
•  Browser history ( makes bookmarking and back/forward buttons work like normal web apps )
• Testing
•  Cross browser compliant. AngularJS automatically handles JavaScript code suitable for each browser.
• And more…

Data binding and First AngularJS Web Application

Data binding is one of the most basic and impressive features of the AngularJS. Many classic Web frameworks combine data form the model and mashes them together with templates to deliver a view to the user. This combination produces a single way view, the view only reflect the data the model exposes at the time of the view rendering.

AngularJS takes different approach. Instead of merging the data in to the template and replacing a DOM element, AngularJS creates a live template as a view. Automatic data binding gives us the ability to consider the view to be a projection of the model state. Any time the model is changed in the client-side model, the view reflects these changes without writing any custom code.

Hello World example

Output

In above example we have just included angular.js in our HTML and explicitly setting the ng-app attribute on an element in the DOM. The ng-app attribute declares everything inside of it belongs to the Angular app; that’s how we can nest an Angular app inside of a web app. The only components that will be affected by the Angular are the DOM elements that we declare inside of the one with the ng-app attribute. Views are interpolated when the view is evaluated with one or more variable substitutions; the results is that the variables in our string are replaced with the values. For instance, if there is variable named name and it is equal to “Jatin”, string interpolation on a view of “Hello { { name } }” will return “Hello Jatin”.