title: Service with Angularjs and Typescript
body: <p>I have a $http service that read a json file. I want to use modularization, but I don't know how to call my service in my controller and I don't know if my service is well written.</p>
  
  <p>Here a jsFidlle : <a href="https://jsfiddle.net/aqbmdrvn/" rel="nofollow">https://jsfiddle.net/aqbmdrvn/</a> .</p>
  
  <p>Thanks!!!</p>
  
  <pre><code>/// &lt;reference path="../../typings/angularjs/angular.d.ts" /&gt;
  /// &lt;reference path="../../typings/angularjs/angular-route.d.ts" /&gt;
  /// &lt;reference path="../app.ts" /&gt;  
  /// &lt;reference path="servicePets.ts" /&gt;
  "use strict";
  
  module AnimalPlanet {
      // pet interface
      export interface IPet {
          type: string;
          name: string;
          age: number;
          color: string;
          specialCare: boolean;
          availableForAdoption: boolean;
          ldAdoption: boolean;
          history: string;
          featured: boolean;
          newest: boolean;
          imageUrl: string;
      }
  
      export interface RootObject {
          pets: IPet[];
      }
      // pet controller with ui-grid
      export class petsCtrl implements RootObject {
          pets: IPet[];
          constructor(private $http: ng.IHttpService,public petsService,  private $scope: any, uiGridConstants: any, filterldAdoption: any) {
              $scope.pets = {};
              // ui grid option
              $scope.gridOptions = {
                  enableSorting: true,
                  enableFiltering: true,
                  paginationPageSizes: [5, 10, 15],
                  paginationPageSize: 5,
                  onRegisterApi: (gridApi) =&gt; {
                      $scope.gridApi = gridApi;
                  },
                  columnDefs: [
                      {
                          name: 'type',
                          cellTooltip: true,
                          headerTooltip: true
                      },
                      {
                          name: 'name',
                          cellTooltip: true,
                          headerTooltip: true
                      },
  
                      {
                          name: 'age',
                          // filters: [{
                          //     condition: uiGridConstants.filter.GREATER_THAN,
                          //     placeholder: 'greater than'
                          // }, {
                          //         condition: uiGridConstants.filter.LESS_THAN,
                          //         placeholder: 'less than'
                          //     }
                          // ],
                          cellTooltip: true,
                          headerTooltip: true
                      },
                      {
                          name: 'color',
                          cellTooltip: true,
                          headerTooltip: true
  
                      },
                      {
                          name: 'specialCare',
                          cellTooltip: true,
                          headerTooltip: true
                      },
                      {
                          name: 'availableForAdoption',
                          cellTooltip: true,
                          headerTooltip: true
                      },
                      {
                          name: 'history',
                          cellTooltip: true,
                          headerTooltip: true
                      },
                      {
                          name: 'featured',
                          cellTooltip: true,
                          headerTooltip: true
                      },
                      {
                          name: 'newest',
                          cellTooltip: true,
                          headerTooltip: true
                      },
                      {
                          name: 'imageUrl',
                          cellTooltip: true,
                          headerTooltip: true,
                          enableFiltering: false,
                          enableHiding: false,
                          cellTemplate: "&lt;img width=\"50px\" ng-src=\"{{grid.getCellValue(row, col)}}\" lazy-src&gt;"
                      }
                  ]
              };
              // read json using http service
              this.$http.get('/app/pets/pets.json').success((data) =&gt; { // pune te rog asta intr-un serviciu
  
                  // fill ui grid using http service
                  $scope.filterPets = data;
                  var uiGridPets = [];
                  angular.forEach($scope.filterPets, (item) =&gt; {
                      if (item.ldAdoption) {
                          uiGridPets.push(item);
                      }
                  });
  
                  $scope.gridOptions.data = uiGridPets;
  
                  // filter for main page with 3 pets
                  $scope.pets = data;
                  $scope.quantity = 3;
                  var featuredPets = [];
                  var newestPets =[];
                  angular.forEach($scope.pets, (item) =&gt; {
                      if (item.featured) {
  
                          featuredPets.push(item);
  
                      }
                      if(item.newest){
                          newestPets.push(item);
                      }
  
                  });
                  $scope.featuredPets = featuredPets;
                  $scope.newestPets = newestPets;
             });
              $scope.fromService = petsService.weatherChange();
          }
  
      }
  
      petsCtrl.$inject = ['$http', '$scope', 'uiGridConstants', 'petsService'];
      app.controller("petsCtrl", petsCtrl);
  
  
  }
  /// &lt;reference path="../../typings/angularjs/angular.d.ts" /&gt;
  /// &lt;reference path="../../typings/angularjs/angular-route.d.ts" /&gt;
  /// &lt;reference path="../app.ts" /&gt;  
  
  "use strict";
  
  module AnimalPlanet {
      export interface IPetsService {
          http: ng.IHttpService;
          uiGridConstants: any;
      }
      export class servicePets implements IPetsService {
         http: ng.IHttpService;
         uiGridConstants: any;
          constructor( $scope:any , $http: ng.IHttpService, uiGridConstants: any )
          {
               // read json using http service
              $scope.pets = {};
              this.http = $http;
          }
          public get() {
              this.http.get('/app/pets/pets.json').success((data) =&gt; { // pune te rog asta intr-un serviciu
  
                  // fill ui grid using http service
                  var filterPets = data;
                  var uiGridPets = [];
                  angular.forEach(filterPets, (item) =&gt; {
                      if (item.ldAdoption) {
                          uiGridPets.push(item);
                      }
                  });
  
                  var gridOptions.data = uiGridPets;
  
                  // filter for main page with 3 pets
                  var pets = data;
  
                  var quantity = 3;
                  var featuredPets = [];
                  var newestPets =[];
                  angular.forEach(pets, (item) =&gt; {
                      if (item.featured) {
  
                          featuredPets.push(item);
  
                      }
                      if(item.newest){
                          newestPets.push(item);
                      }
  
                  });
                  var featuredPets = featuredPets;
                  var newestPets = newestPets;
              });
      }
  
      }
  
      servicePets.$inject = ['$http', '$scope', 'uiGridConstants'];
      app.service('servicePets', servicePets);
  
  }
  </code></pre>