寫一個簡單的角度服務

Question

OK，我已經建立了服務之前，但很明顯，我真的不知道是什麼使他們打勾，因爲我似乎無法調試這個超簡單的服務電話：

應用。 JS：

var gridApp = angular.module('gridApp', []); 
gridApp.controller('mainController', ['$scope', '$http', 'dataService', 
    function($scope, dataService) { 

     $scope.message = 'I am Angular and I am working.'; 

     var init = function(){ 
      console.log(dataService.foo); 
      console.log(dataService.getData()); 
     }; 

     init(); 

}]); 

dataService.js：

(function() { 
'use strict'; 

angular 
    .module('gridApp') 
    .service('dataService', dataService) 

dataService.$inject = []; 

function dataService() { 

    console.log("I am the dataService and I am loaded"); 

    var foo = 1; 

    function getData() { 
     return 2; 
    } 

} 
})();   

我看到這個屏幕：我是角和我的工作。所以Angular正在加載。

我在控制檯中看到這個：我是dataService，我加載了，所以dataService實際上正在加載。

但隨後的console.log是：

未定義（8號線）

類型錯誤：dataService.getData不是一個函數（9號線）

我在想什麼？

Answer 1

以前的答案是，你的$http注射錯了是正確的，但你也不能連接您的服務功能的服務：

function dataService() { 
    var dataService = this; //get a reference to the service 

    //attach your functions and variables to the service reference 
    dataService.foo = 1; 
    dataService.getData = function() { 
    return 2; 
    }; 
} 

一個角度服務是一個非常簡單的對象類。這也是一個單例，意味着它在每次運行應用程序時僅實例化一次。當服務被實例化是非常類似於調用new操作上的dataService「類」：

var $dataService = new dataService(); 

所以，當你注入dataService到控制器中，你實際上得到一個實例，$dataService，你dataService「class」。

見進一步閱讀此博客條目：https://tylermcginnis.com/angularjs-factory-vs-service-vs-provider-5f426cfe6b8c#.sneoo52nk

Answer 2

您在函數中缺少第二個參數$http。命名參數和函數中的實際參數需要是相同的，相同的順序和相同的編號。之前發生的事情是，dataService被分配了$http實例，並且實際的dataService根本沒有被注入，因爲沒有第三個參數注入它。

var gridApp = angular.module('gridApp', []); 
gridApp.controller('mainController', ['$scope', '$http', 'dataService', 
    function($scope, $http, dataService) { 
// ----was missing-----^ 

     $scope.message = 'I am Angular and I am working.'; 

     var init = function(){ 
      console.log(dataService.foo); 
      console.log(dataService.getData()); 
     }; 

     init(); 

}]); 

Answer 3

我們錯過了第二個參數'$ http'的函數。只需添加「$ HTTP」 PARAM，它應該工作的罰款

var gridApp = angular.module('gridApp', []); 
gridApp.controller('mainController', ['$scope', '$http', 'dataService', 
    function($scope,$http, dataService) { 

     $scope.message = 'I am Angular and I am working.'; 

     var init = function(){ 
      console.log(dataService.foo); 
      console.log(dataService.getData()); 
     }; 

     init(); 

}]); 

Answer 4

這是我怎麼被教導要建立服務：

function dataService() { 
    var dataService = {}; 
    var _foo = 1; 
    var _getData = function() { return 2; } 

    dataService.foo = _foo; 
    dataService.getData = _getData; 

    return dataService; 
} 

我相信這有利於公共/私有方法/瓦爾。

Answer 5

以供參考，這是完整的代碼訪問我的服務：

app.js：

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

// create the controller and inject Angular's $scope 
gridApp.controller('mainController', ['$scope', 'dataService', function($scope, dataService) { 

    // create a message to display in our view 
    $scope.message = 'Angular is working'; 

    var init = function(){ 
     getPackageData(); 
    }; 

    var getPackageData = function(){ 
     return dataService.getData().then(
      function successCallback(response) { 
       console.log(response); 
      }, 
      function errorCallback(response) { 
       console.log(response); 
      } 
     ); 
    }; 

    init(); 

}]); 

dataService.js：

(function() { 
'use strict'; 

angular 
    .module('gridApp') 
    .service('dataService', dataService) 

dataService.$inject = ['$http']; 

function dataService($http) { 

    var dataService = {}; 

    var _getData = function() { 
     return $http({ 
      method: 'GET', 
      url: 'data/packages.json' 
     }) 
     .then(function successCallback(response) { 
      return response; 
     }, 
      function errorCallback(response) { 
      return response; 
     }); 
    } 

    dataService.getData = _getData; 

    return dataService; 
} 
})();