SORU
27 EKİM 2013, Pazar


Nasıl benim AngularJS için bazı küçük yardımcı fonksiyonlar uygulama ekleyebilir miyim?

Benim AngularJS için bazı yardımcı fonksiyonlar uygulama eklemek istiyorum. Örneğin:

$scope.isNotString = function (str) {
    return (typeof str !== "string");
}

En iyi şekilde bu hizmet olarak ekleyebilirsiniz. Yapabileceğim okuduklarımdan ama bu benim HTML sayfalarında bu kullanmak istiyorum o yüzden hala mümkün. bir hizmet ediyorlar? Örneğin ben aşağıdakileri kullanın:

 <button data-ng-click="doSomething()"
         data-ng-disabled="isNotString(abc)">Do Something
 </button>

Biri bana bu ekleyebilirim nasıl bir örnek verebilirim. Bir hizmet oluşturmak gerekir yoksa bunu yapmanın başka bir yoludur. En önemlisi bu programı istiyorum ana set başka bir parçası ile birlikte bir dosya içinde ve fonksiyonları değil.

Birkaç çözüm var anlıyorum ama hiçbiri bu kadar açık.

Çözüm 1- Kent tarafından önerilen

$scope.doSomething = ServiceName.functionName;

Sorun burada 20 işlevleri ve on denetleyicileri var. Eğer bunu yaparsam her denetleyici için bir sürü kod ekleme anlamına gelir.

Çözüm 2- Beni önermiş

    var factory = {

        Setup: function ($scope) {

            $scope.isNotString = function (str) {
                return (typeof str !== "string");
            }

Bu dezavantajı, her denetleyicisi başında kapsam $geçen her hizmet için bu Kur Arama Bir veya daha fazla olurdu.

Çözüm 3- Kent tarafından önerilen

Çözüm genel bir hizmet oluşturma kentsel önerdiği iyi görünüyor. İşte benim asıl ayarlayın:

var app = angular
    .module('app', ['ngAnimate', 'ui.router', 'admin', 'home', 'questions', 'ngResource', 'LocalStorageModule'])
    .config(['$locationProvider', '$sceProvider', '$stateProvider',
        function ($locationProvider, $sceProvider, $stateProvider) {

            $sceProvider.enabled(false);
            $locationProvider.html5Mode(true);

Ve bunu nasıl yapabilirim bu genel hizmet eklemek ister misiniz ?

CEVAP
27 EKİM 2013, Pazar


7/1/15 DÜZENLEME:

Yazdığım bu cevap bir çok uzun zaman önce yok oldu uydurarak çok köşeli bir süre, ama olsa bu cevap hala nispeten popüler, çok istiyordum işaret eden birkaç nokta @nicolas yapar aşağıda iyi. Biri için, $rootScope enjekte ve yardımcıları orada takma her denetleyicisi için onları eklemek zorunda sizi koruyacaktır. Ayrıca - eğer ekliyorsun ne düşünmüş olmalıdır eğer Açısal hizmetleri VEYA filtreler gibi, bu şekilde kodu kabul edilmeleri gerektiğine ben de katılıyorum.

Ayrıca, geçerli sürüm 1.4.2 gösterir Açısal bir "Sağlayıcı" config blok içine enjekte edilmesi yasak olan API,. Daha fazlası için: aşağıdaki kaynaklara bakın

https://docs.angularjs.org/guide/module#module-loading-dependencies

AngularJS dependency injection of value inside of module.config

Sanmıyorum gidiyorum güncelleştirme gerçek kod bloğu aşağıda, çünkü değilim gerçekten etkin bir şekilde kullanarak Açısal ve bu gün istemediğim için tehlike yeni bir cevap almadan rahat bir duygu bu aslında uygun yeni en iyi yöntemler. Eğer başka biri bunu isterse, elbette bunun için gidin.

2/3/14 DÜZENLEME:

Bunu düşünerek ve diğer bazı cevapları okuduktan sonra, ben aslında bu yöntemi @Brent Washburne ve @tarafından getirilen bir varyasyonu Amogh Talpallikar tercih ederim sanırım. Özellikle isNotString gibi kamu hizmetleri arıyorsanız veya benzer. Net avantajları burada bir yeniden kullanım açısal kodu dışında onları ve onları config işlev hizmetleri ile yapamazsın) içinde kullanabilirsiniz.

Bu varlık ise düzgün hizmet ne olması gerektiğini yeniden kullanmak için genel bir yol arıyorsanız, o hala iyi biri olduğunu düşünüyorum eski cevabı söyledi.

Şimdi yapacağım şey şudur:

app.js:

var MyNamespace = MyNamespace || {};

 MyNamespace.helpers = {
   isNotString: function(str) {
     return (typeof str !== "string");
   }
 };

 angular.module('app', ['app.controllers', 'app.services']).                             
   config(['$routeProvider', function($routeProvider) {
     // Routing stuff here...
   }]);

controller.js:

angular.module('app.controllers', []).                                                                                                                                                                                  
  controller('firstCtrl', ['$scope', function($scope) {
    $scope.helpers = MyNamespace.helpers;
  });

Senin kısmi olarak daha sonra kullanabilirsiniz:

<button data-ng-click="console.log(helpers.isNotString('this is a string'))">Log String Test</button>

Eski cevap aşağıda:

En iyi hizmeti dahil etmek olabilir. Eğer yeniden kullanmak için gidiyoruz eğer bir hizmet olarak birden çok denetleyicileri, onları da dahil olmak üzere karşılarında kodu tekrarlamak zorunda sizi koruyacaktır.

Eğer html olarak hizmet fonksiyonları kısmi kullanmak istiyorsanız, o zaman bu denetleyicisinin kapsam eklemek gerekir:

$scope.doSomething = ServiceName.functionName;

Senin kısmi olarak daha sonra kullanabilirsiniz:

<button data-ng-click="doSomething()">Do Something</button>

İşte bu organize ve çok fazla güçlük: ücretsiz devam edebilirsiniz

Kumandanız ayrı, servis ve üç dosya içine kod/config yönlendirme: controllers.js, services.js ve app.js. Üst katman modülü "uygulaması vardır.", app.denetleyicileri ve uygulaması.bağımlılıklar gibi hizmetler. Daha sonra app.denetleyicileri ve uygulaması.hizmetleri kendi dosyaları içinde modül olarak ilan edilebilir. Bu örgüt yapısı sadece Angular Seed alınır:

app.js:

 angular.module('app', ['app.controllers', 'app.services']).                             
   config(['$routeProvider', function($routeProvider) {
     // Routing stuff here...
   }]);  

services.js:

 /* Generic Services */                                                                                                                                                                                                    
 angular.module('app.services', [])                                                                                                                                                                        
   .factory("genericServices", function() {                                                                                                                                                   
     return {                                                                                                                                                                                                              
       doSomething: function() {   
         //Do something here
       },
       doSomethingElse: function() {
         //Do something else here
       }
    });

controller.js:

angular.module('app.controllers', []).                                                                                                                                                                                  
  controller('firstCtrl', ['$scope', 'genericServices', function($scope, genericServices) {
    $scope.genericServices = genericServices;
  });

Senin kısmi olarak daha sonra kullanabilirsiniz:

<button data-ng-click="genericServices.doSomething()">Do Something</button>
<button data-ng-click="genericServices.doSomethingElse()">Do Something Else</button>

Bu şekilde sadece her denetleyici için bir satır kod eklemek ve bu kapsamda erişilebilir olduğu her yerde hizmet işlevleri erişebilir.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Chuck Testa

    Chuck Testa

    14 AĞUSTOS 2011
  • SPBedition

    SPBedition

    24 HAZİRAN 2013
  • UCBerkeley

    UCBerkeley

    3 Mayıs 2006