Breeze/Angular Client-defined Metadata Example

<!DOCTYPE html>
<html>

  <head></head>

  <body ng-app="app" ng-controller="Main as vm">
    <h1>{{vm.title}}</h1>
    <h3>{{vm.message}}</h3>
    <ul>
      <li ng-repeat="member in vm.members">
          <a ng-href="{{member.html_url}}" target="_blank">[{{member.id}}] {{member.login}}</a>
      </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.labs/master/breeze.angular.js"></script>
    <script src="script.js"></script>
  </body>

</html>

(function () {

    var app = angular.module('app', ['breeze.angular']);

    app.controller('Main', MainController);
 
 
 
    
    ///////////////////////
    
    function MainController($q, breeze){
      var vm = this;
      vm.message = '... waiting for github angular Members ...';
      vm.title = 'Angular Team Members on github';
      vm.members = [];
 
      
      // create a new EntityManager talking to the github api 
      var ds = new breeze.DataService({
          serviceName: "https://api.github.com/",
          hasServerMetadata: false 
      });
      
      var manager = new breeze.EntityManager({dataService: ds});
      
      
      
      // Add metadata
      var memberType = {
          shortName: 'Member',

          dataProperties: {
            id:          { dataType: breeze.DataType.Int64, isPartOfKey: true },
            login:       { /* string type by default */ },
            html_url:    { }
          }  
        };
        
      manager.metadataStore
             .addEntityType(new breeze.EntityType(memberType));      

 
      // QUERY github
 
      // Get angular team members 
      var query = breeze.EntityQuery.from('orgs/angular/members')
                         // Must tell Breeze that response data are Members
                        .toType('Member');
      
      manager.executeQuery(query)
        .then(success)
        .then(getMembersFromCache)
        .catch(fail);


      function success(data){
        console.log('Got '+ data.results.length+ ' items returned from github');
        // We throw these results away!!!
      }
      
      function getMembersFromCache(){
        var cachedMembers = manager.getEntities('Member');
        vm.message = "There are "+cachedMembers.length + " github Members in cache"; 
        vm.members = cachedMembers;
      }
      
      function fail(error) {
          console.log("Angular team member query failed: " + error.message);
      }       

    }

}());

#Breeze/Angular Client-defined Metadata Example

Shows how to define metadata on the client and query
an existing API that you don't control.

>You must run this sample in an ES5-capable browser. It won't work in IE8.

This example defines metadata for a single type, the "Member" type from the
github API. 

>It defines only the Member properties the application needs; the rest are ignored.

Having defined metadata for the Member type, the app queryies the github API 
for members of the AngularJS team.

##The .toType(...) clause
Note the `.toType('Member')` clause on the query. Try commenting that out.

The display shows "0 members". Open the dev tools and look at the console.
It reports that Breeze received member data from github ... and could have
sent those data, as-is, directly to the ViewModel for display.

Instead, we ignore the query results and extract all Member entities from
the Breeze `EntityManager` cache. There are none ... as you can see.

###What's going on
Breeze doesn't know that the data are Member entities unless we tell Breeze to 
treat them as Member entities. We *could teach Breeze* to recognize the data as 
Members by writing a custom `JsonResultsAdapter`. 
That's a lesson for another time.

Technically, we didn't have to define the metadata at all because we're just
getting data and throwing it on the screen. In the absence of metadata, the
query results would be raw JavaScript objects rather than entities in cache.

But where's the fun in that?