Last some days I have been working with AngularJS, it is a Javascript MVC framework created by Google. Now Angular.js is my personal favorite framework to build better architecture web projects, especially for RESTful web services. It improves HTML with new attributes and expressions in order to define powerful templates directly in your HTML page.
Download Script 
Live DemoTry this demos with server.
How to use?
Step 1
Include the ng-app directive and id='ng-app'(for Internet Explorer browser) to the <html> tag, so Angular knows to execute on the web page.
<!doctype html>
<html lang="en" ng-app id="ng-app">
<html lang="en" ng-app id="ng-app">
ng-app
Declares an element as a root element of the application allowing behavior to be modified through custom HTML tags.
Step 2
You have to include Angular <script> tag within the tag HEAD.
<script src="js/angular.js"></script>
Step 3
AngularJS directives are accessed through HTML attributes, here <i>ng-controller</i> directive sets up a namespace, where you can place Angular JavaScript to control the data and evaluates HTML expressions.
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax">
{{post.description}}
</div>
{{post.description}}
</div>
Posts.json
Sample JSON contains blog feed data.
[
{
"title":"Multiple Ajax Image Upload without Refreshing Page using Jquery.",
"url":"http://www.9lessons.info/2013/08/multiple-ajax-image-upload-refreshing.html",
"banner":"multiple.jpg",
"description":"Some Tesxt",
"time":"Tuesday, August 6, 2013" ,
"author":"Srinivas Tamada"
},
{
"title":"Wall Script 6.0",
"url":"http://www.9lessons.info/2013/07/wall-script.html",
"banner":"WallBanner.jpg",
"description":"Some Text",
"time":"MONDAY, JULY 29, 2013" ,
"author":"Srinivas Tamada"
},
{
"title":"Simple Drop Down Menu with Jquery and CSS",
"url":"http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html",
"banner":"dropdown.png",
"description":"Some Text",
"time":"WEDNESDAY, JUNE 20, 2012" ,
"author":"Ravi Tamada"
},
....
....
....
]
{
"title":"Multiple Ajax Image Upload without Refreshing Page using Jquery.",
"url":"http://www.9lessons.info/2013/08/multiple-ajax-image-upload-refreshing.html",
"banner":"multiple.jpg",
"description":"Some Tesxt",
"time":"Tuesday, August 6, 2013" ,
"author":"Srinivas Tamada"
},
{
"title":"Wall Script 6.0",
"url":"http://www.9lessons.info/2013/07/wall-script.html",
"banner":"WallBanner.jpg",
"description":"Some Text",
"time":"MONDAY, JULY 29, 2013" ,
"author":"Srinivas Tamada"
},
{
"title":"Simple Drop Down Menu with Jquery and CSS",
"url":"http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html",
"banner":"dropdown.png",
"description":"Some Text",
"time":"WEDNESDAY, JUNE 20, 2012" ,
"author":"Ravi Tamada"
},
....
....
....
]
Angular Javascript
Angular Ajax API call
<script>
function PostsCtrlAjax($scope, $http)
{
$http({method: 'POST', url: 'js/posts.json'}).success(function(data)
{
$scope.posts = data; // response data
});
}
</script>
function PostsCtrlAjax($scope, $http)
{
$http({method: 'POST', url: 'js/posts.json'}).success(function(data)
{
$scope.posts = data; // response data
});
}
</script>
HTML - Data Binding
We can display JSON data values from using their attributes in expressions like {{post.title}}, {{post.url}}, etc.. Here the id="ng-app" is most important for Internet Explorer browser data binding.
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax">
<div ng-repeat="post in posts">
<h2>
<a href='{{post.url}}'>{{post.title}}</a>
</h2>
<div class='time'>{{post.time}} - {{post.author}} </div>
<p>{{post.description}}</p>
<img ng-src="{{post.banner}}" />
</div>
</div>
<div ng-repeat="post in posts">
<h2>
<a href='{{post.url}}'>{{post.title}}</a>
</h2>
<div class='time'>{{post.time}} - {{post.author}} </div>
<p>{{post.description}}</p>
<img ng-src="{{post.banner}}" />
</div>
</div>
ng-controller
Specifies a JavaScript controller class that evaluates HTML expressions.
ng-repeat
Instantiate an element once per item from a collection.
Data Filter - ng-show
ng-show directive is helps you display specific result.
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax" ng-show="post.author== 'Ravi Tamada'">
Live Demo (Single Result)Uppercase
For getting uppercase results, you can do this with CSS too just adding text-transform:uppercase; style.
<h2>
{{post.title | uppercase}}
</h2>
{{post.title | uppercase}}
</h2>
Final Code - index.html
<!doctype html>
<html lang="en" ng-app id="ng-app">
<head>
<title>Page Title</title>
<script src="js/angular.js"></script>
<script>
function PostsCtrlAjax($scope, $http)
{
$http({method: 'POST', url: 'js/posts.json'}).success(function(data)
{
$scope.posts = data; // response data
});
}
</script>
</head>
<body>
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax">
<div ng-repeat="post in posts" >
<h2>
<a href='{{post.url}}'>{{post.title}}</a>
</h2>
<div class='time'>{{post.time}} - {{post.author}} </div>
<p>{{post.description}}</p>
<img ng-src="{{post.banner}}" />
</div>
</div>
</body>
</html>
<html lang="en" ng-app id="ng-app">
<head>
<title>Page Title</title>
<script src="js/angular.js"></script>
<script>
function PostsCtrlAjax($scope, $http)
{
$http({method: 'POST', url: 'js/posts.json'}).success(function(data)
{
$scope.posts = data; // response data
});
}
</script>
</head>
<body>
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax">
<div ng-repeat="post in posts" >
<h2>
<a href='{{post.url}}'>{{post.title}}</a>
</h2>
<div class='time'>{{post.time}} - {{post.author}} </div>
<p>{{post.description}}</p>
<img ng-src="{{post.banner}}" />
</div>
</div>
</body>
</html>
