Kategorie
Bez kategorii

Task 9

Example number 30

<html ng-app="countryApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
    <script>
      var countryApp = angular.module('countryApp', []);
      countryApp.controller('CountryCtrl', function ($scope, $http){
        $http.get('countries.json').success(function(data) {
          $scope.countries = data;
        });
      });
    </script>
  </head>
  <body ng-controller="CountryCtrl">
    <table>
      <tr>
        <th>Country</th>
        <th>Population</th>
        <th>Flag</th>
        <th>Capital</th>
        <th><a href="http://en.wikipedia.org/wiki/List_of_countries_by_GDP_(PPP)">GDP (PPP)</a></th>
      </tr>
      <tr ng-repeat="country in countries">
        <td>{{country.name}}</td>
        <td>{{country.population}}</td>
        <td><img ng-src="{{country.flagURL}}" width="100"></td>
        <td>{{country.capital}}</td>
        <td>{{country.gdp}}</td>
      </tr>
    </table>
  </body>
</html>

This is an example of a simple AngularJS application that displays data from a JSON file in a table.

The index.html file contains the HTML code for the application. On line 1, the ng-app directive is used to declare the name of the AngularJS application as „countryApp”. On line 7, the AngularJS module is defined with the same name, „countryApp”. The module is used to define the controller on line 8, which is named „CountryCtrl”. The $scope and $http services are injected into the controller as dependencies.

Inside the controller function, the $http service is used to make a GET request to the „countries.json” file on line 9. On success, the response data is assigned to the $scope variable „countries” on line 10.

In the HTML code, the ng-controller directive is used to associate the „CountryCtrl” controller with the <body> element on line 15. The ng-repeat directive on line 24 is used to iterate over the „countries” array in $scope and generate a row in the table for each object in the array. The {{ }} expressions on lines 25-30 are used to display the properties of each object in the table cells. Finally, the „countries.json” file contains an array of objects, each representing a country and its properties such as name, population, flag URL, capital and GDP. The data is structured as a JSON array, with each object enclosed in curly braces and separated by commas.

Another example on next page.