Kategorie
Bez kategorii

Task 9

Example number 21

<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', ['$scope', '$http', 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>
      </tr>
      <tr ng-repeat="country in countries">
        <td>{{country.name}}</td>
        <td>{{country.population}}</td>
      </tr>
    </table>
  </body>
</html>

Moreover there is second file „countries.json” contains all data for executional html file.

This code is an example of using AngularJS to display a list of names using Looping over lists in templates using ng-repeat.

The HTML file has a script tag that references the AngularJS library, and it declares an AngularJS module named „nameApp” using the ng-app directive. The module has a single controller named „NameCtrl” declared using the controller() method, which is used to manage the data and behavior of a view.

The controller is passed the $scope object, which is used to store and manage the data for the view. In this case, the controller sets an array of names to the $scope.names property.

The view is defined in the body section of the HTML file, which uses the ng-controller directive to bind the controller to the view. The controller’s data is accessed in the view using the {{ }} syntax, which displays the names from the $scope.names array using the ng-repeat directive.

Overall, this code demonstrates how AngularJS can be used to create dynamic web applications by separating the data, presentation, and behavior into different components.

Another example on next page.