AngularJS $http example

by Sahan Serasinghe

HTML

<div data-ng-app='httpApp' data-ng-controller='httpAppCtrlr'>
     <h1> AngularJS <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_customers_json'> $http examples</a> </h1>

    <p>In a <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_simple'>table</a> with <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_even'>conditions</a>

    </p>
    <table>
        <tr>
            <th>Name</th>
            <th>Country</th>
            <tr>
                <tr data-ng-repeat="n in names | orderBy: 'Country'">
                    <td ng-if="$odd" style="background-color:red">{{ n.Name }}</td>
                    <td ng-if="$even">{{ n.Name }}</td>
                    <td ng-if="$odd" style="background-color:green">{{ n.Country }}</td>
                    <td ng-if="$even">{{ n.Country }}</td>
                </tr>
    </table>
    <p>In a <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_orderby'>ordered by</a> Country <a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_simple'>table</a>

    </p>
    <table>
        <tr>
            <th><a href='http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_index'>Index</a>

            </th>
            <th>Name</th>
            <th>Country</th>
            <tr>
                <tr data-ng-repeat="n in names | orderBy: 'Country'">
                    <td>{{$index + 1}}</td>
                    <td>{{n.Name}}</td>
                    <td>{{n.Country}}</td>
                </tr>
    </table>
    <p>Single values</p>
    <ul>
        <li data-ng-repeat='n in names'>{{n.Name}}</li>
    </ul>
    <p>Whole JSON</p>
    <ul>
        <li data-ng-repeat='n in names'>{{n}}</li>
    </ul>
</div>

CSS

/*source: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_css*/
 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;
}

JavaScript

var app = angular.module('httpApp', []);

app.controller('httpAppCtrlr', function ($scope, $http) {
$scope.mydata = {};

function GetData(){
         $http({
            method: 'GET',
            url: 'https://jsonplaceholder.typicode.com/posts/1',
        }).then(function successCallback(response) {
            // this callback will be called asynchronously
            // when the response is available
            $scope.mydata = response.data;
            //GetData();
        }, function errorCallback(response) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
        });
   	}
});