9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Monday, August 19, 2013

AngularJS Tutorial RESTful JSON Parsing

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.

AngularJS Tutorial.


Download Script     Live Demo

Try 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">

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>


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"
},
....
....
....
]

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 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>

Final Code - index.html

<!doctype html>
<html lang="enng-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>

Next tutorial I will explain more about Angular directives.
Comments
{ 28 comments }
karthik said...

Fantastic article.

Thank you for the write up; it has helped me to understand a lot more about Angular Js.

Nics Patel said...

Very nice starting...

I am working on my project since 2 month

siddhu said...

nice explanation, even check this link too
http://viralpatel.net/blogs/angularjs-controller-tutorial/

Tawanda Abraham Makunike said...

Thank you, been waiting for this tutorial.

Anonymous said...

Thank you, it is really nice. Can't wait for more tutorials about AngularJs.

Thota Madhu Sudhan Rao said...

oh, my god !!,it's really awesome previously I used the parsing in the backend side

Sohil Memon said...

Awesomwe tutorial man. Thanks for it!

Ishara ( DarKneT ) said...

any clue what if we have to add remote json url ?

( something like google spreadsheet data as json )

strikingv said...

If its "parsing html" the strength of angular js. Then I guess people who are using jQuery from long time do have better solutions!
There are many templating plugin in jquery.. Far easier

Badhrinath Canessane said...

That was great....a tutorial on using angular services and factory will b good.

Anonymous said...

nice

king said...

hey buddy nice article to begin with but one issue i guess you are calling post.json file ... in above to tutorial description... but reading from page

$scope.posts then why call post.json..

Shubham Kumar said...

very cool

iPhone Application Development said...

Always the good tutorials here I land here when get struggle to solve something but at the moment I will find a solution. And today learnt a good stuff on parsing.

Thanks for the content friend :~)

Benjamin SI Keil said...

It's an interesting introduction to Angular, but I don't see the connection to REST. Surely getting the list of posts is an idempotent, cacheable operation, better aligned with GET than with POST.

Wood Working Machinery said...

Thanks For Sharing.
In My Web Site I will Tell The developer To Use This So That i Can Get Beautiful Website.

Suhel Sayyad said...

Fantastic article...Would love to see some more tutorials on Angular...

Anton said...

Wow! It's so nice!

Manish Ranjan said...

great tuts...

LAMike said...

What if there is an array inside of the json file.... what would the syntax be for that?

Anonymous said...

uihyg

Aman Kumar said...

Great Sir

Sudhakar Narra said...

Thank u :)

Hugo said...

can this be done with the json file in a different server

Anonymous said...

This is garbage!

Anonymous said...

Good stuff m8!

Anonymous said...

You're cool! Thank you!

Rony Mattar said...

Thank you, it was good for my project

Post a Comment