Angular: Getting remote data

http://angularjs.org/

by fergal_doyle

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
         <h1>{{appName}}</h1>

        <button type="button" ng-click="getData()">Get data</button>
        <table>
            <thead>
                <tr>
                    <th>fcodeName</th>
                    <th>toponymName</th>
                    <th>name</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in geonames">
                    <td>{{item.fcodeName}}</td>
                    <td>{{item.toponymName}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

body {
    font-family: arial;
}
h1 {
    font-size: 1.5em;
}
table {
    width: 100%;
}
th, td {
    border: 1px solid #ccc;
    text-align: left;
}

JavaScript

// create the module
angular.module("myApp", []);

var url = "http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=de&username=demo";

// create the controller
angular.module("myApp").controller("MyCtrl", function ($scope, dataService, appName) {

    $scope.appName = appName;

    $scope.getData = function () {
        dataService.getGeoData().then(function (data) {
            $scope.geonames = data.data.geonames;
        });
    };
});

angular.module("myApp").value("appName", "My first app");

angular.module("myApp").factory("dataService", function ($http) {
    return {
        getGeoData: function () {
            return $http.get(url);
        }
    };
});