Monday, September 8, 2014

Simulating a RESTful service by splitting the JSON data across files using angularJS

<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.10/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
    <script>
      var countryApp = angular.module('countryApp', ['ngRoute']);

      countryApp.config(function($routeProvider) {
        $routeProvider.
          when('/', {
            templateUrl: 'country-list.html',
            controller: 'CountryListCtrl'
          }).
          when('/:countryId', {
            templateUrl: 'country-detail.html',
            controller: 'CountryDetailCtrl'
          }).
          otherwise({
            redirectTo: '/'
          });
      });

      countryApp.factory('countries', function($http){
        return {
          list: function (callback){
            $http({
              method: 'GET',
              url: 'countries.json',
              cache: true
            }).success(callback);
          },
          find: function(id, callback){
            $http({
              method: 'GET',
              url: 'country_' + id + '.json',
              cache: true
            }).success(callback);
          }
        };
      });

      countryApp.controller('CountryListCtrl', function ($scope, countries){
        countries.list(function(countries) {
          $scope.countries = countries;
        });
      });

      countryApp.controller('CountryDetailCtrl', function ($scope, $routeParams, countries){
        countries.find($routeParams.countryId, function(country) {
          $scope.country = country;
        });
      });

    </script>
  </head>
  <body>
    <div ng-view></div>
  </body>
</html>


country-detail.html

<h1>{{country.name}}</h1>
<ul>
  <li>Flag: <img ng-src="{{country.flagURL}}" width="100"></li>
  <li>Population: {{country.population | number }}</li>
  <li>Capital: {{country.capital}}</li>
  <li>GDP: {{country.gdp | currency }}</li>
</ul>


country-list.html

<ul>
  <li ng-repeat="country in countries">
    <a href="#/{{country.id}}">{{country.name}}</a>
  </li>
</ul>


countries.json

[
  {
    "name": "China",
    "id": 1
  },
  {
    "name": "India",
    "id": 2
  },
  {
    "name": "United States of America",
    "id": 3
  }
]


country_1.json

{
  "name": "China",
  "population": 1359821000,
  "flagURL": "//upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg",
  "capital": "Beijing",
  "gdp": 12261
}


country_2.json

{
  "name": "India",
  "population": 1205625000,
  "flagURL": "//upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg",
  "capital": "New Delhi",
  "gdp": 4716
}


country_3.json

{
  "name": "United States of America",
  "population": 312247000,
  "flagURL": "//upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg",
  "capital": "Washington, D.C.",
  "gdp": 16244
}

No comments: