service - injection - 將Angular HTTP.get函數轉換為一個服務



angularjs route (2)

考慮模塊和依賴注入。

所以,讓我們說你有這三個文件

<script src="controllers.js"></script>
<script src="services.js"></script>
<script src="app.js"></script>

你需要三個模塊

1.主要應用程序模塊

angular.module('MyApp', ['controllers', 'services'])
  .config(['$routeProvider', function($routeProvider){
    $routeProvider
      .when('/bookslist', {
        templateUrl: 'partials/bookslist.html', 
        controller:  "BooksListCtrl"
      })
      .otherwise({redirectTo: '/bookslist'});
  }]);

注意到其他兩個模塊被注入到主模塊中,所以它們的組件可用於整個應用程序。

2.控制器模塊

目前您的控制器是全局功能,您可能需要將其添加到控制器模塊中

angular.module('controllers',[])
  .controller('BooksListCtrl', ['$scope', 'Books', function($scope, Books){
    Books.get(function(data){
      $scope.books = data;
    });

    $scope.orderProp = 'author';
  }]);

Books被傳遞給控制器功能,並被注入應用程序模塊的服務模塊提供。

3.服務模塊

這是您定義您的Books服務的地方。

angular.module('services', [])
  .factory('Books', ['$http', function($http){
    return{
      get: function(callback){
          $http.get('books.json').success(function(data) {
          // prepare data here
          callback(data);
        });
      }
    };
  }]);

有多種註冊服務的方式。

  • 服務 :傳遞一個構造函數(我們可以稱之為一個類)並返回該類的一個實例。
  • 提供者 :最靈活和可配置的,因為它使您可以訪問注入器在實例化服務時調用的函數
  • 工廠 :在實例化服務時傳遞注入器調用的函數。

我喜歡使用factory功能,只是讓它返回一個對象。 在上面的例子中,我們只是返回一個get函數傳遞成功回調的對象。 你可以改變它來傳遞一個錯誤函數。

在評論中編輯回答@ yair的請求,這裡是你如何將一個服務注入一個指令。

4.指令模塊

我遵循通常的模式,首先添加js文件

<script src="directives.js"></script>

然後定義一個新的模塊並註冊一些東西,在這種情況下是一個指令

angular.module('directives',[])
  .directive('dir', ['Books', function(Books){
    return{
      restrict: 'E',
      template: "dir directive, service: {{name}}",
      link:function(scope, element, attrs){
        scope.name = Books.name;
      }
    };
  }]);

指令模塊注入到app.js主模塊中。

angular.module('MyApp', ['controllers', 'services', 'directives']) 

您可能需要遵循不同的策略,並將模塊注入指令模塊

請注意,幾乎所有內容的語法內聯依賴註釋都是一樣的。 該指令是注入相同的書籍服務。

更新的Plunkerhttp : //plnkr.co/edit/mveUM6YJNKIQTbIpJHco?p=preview

https://src-bin.com

我試圖將我的controllers.js的Angular HTTP.get函數轉換為HTTP.get中的services.js

我發現的例子都有相互衝突的方式來實現服務,他們的名字的選擇是混亂的。 此外,服務的實際角度文檔使用與所有示例不同的語法。 我知道這是超級簡單,但請幫助我在這裡。

我有app.jscontrollers.jsservices.jsfilters.js

app.js

angular.module('MyApp', []).
    config(['$routeProvider', function($routeProvider)
        {
            $routeProvider.
                when('/bookslist', {templateUrl: 'partials/bookslist.html', controller:             BooksListCtrl}).
                otherwise({redirectTo: '/bookslist'});
        }
    ]);

controllers.js

function BooksListCtrl($scope,$http) {
    $http.get('books.php?action=query').success(function(data) {
        $scope.books = data;
    });

    $scope.orderProp = 'author';
}

Answer #1

這是一個服務服務的實現,而不是上面提到的工廠服務。 希望能幫助到你。

app.js

angular.module('myApp', ['controllers', 'services'])
 .config(['$routeProvider', function($routeProvider){
    $routeProvider
      .when('/bookslist', {
        templateUrl: 'partials/bookslist.html', 
        controller:  "BooksListCtrl"
      })
      .otherwise({redirectTo: '/bookslist'});
  }]);

service.js

angular.module('services', [])
  .service('books', ['$http', function($http){
      this.getData = function(onSuccess,onError){
          $http.get('books.json').then(
              onSuccess,onError);
      }  
  }]);

controller.js

angular.module('controllers',[])
    .controller('BooksListCtrl', ['$scope', 'books', function($scope, books){
       $scope.submit = function(){

        $scope.books = books.getData($scope.onSuccess,$scope.onError);
       }
           $scope.onSuccess = function(data){
           console.log(data);
           $scope.bookName = data.data.bookname;
           }

           $scope.onError = function(error){
               console.log(error);
           }
  }]);