2015-02-10 180 views
0

我需要一組資源工廠來使用rest API,並在我所有的模塊和控制器中使用它。我很困惑這應該如何分開以及如何從控制器訪問工廠。AngularJS在模塊和控制器之間共享REST服務

舉個例子,假設我有:

// rest.js 
angular.module('myApp.rest', ['ngResource']) 
    .factory('Book', function ($resource) { 
     return $resource('api/book', {}, { 
      getBook: { 
       method: 'GET' 
      }, 
     }); 
    }) 

這裏的主要模塊myApp

// app.js 
angular.module('myApp', [ 

     'ngRoute', 
     'ngResource', 

     'app.rest', 
     'app.library' 

    ]) 
     .config(['$routeProvider', function ($routeProvider) { 
      $routeProvider. 
       when('/book', { 
        templateUrl: 'someTemplate', 
        controller: 'LibraryCTRL', 
       }); 

現在我想有一個名爲app.library另一個模塊,它可以使用Book資源。依賴注入的外觀如何?

更重要的問題:這是正確的做法嗎?我的意思是將整個Book工廠連接到myApp或使用單獨的myApp.rest模塊更好嗎?

// library.js 
angular 
    .module('myApp.library', ['ngResource']) // INJECT REST MODULE HERE? 
    .controller('LibraryCtrl', Library); 

// INJECT BOOK RESOURCE HERE? 
Library.$inject = []; 

// USE BOOK IN THIS CONSTRUCTOR 
function Library() { 

    var vm = this; 

    // USING IT 
    Book.getBook(function(data){ 
     vm.book = data; 
    }); 
} 

回答

3

咱們摘要問題

據我瞭解你想它可以在所有模塊和控制器,負責消費REST API

使用定製工廠「服務」,讓你將有serviceModule.js

var ServiceApp = angular.module('ServiceApp', []); 
ServiceApp 
     .factory(
       'restControllerService', 
       [ 
         '$http', 
         function($http) { 

          var doRequest = 
          function(URL) { 
            return $http({ 
             method : 'get', 
             url : URL, 
             headers : { 
             'Content-Type' :'application/json' 
               } 
            }); 
            }); 
           } 

          } 
          return { 
           getBook : function() { 
            return doRequest('api/book'); 
           } 
          }; 
         } ]); 

你可以注入,象這樣的

var library = angular.module('libraryModule', [ "ServiceApp" ]); 
libraryModule.controller('LibraryCtrl', [ 
     '$scope', 
     'restControllerService', 
     function($scope,restControllerService) { 

      $scope.book = null; 

      $scope.getbook = function() { 

        restControllerService.getbook('api/book').success(
          function(data) { 
           $scope.book = data; 
          }).error(function() { 
         $scope.book = null; 
        }); 
       } 
      };  
任何其他模塊中210
+0

謝謝。在這裏,您將創建'restControllerService'作爲主模塊'ServiceApp'的一部分。如果我在另一個叫'ServiceApp.rest'的模塊中有'restControllerService',那麼注入將如何改變? – norbertpy 2015-02-10 19:18:10

+0

抱歉,您的意思是「如果我在另一個模塊中有restControllerService」,那麼您的意思是調用該服務或定義一個具有相同名稱的新服務 – 2015-02-10 19:21:08

+0

您有一個名爲'ServiceApp'的模塊並在該模塊上定義了'restControllerService' 。但我有兩個單獨的模塊。一個人沒有服務。 – norbertpy 2015-02-10 19:27:07

2

我相信你想這樣做: 對myApp - > myApp.library - > myApp.rest

你幾乎沒有。只需讓myApp.library注入myApp.rest模塊即可。

angular 
    .module('myApp.library', ['myApp.rest']) 
    .controller('LibraryCtrl', ['Book', function(Book) { 
    // use Book.getBook() here. 
    }]); 

從myApp模塊中刪除myApp.rest和ngResource的依賴關係,因爲您沒有在myApp.rest和ngResource中使用它們。

angular.module('myApp', [ 
     'ngRoute', 
     'app.library' 
    ]) 

一般來說,只有在模塊中直接使用它時纔會添加依賴項。

我不相信如何將代碼分解爲模塊是最佳做法。就個人而言,我喜歡爲整個應用程序提供一個模塊,除非我試圖在另一個應用程序中重用一段代碼。

+0

注入必須位於模塊級別或控制器級別?在你的例子中,我如何在'LibraryCtrl'中使用'Book'資源? – norbertpy 2015-02-10 19:08:38

+0

是的,在控制器級別注入Book。通常,您需要在模塊級別注入模塊,在控制器級別注入服務。 – restassured 2015-02-10 19:14:28

相關問題