Breeze/Angular lookups example

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-app="app" ng-controller="MainController as vm">
    
    <h1>{{vm.title}}</h1>
    <p><em>{{vm.message}}</em></p>
    
    <h3>Categories</h3>
    <ul>
      <li ng-repeat="cat in vm.categories">
          [{{cat.CategoryID}}] {{cat.CategoryName}}
      </li>
    </ul>

    <h3>Categories in a combobox</h3>
    <p style="margin-left:24px">
      <strong>ProductID:</strong> {{vm.product.ProductID}} 
      <strong>Name:</strong> {{vm.product.ProductName}} 
      <strong>Category:</strong> ({{vm.product.CategoryID}})  
      <select ng-model="vm.product.Category" ng-options="cat.CategoryName for cat in vm.categories">
        <option value="">-- choose category --</option>
      </select>
    </p>
    
    <h3>Regions (modifiable)</h3>
    <ul>
      <li ng-repeat="reg in vm.regions">
          <!-- Editable so can investigate change scenario raised by JC -->
          [{{reg.RegionID}}] <input ng-model="reg.RegionDescription"/> 
          {{reg.entityAspect.entityState.name}}
      </li>
    </ul> 
    
    <p style="margin-left:24px">EntityManager hasChanges? <strong>{{vm.hasChanges()}}</strong>
    &nbsp;<a href="" ng-click="vm.cancel()">cancel</a></p> 
    
    <h3>Territories</h3>
    <ul>
      <li ng-repeat="ter in vm.territories">
          [{{ter.TerritoryID}}] {{ter.TerritoryDescription}}
      </li>
    </ul>    
    <script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
    <script src="https://cdn.rawgit.com/Breeze/breeze.js/master/build/breeze.debug.js"></script>
    <script src="https://cdn.rawgit.com/Breeze/breeze.js/master/build/adapters/breeze.bridge.angular.js"></script>    

    <!-- The App -->
    <script>
    
    (function () {
    
        // define the app module which depends upon the "breeze.angular" service
       angular.module('app', ['breeze.angular'])
              .controller('MainController', MainController);
     
        ///////////////////////
        
        function MainController(breeze, $q){
          var vm = this;
          var manager;
          vm.cancel = cancel;          
          vm.hasChanges = hasChanges;
          vm.message = 'Waiting for server to respond with lookups ...';
          vm.title = 'Breeze/Angular Lookups';
          vm.categories = [];
          vm.product;
          vm.regions = [];
          vm.territories = [];
          
          activate();
          
          ////////////
    
          function activate(){
            // create a new manager talking to sample service 
            var host="http://sampleservice.breezejs.com";
            var serviceName = host+"/api/northwind";
            manager = new breeze.EntityManager(serviceName);
          
            breeze.EntityQuery.from('Lookups')
              .using(manager).execute()
              .then(success).catch(failed);
          }
    
          function success(data) {
              var msg = ('Queried lookups');
              vm.message = msg;
              console.log(msg);
              
              // could get all lookups from data.results
              // but will pull from cache for this exercise
              // to prove that they actually are in cache
              vm.categories = manager.getEntities('Category');
              vm.regions = manager.getEntities('Region');;
              vm.territories = manager.getEntities('Territory')
                .sort(function(a, b){
                  return a.TerritoryDescription > b.TerritoryDescription ? 1 : -1;
                });

              // Create a product to bind to. Pretend it already exists                
              vm.product = manager.createEntity('Product', {
                ProductID: 42,
                ProductName: 'Maguffin',
                CategoryID: 6
              }, breeze.EntityState.Unchanged);
          }
          
          function failed(error) {
              var msg = "Lookups query failed: " + error.message;
              vm.message = msg;
              console.log(msg);
          }
          
          function cancel() {
            manager && manager.rejectChanges();
          }
          
          function hasChanges() {
            return manager && manager.hasChanges();
          }
        }
    }());
    </script>
  </body>
</html>

/* Styles go here */
body {font-family: helvetica, sans-serif}
ul {
    list-style-type:none;
    margin-left: -16px;
}

# Breeze/Angular Lookups Example


Explore the "Lookups" pattern in which Breeze retrieves multiple types of 
entities in a single request as when loading the cache with lots of
small "lookup" lists to populate comboboxes.

>Must run this sample in an ES5-capable browser. 
>
>If you don't see data,
check the network logs in the browser's developer tools to verify that the
server is responding; sometimes it's balky or goes down altogether.