AngularJS Tutorial RESTful JSON Parsing
Wall Script
Wall Script
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.
web notification

31 comments:

  1. Fantastic article.

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

    ReplyDelete
  2. Very nice starting...

    I am working on my project since 2 month

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

    ReplyDelete
  4. Thank you, been waiting for this tutorial.

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

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

    ReplyDelete
  7. Awesomwe tutorial man. Thanks for it!

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

    ( something like google spreadsheet data as json )

    ReplyDelete
  9. 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

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

    ReplyDelete
  11. 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..

    ReplyDelete
  12. 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 :~)

    ReplyDelete
  13. 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.

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

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

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

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

    ReplyDelete
  18. You're cool! Thank you!

    ReplyDelete
  19. Thank you, it was good for my project

    ReplyDelete
  20. POST was leading to 404 error in my case (Not sure why). So changed it to GET. Worked like a charm.

    ReplyDelete
  21. I have issue in parsing the data. REST webservice developed using WCF. I can see returndata using Fiddler, but when I try to loop and display, it will do anything.
    service model is angular.module('myApp.restServices', ['ngResource'])
    .factory('Employee', ['$resource',
    function ($resource) {
    var data = $resource('http://localhost/Services/Service.svc/requests', {},{query : {method: 'GET',isArray :false}});
    return data;

    }]);

    Controller is:
    .controller('EmployeeListCtrl', ['$scope', 'Employee', function ($scope, Employee) {
    alert("Employee");
    $scope.employees = Employee.query();
    }])

    HTML:
    I have taken out tags
    i ng-repeat="employee in employees"

    {{employee.Name}}
    {{employee.Id}}


    It will not print anything in the HTML.

    ReplyDelete
  22. Sir please help
    I'm new of AngularJS my friend ask me to create a table to store with below json but i don't know how to....
    first call that data to list in table and then when user click on each items they will see detail.

    [{"id":"7","title":"Seven is my lucky number","link":"/api/v1/items/7"},{"id":"8","title":"A Dance with Dragons","link":"/api/v1/items/8"},{"id":"10","title":"Ten ways to a better mind","link":"/api/v1/items/10"},{"id":"42","title":"The Hitch-hikers Guide to the Galaxy","link":"/api/v1/items/42"},{"id":"200","title":"Book title #200","link":"/api/v1/items/200"},{"id":"201","title":"Book title #201","link":"/api/v1/items/201"},{"id":"202","title":"Book title #202","link":"/api/v1/items/202"},{"id":"203","title":"Book title #203","link":"/api/v1/items/203"},{"id":"204","title":"Book title #204","link":"/api/v1/items/204"},{"id":"205","title":"Book title #205","link":"/api/v1/items/205"}]

    ReplyDelete

mailxengine Youtueb channel
Make in India
X