Angular JS – Remote JSon Binding


<!DOCTYPE html>
<html xmlns="">
    <title>Angular JS</title>
        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;
    <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>
            <li data-ng-repeat="place in places">
                <p>The place is: {{ place.Name + ', ' + place.Country }}</p>
        <hr />
            It's easy to use the "data-ng-repeat" to display data in table
        <h3>Display data in a table</h3>
            <tr data-ng-repeat="place in places | orderBy : 'Country'">
                <td>{{place.Country | uppercase}}</td>
        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 src="//"></script>
    <script src="//"></script>

Advanced use of $http

Even though we can use $http.get() and $ 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:

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

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

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s