angular object service

test for creating an angular object service

by flexin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div ng-app="denjanew" ng-controller="ObjectController as oc">
    <h2>This is the new Denja Object Service test page</h2>
    view: <select ng-model="oc.view">
              <option value="list">List all objects</option>
              <option value="view">View an object</option>
              <option value="update">Update an object</option>
              <option value="test-unsupported">Unsupported view (test)</option>
            </select><br/>
    class: {{oc.data.meta.classname}}
    
    <div object-browser objectcontroller="oc"/>
</div>




<hr/>

<div ng-app="denja" class="row">
    <div class="col-md-12">
<div ng-controller="ObjectController as o">
    VIEW: <select ng-model="o.view">
      <option value="list">List all objects</option>
      <option value="view">View an object</option>
      <option value="update">Update an object</option>
    </select>
    <span ng-hide="o.view == 'list'">
        
    OBJECT: <select ng-model="o.id">
      <option value="{{ob.id}}" ng-repeat="ob in o.objects">{{ob.name.tv}} {{ob.firstname.tv}}</option>
      
    </select>
    </span>
    <hr/>selected view: {{o.view}} <span ng-hide="o.view == 'list'">- selected object ID: {{o.id}}</span>

<hr>
    <div ng-hide="o.view == 'list'"><a href="#" ng-click="o.setView('list')">back to list</a></div>
<div ng-show="o.view == 'list'" class="well">
    ORDER BY: {{o.order.by}}
    <table class="table table-striped table-hover table-bordered">
        <tr>
            <th ng-repeat="a in o.attr"><a href="" ng-click="o.order.by = a.name + '.tv'; o.order.reverse = -o.order.reverse;">{{a.caption}}</a></th><th></th>
        </tr>
        <tr ng-repeat = "obj in o.objects |...

JavaScript

(function() {
    // creating new app
    var newapp = angular.module('denjanew', ['ngRoute']);
    // creating object service
    newapp.factory('ObjectService', ['$interval', function($interval) {
      var d = {
        data: {
          meta: {
            classname: 'customer',
            attributes: [
              {nm: 'name', dt: 'text', cp: 'Naam'},
              {nm: 'fname', dt: 'text', cp: 'Voornaam'},
              {nm: 'country', dt: 'objid', cp: 'Land', rc: 'Country'}
            ]
          },
          objects: [
              {name: {tv: 'Heremans', v: 'Heremans'}, fname: {tv: 'David', v: 'David'}, country: {tv: 'Belgium', v: 1}},
              {name: {tv: 'Vincke', v: 'Vincke'}, fname: {tv: 'Ellen', v: 'Ellen'}, country: {tv: 'Belgium', v: 1}}
          
          ]
        }
      }
      return d;
    }]);
    // creating object controller                        
    newapp.controller('ObjectController', ['$scope', 'ObjectService', 
      function($scope, ObjectService) {
          this.view = 'list'; // should not be in the service...
          this.data = ObjectService.data;
          
          $scope.data = ObjectService.data;
          $scope.view = 'list';
          
   
                                     
      }]);
    
    // object directive...
    newapp.directive('objectBrowser', function($compile) {
        var linker = function(scope, element, attrs) {
            scope.$watch('oc.view', function(){
                element.html(getTemplate(scope.oc.view));
                $compile(element.contents())(scope);
            });
        }    
        
        var getTemplate = function(view) {
            switch(view) {
                case 'list':
                    var t = '<h3>List of {{oc.data.meta.classname}}';
                    break;
                case 'view':
                    var t = 'Detail view for object goes here...{{oc.view}}';
                    break;
                case 'update':
                    var t...