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.
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">ng-app
Declares an element as a root element of the application allowing the 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>Posts.json
Sample JSON contains blog feed data.
[
{
"title":"Multiple Ajax Image Upload without Refreshing Page using Jquery.",
"url":"http://www.askgif.info/2013/08/multiple-ajax-image-upload-refreshing.html",
"banner":"multiple.jpg",
"description":"Some Tesxt",
"time":"Tuesday, August 6, 2013" ,
"author":"Test User"
},
{
"title":"Wall Script 6.0",
"url":"http://www.askgif.info/2013/07/wall-script.html",
"banner":"WallBanner.jpg",
"description":"Some Text",
"time":"MONDAY, JULY 29, 2013" ,
"author":"Shubhansh"
},
{
"title":"Simple Drop Down Menu with Jquery and CSS",
"url":"http://www.askgif.info/2012/06/simple-drop-down-menu-with-jquery-and.html",
"banner":"dropdown.png",
"description":"Some Text",
"time":"WEDNESDAY, JUNE 20, 2012" ,
"author":"Sumit"
},
....
....
....
]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>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>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 helps you display a specific result.
<div id="ng-app" ng-app ng-controller="PostsCtrlAjax" ng-show="post.author== 'Ravi Tamada'">Uppercase
For getting uppercase results, you can do this with CSS too just adding text-transform:uppercase; style.
<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>
