Friday, September 19, 2014

You got to love services in AngularJS.

So now that I  have the basics working it is time to refactor, so creating new datagrids will be a lot easier. I have made a service that handles all grid functionality. I call it the BrowseService.
Now the Controller for loading and handling the sorting and querying looks as follows:



var CompaniesApp = angular.module('Companies', ['CompanyService','ContractService','BrowseService']);

CompaniesApp.controller("CompaniesGridCtrl", function($http, $scope, $location, CompanySrv,BrowseSrv){
 // Grid Controller uses CompanySrv as the service to get the data from, and BrowseSrv to manage the grid. 
 $scope.companyData = CompanySrv.data;        // Let scope data point to to service data
 $scope.Browse=BrowseSrv;
 $scope.SearchString="";
 BrowseSrv.Init('/NewCompany','/EditCompany/','Name:',$scope.SearchString,CompanySrv.getCompanies,CompanySrv.deleteCompany);
 BrowseSrv.loaddata('Name');         // initial data load

}); 

As you can see, I also pass the BrowseService as a dependency.  I set the
$scope.Browse=BrowseSrv; 
so I can call the service from my HTML 

I my HTML I can then code the following referring to the service:


<div>
 <table id="box-table-a" style="width: 70%">
  <thead>
   <tr>
    <th scope="col"></th>
    <th scope="col"><b>{{Browse.getsearchlabel()}}</b><input type="text"
     ng-model="SearchString" ng-change="Browse.refresh(SearchString)"></th>
    <th scope="col"></th>
    <th scope="col"></th>
    <th scope="col"></th>
    <th scope="col"></th>
    <th scope="col"><button id="newbutton"
      ng-click="Browse.GotoNew()">&nbsp; &nbsp;&nbsp;&nbsp;
      Nieuw &nbsp;&nbsp;&nbsp;</button></th>
   </tr>
  </thead>
  <thead>
   <tr>
    <th scope="col"><a href=""
     ng-click="Browse.ChangeSortOrder('Company_id','Nr:')">Id</a></th>
    <th scope="col"><a href=""
     ng-click="Browse.ChangeSortOrder('name','Naam:')">Naam</a></th>
    <th scope="col"><a href=""
     ng-click="Browse.ChangeSortOrder('Contact_Name','Contact persoon:')">Contact
      persoon</a></th>
    <th scope="col"><a href=""
     ng-click="Browse.ChangeSortOrder('Contact_Tel','Contact Tel-Nr:')">Contact
      Tel-Nr</a></th>
    <th scope="col"><a href=""
     ng-click="Browse.ChangeSortOrder('Contact_Email','Contact E-mail:')">Contact
      E-mail</a></th>
    <th scope="col"></th>
    <th scope="col"></th>
   </tr>
  </thead>
  <tbody>
   <tr ng-repeat="Company in companyData.companies">
    <td>{{Company.Company_Id}}</td>
    <td>{{Company.Name}}</td>
    <td>{{Company.Contact_Name}}</td>
    <td>{{Company.Contact_Tel}}</td>
    <td>{{Company.Contact_Email}}</td>
    <td>
     <button id="editbutton" ng-click="Browse.Edit(Company.Company_Id)">wijzig</button>
    </td>
    <td>
     <button id="deletebutton"
      ng-click="Browse.deleterow(Company.Company_Id)">verwijder</button>
    </td>
   </tr>
  </tbody>
  <tfoot id="tf">
   <tr>
    <td></td>
    <td><a href="" ng-click="Browse.Previous()">Vorige</a>&nbsp;<a href=""
     ng-click="Browse.Next()">Volgende</a></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
   </tr>
  </tfoot>
 </table>
</div>

You have to love Angular !

No comments: