angularjsの2つ以上のコントローラ間で再利用可能な関数を作成する方法

Question

私はangularjsを初めて使っているので質問があります。私はたくさんの検索をしましたが、その概念を理解できませんでした。 1つのビューに対して1つのコントローラが必要であるという基本的な考え方がありますが、1つのビューに対して複数のコントローラを持つことができます。私は1つのビューで2つ以下のコントローラを持っていますが、私は両方のコントローラで使用しなければならないaddComma関数を例に挙げてみましょうが、私はそれをすべてのコントローラ間で再利用できるように書きたいと思います。同じビュー。ですから、基本的には、同じビューまたは他のビューのすべてのコントローラ間で、コントローラのグローバルな機能をどのようにしてアプリケーションのどこにでも使用できるようにする方法です。私がanglejsの概念を理解するのは苦労しています。

app.controller("GetChargesController", function ($scope, GetService, $rootScope) { 
    $scope.Title = "Charges Details List"; 
    $rootScope.loading = true; 
    // Calling Serivce Method here 
    $scope.GetChargesDetails = GetService.GetAll("CommonApi", "GetChargesDetails").then(function (d) { 
     $scope.ChargesDetails = d; 
     $rootScope.loading = false; 
    }); 
    // add comman function goes here 
     $scope.addComma = function(x) { 
     return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
    } 

    }); 

    app.controller("GetPaymentsController", function ($scope, GetService, $rootScope) { 
    $scope.Title = "Payments Details List"; 
    $rootScope.loading = true; 
    // Calling Serivce Method here 
    $scope.GetPaymentsDetails = GetService.GetAll("CommonApi", "GetPaymentsDetails").then(function (d) { 
     $scope.PaymentsDetails = d;    
     $rootScope.loading = false; 
    }); 
    // add comman function goes here 
    $scope.addComma = function (x) { 
     return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
     } 

    }); 

以下は、（asp.net web apiを使用して）データベースから任意の種類のデータを取得するために作成した汎用サービスです。私が読んだように、角度サービスはデータを保持することができ、リンク上を前後に移動しているときにデータベースを何度も呼び出す必要はありません。たとえば、ページにこれらの3つのリンクがあるとします。ホームリンク、PaymentChargesリンク、注文リンク。ホームビューはデフォルトで開きます。そしてPaymentCharges Linkをクリックすると、データベースからデータが取得され、そのビューがレンダリングされますが、ホームリンクをクリックすると、データベースへのコールはホームページのデータを取得する必要がありません。 PaymentChargesデータベースに行く呼び出しがなければならない2番目の時間をリンクするが、私はファンクバグのコンソールオプションでそれを呼び出すと、データを取得するためにデータベースに行くオプションを参照してください。私たちはキャッシュを使用して、データベースへの呼び出し。

app.factory("GetService", function ($http) { 
    var thisService = {}; 

    // get all data from database 
    thisService.GetAll = function (controllername, methodName) { 
     var promise = $http({ 
      method: 'GET', 
      url: '/api/'+controllername + '/' + methodName 
     }) 
      .then(function (response) { 
       return response.data; 
      }, 
      function (response) { 
       return response.data; 
      }); 
     return promise; 
    }; 
}); 

Answer 1

いくつかの方法の再利用：サービスに格納することで

再使用の約束：

// create an object to store promises 
var promises = {}; 
thisService.GetAll = function(controllername, methodName) { 

    promises[controllername] = promises[controllername] || {}; 
    // if the particular promise doesn't already exist create it as a property of above object 
    if (!promises[controllername][methodName]) { 
     promises[controllername][methodName] = $http({...}).then(...; 

    } 
    // now return the specific stored promise 
    return promises[controllername][methodName]; 
}; 

をかデータを保存して、すでに存在する場合は保存されたデータで解決する別の約束を返すために$qを使用します。代わりに、私はそれをもう少し汎用的になるかもしれない。このようなものを使用することができ示唆している。このアプローチ

var data = {}; 
thisService.GetAll = function(controllername, methodName) { 

    data[controllername] = data[controllername] || {}; 

    if (data[controllername][methodName]) { 
    // data exists for this controller and method, no need for new request 
    return $q.resolve(data[controllername][methodName]); 
    } else { 
    return $http({...}).then(function(response) { 
     // store the data for next use 
     var newData = response.data; 
     data[controllername][methodName] = newData; 
     return newData; 
    });  
    } 

}; 

Answer 2

なぜサービスにデータを格納しないのですか？あなたが行うことができ

：

.then(function (resp) { 
    thisService.controllerName.data = resp.data 
} 

を次に、utilsのサービスを作成しますGetService.controllerName.data

Answer 3

を使用してコード内の変数を参照することができ、そこaddComma機能を追加します。 utilsのサービスを注入し、サービスの問題を管理するためのコントローラでaddComma

app.factory('utils', function() { 
    return { 
    addComma: function() {} 
    } 
}); 

app.controller("GetChargesController", function ($scope, utils) { 
    $scope.addComma = utils.addComma; 
}); 

app.controller("GetPaymentsController", function ($scope, utils) { 
    $scope.addComma = utils.addComma; 
}); 

Answer 4

ため$qを注入することを確認します。以下のコードを確認してください

1. appResources-Factoryには、公開する必要があるすべてのリソースが含まれています。

2. indexServices-Factoryには、インデックスコントローラに対応するすべてのサービスが含まれます。

   (function() { 
   use strict'; 
   var commonServices = angular.module('commonServices', ['ngResource']); 
   
   commonServices.factory('appResources', ['$resource', 
       function ($resource) { 
   
        var indexResource=$resource('/api/index/:id'); 
        return { 
   
          indexResource:indexResource 
   
        } 
   }]); 
   
   commonServices.factory('indexService',['appResources', 
   function (appResources){ 
   
       var getAllIndexes =function(sucesscallback){ 
   
        appResources.indexResource.query({}).$promise.then(
        //success 
        function(value){/*success events and Data is present in the 'value'*/ 
        sucesscallback(value); 
        }, 
        //error 
        function(error){/*failure events*/} 
        ) 
   
       } 
   
       } 
       ]); 
   }); 
   

3. コントローラのメソッドは、あなたが、私はそれがあなたの問題に適切だと思うカスタムフィルタを作成できるサービスを呼び出し、機能のこのタイプの

   (function() { 
   'use strict'; 
   angular.module('saniehhaApp') 
       .controller('indexController', indexController); 
        indexController.$inject = ['$location', 'indexService']; 
         function indexController($location, index,indexService) { 
         /* jshint validthis:true */ 
           indexService.getAllIndexes(function(sucesscallback){ 
            $scope.value=sucesscallback; 
           }) 
          //$locaton.qwets=.... 
          } 
   })();