Using AngularJS Framework
AngularJS is an MVC framework developed by Google that lets you build wellstructured, easily testable, and maintainable JavaScript web applications. It is designed to help you produce powerful, reliable, single-page web applications.
Read AngularJSAn Overview of AngularJS
AngularJS is an MVC framework that binds your HTML code (corresponding to the views part of the MVC paradigm) to JavaScript objects (the models part of MVC).
In one direction, any changes to your models update the page automatically. The opposite is also true—a model, for instance associated with a text field, is updated when the content of the field is changed. In the same manner, any changes in the view— such as a user entering informtion in a field, or clicking on a button—make the required changes to the appropriate model(s).
Behind the scenes, AngularJS handles all the logic, so you don’t have to write code to update your page’s HTML code, or to listen for and act upon user events.
Including AngularJS in your page
To use AngularJS you have to include it in your page. Perhaps the easiest way to do that is via Google’s CDN:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Extending HTML with ng- directives
AngularJS employs a number of directives that help you associate your page’s HTML elements to models in the MVC architecture. These directives each start with ng- and can be added to any element.
The key attribute that you have to include in any page is ng-app, which defines an AngularJS application. You need to apply this to an element that contains the rest of the page elements bearing ng- directives. You can apply it to the page’s <body> element (making the whole page part of the application), or a <div> element enclosing the application:
<body ng-app>
AngularJS finds this element when the page loads and processes all ng- directives it sees on its child elements
Two further important ng- directives are ng-model and ng-bind.
The ng-model directive connects the value of HTML controls such as input fields, select boxes, text areas and so on, to application data stored in models.
The ng-bind directive binds that application data, in the MVC models, to elements in the HTML view.
A Simple AngularJS Example
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example</title>
<style>
#output {
font: 28px bold helvetica, arial, sans-serif;
color: red;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
</head>
<body ng-app>
<p>Name: <input type="text" ng-model="name"></p>
<span id="output" ng-bind="name"></span>
</body>
</html>
AngularJS begins work as soon as the web page has loaded. The ng-app directive tells AngularJS that, in this case, it is the <body> element of the page that contains an AngularJS application.
The ng-model directive then binds the value contained by the input field to the variable name.
Similarly, the ng-bind directive binds the HTML content of the <span> element to the variable name. In this way, the <span> element becomes a view in our MVC framework
Now, any changes in the input field will be immediately reflected in the <span> element, as shown this snapshot.
That’s it. We already have a dynamic application that would ordinarily have taken much more code to build. We didn’t have to worry about writing code for data binding and updating, nor specify any models. In fact, we haven’t yet written any JavaScript of our own! The application—simple as it is—already works because of AngularJS’s design.
Scopes
A scope is an object that links a DOM element (the view part of the MVC architecture) to a controller; in MVC terms, this object becomes the model.
The controller and the view both have access to the scope model, so it can be used to communicate between them. This scope object will house the data and the methods to be used in the view.
All AngularJS applications have a $rootScope. The $rootScope is the top-most scope and belongs to the DOM element that contains the ng-app directive.
When explicit scopes are not set in the application, this is the scope used by AngularJS to bind data and functions. This is why the preceding example works.
To get a better idea of how scopes work, let’s attach a controller to a particular DOM element, creating a scope for that element, and then interact with it.
Directives
You saw a few directives in the previous example. In AngularJS a directive is a function attached to a DOM element that has the capability to run methods, attach controllers and scope objects, and manipulate the DOM.
When an AngularJS application is launched and Angular starts stepping through the DOM (starting from the DOM element having attribute ng-app), it will parse the code collecting and running these directives.
Directives handle all of the hard work of making AngularJS applications dynamic. We’ve seen a few examples of directives previously, including ng-model and ngbind:
If you want to read more about AngularJS then go this link "Angularjs Tutorial"