AngularJS example showing different ways to pull JSON data in via service. Initial page load, from a .json file, and from REST API.

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.2.7" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular.js"></script>
    <script data-require="angular-resource@1.2.7" data-semver="1.2.7" src="http://code.angularjs.org/1.2.7/angular-resource.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
    <script type="text/javascript">
    // Define an array of Toddler objects
    window.toddlers = [
      {
        "name": "Toddler One",
        "birthday": "1/1/2011",
        "happy": true
      },
      {
        "name": "Toddler Two",
        "birthday": "2/2/2011",
        "happy": true
      },
      {
        "name": "Toddler Three",
        "birthday": "3/3/2011",
        "happy": false
      }
    ];      
    </script>
  </head>

  <body>
    <h1>AngularJS - Using models from different JSON sources</h1>
    <ul>
      <li>JSON defined during initial page load</li>
      <li>Using a static JSON file</li>
      <li>Using a REST API</li>
    </ul>
    <div ng-controller="PersonCtrl">
    
      <h2>Toddlers - using JSON from initial page load</h2>
      <table>
        <tr>
          <th>Name</th>
          <th>Birthday</th>
          <th>Happy?</th>
        </tr>
        <tr ng-repeat="toddler in toddlers">
          <td>{{toddler.name}}</td>
          <td>{{toddler.birthday}}</td>
          <td>{{toddler.happy}}</td>
        </tr>
      </table>
      
      <h2>Teens - using a static JSON file</h2>
      <table>
        <tr>
          <th>Name</th>
          <th>Birthday</th>
          <th>Happy?</th>
        </tr>
        <tr ng-repeat="teen in teens">
          <td>{{teen.name}}</td>
          <td>{{teen.birthday}}</td>
          <td>{{teen.happy}}</td>
        </tr>
      </table>      
      
      <h2>Adults - using a REST API</h2>
      <table>
        <tr>
          <th>Name</th>
          <th>Birthday</th>
          <th>Happy?</th>
        </tr>
        <tr ng-repeat="adult in adults">
          <td>{{adult.name}}</td>
          <td>{{adult.birthday}}</td>
          <td>{{adult.happy}}</td>
        </tr>
      </table>  
      
      <h2>Single Adult - using a REST API</h2>
      <table>
        <tr>
          <th>Name</th>
          <th>Birthday</th>
          <th>Happy?</th>
        </tr>
        <tr>
          <td>{{singleAdult.name}}</td>
          <td>{{singleAdult.birthday}}</td>
          <td>{{singleAdult.happy}}</td>
        </tr>
      </table>       
      
    </div>
  </body>

</html>

/**
 * Instantiate the app, the 'myApp' parameter must match 
 * what is in ng-app
 */
var myApp = angular.module('myApp', ['ngResource']);

// Create services for each Toddler, Teen, Adult

/**
 * Toddler is a service initialized using data from the 
 * initial page load
 * The initial data is loaded into a variable in a script 
 * block in index.html
 */
myApp.factory('Toddler', function($resource) {
  return $resource('toddlers.json');
});

/**
 * Teen is a service that calls a local .json file teens.json
 * The query method is added to allow returning an array of 
 * multiple Teen objects
 */
myApp.factory('Teen', function($resource) {
  return $resource('teens.json');
});

/**
 * Adult is a service that calls a REST API
 * It's not really a REST API, but just calling our local .json file
 * as an example
 * If you call Adult.query(), it will GET adults.json
 * If you call Adult.get({}, {aid: 1}) it will GET adults/1.json
 */
myApp.factory('Adult', function($resource) {
  return $resource('adults/:adultId.json', {adultId: '@aid'});
});

// Create the controller, the 'PersonCtrl' parameter must 
// match an ng-controller directive
myApp.controller('PersonCtrl', function ($scope, Toddler, Teen, Adult) {
  
  // Initialze Toddlers from JSON defined on initial page load
  $scope.toddlers = [];
  angular.forEach(window.toddlers, function (item) {
    $scope.toddlers.push(new Toddler(item));
  });
  
  // Teens are from static json file
  $scope.teens = Teen.query();
  
  // Adults are from REST API
  $scope.adults = Adult.query();
  
  // Example of grabbing single Adult from REST API
  $scope.singleAdult = Adult.get({}, {aid: 1});
  
});

body {
  font-size: 24px;
}

[
  {
    "name": "Teen One",
    "birthday": "1/1/2001",
    "happy": true
  },
  {
    "name": "Teen Two",
    "birthday": "2/2/2001",
    "happy": true
  },
  {
    "name": "Teen Three",
    "birthday": "3/3/2001",
    "happy": false
  }
]

[
  {
    "aid": 1,
    "name": "Adult One",
    "birthday": "1/1/1991",
    "happy": true
  },
  {
    "aid": 2,
    "name": "Adult Two",
    "birthday": "2/2/1991",
    "happy": true
  },
  {
    "aid": 3,    
    "name": "Adult Three",
    "birthday": "3/3/1991",
    "happy": false
  }
]

{
  "name": "Adult One",
  "birthday": "1/1/1991",
  "happy": true
}