Angular JS – Remote JSon Binding

testFeed.js

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular JS</title>
</head>
<body>
    <style>
        table, th, td
        {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
        }
 
            table tr:nth-child(odd)
            {
                background-color: #f1f1f1;
            }
 
            table tr:nth-child(even)
            {
                background-color: #ffffff;
            }
    </style>
 
    <div data-ng-app="" data-ng-controller="myController">
 
        <!--
            I can get the model from a remote jSon and bound it to the
            controls. In this way is also possible to fetch data from a db
            -->
        <h3>Remote model binding</h3>
        <ul>
            <li data-ng-repeat="place in places">
                <p>The place is: {{ place.Name + ', ' + place.Country }}</p>
            </li>
        </ul>
        <hr />
 
        <!--
            It's easy to use the "data-ng-repeat" to display data in table
            -->
        <h3>Display data in a table</h3>
        <table>
            <tr>
                <th>Name</th>
                <th>City</th>
                <th>Country</th>
            </tr>
            <tr data-ng-repeat="place in places | orderBy : 'Country'">
                <td>{{place.Name}}</td>
                <td>{{place.City}}</td>
                <td>{{place.Country | uppercase}}</td>
            </tr>
        </table>
    </div>
 
    <script>
        function myController($scope, $http) {
            var site = "";
            var page = "/JS/Feeds/testFeed.js";
 
            //Get jSon data from the server
            $http.get(site + page).success(function (data, status, headers, config) {
 
                //Add the response to the model
                $scope.places = data;
            });
        }
    </script>
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
</body>
</html>

Advanced use of $http

Even though we can use $http.get() and $http.post() to refer the main two HTTP methods while requiring remote data, there is a more general way to use this object. Indeed we can just invoke $http() itself with a JSon configuration object. Here some examples:

$http({
    url: 'api/me-entity/save',
    method: 'POST',
    data: entityModel,
    headers: { 'Content-Type': 'application/json' }
}).success(function (data) {
    alert('success');
}).error(function (error) {
    alert('error');
});

$http({
    url: 'api/me-entity/get/' + entityId,
    method: 'GET',
    headers: { 'Content-Type': 'application/json' }
}).success(function (data) {
    alert('success');
}).error(function (error) {
    alert('error');
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s