tutorial मैं अपने AngularJS एप्लिकेशन में कुछ छोटे उपयोगिता कार्यों को कैसे जोड़ सकता हूं?




angularjs tutorial pdf (6)

यहां उपयोग की जाने वाली विधि को समझने के लिए एक सरल, कॉम्पैक्ट और आसान है।
सबसे पहले, अपने जेएस में एक सेवा जोड़ें।

app.factory('Helpers', [ function() {
      // Helper service body

        var o = {
        Helpers: []

        };

        // Dummy function with parameter being passed
        o.getFooBar = function(para) {

            var valueIneed = para + " " + "World!";

            return valueIneed;

          };

        // Other helper functions can be added here ...

        // And we return the helper object ...
        return o;

    }]);

फिर, अपने नियंत्रक में, अपने सहायक ऑब्जेक्ट को इंजेक्ट करें और किसी भी उपलब्ध फ़ंक्शन का उपयोग निम्न की तरह करें:

app.controller('MainCtrl', [

'$scope',
'Helpers',

function($scope, Helpers){

    $scope.sayIt = Helpers.getFooBar("Hello");
    console.log($scope.sayIt);

}]);

मैं अपने AngularJS एप्लिकेशन में कुछ उपयोगिता कार्यों को जोड़ना चाहता हूं। उदाहरण के लिए:

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

सेवा के रूप में जोड़ने के लिए ऐसा करने का सबसे अच्छा तरीका है? मैंने जो पढ़ा है, उससे मैं यह कर सकता हूं लेकिन फिर मैं इन्हें अपने एचटीएमएल पृष्ठों में उपयोग करना चाहूंगा, तो क्या यह अभी भी संभव है यदि वे सेवा में हों? उदाहरण के लिए मैं निम्नलिखित का उपयोग कर सकता हूं:

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

क्या कोई मुझे उदाहरण दे सकता है कि मैं इन्हें कैसे जोड़ सकता हूं। क्या मुझे सेवा बनाना चाहिए या ऐसा करने का कोई और तरीका है। सबसे महत्वपूर्ण मैं इन उपयोगिता कार्यों को एक फ़ाइल में पसंद करूंगा और मुख्य सेट अप के दूसरे भाग के साथ संयुक्त नहीं हूं।

मैं समझता हूं कि कुछ समाधान हैं लेकिन उनमें से कोई भी इतना स्पष्ट नहीं है।

समाधान 1 - शहरी द्वारा प्रस्तावित

$scope.doSomething = ServiceName.functionName;

यहां समस्या यह है कि मेरे पास 20 कार्य और दस नियंत्रक हैं। अगर मैंने ऐसा किया तो इसका मतलब यह होगा कि प्रत्येक नियंत्रक को बहुत सारे कोड जोड़ना होगा।

समाधान 2 - मेरे द्वारा प्रस्तावित

    var factory = {

        Setup: function ($scope) {

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

इसका नुकसान यह है कि प्रत्येक नियंत्रक की शुरुआत में मेरे पास इनमें से एक या अधिक सेटअप प्रत्येक सेवा को कॉल करता है जो $ स्कोप पारित करता है।

समाधान 3 - शहरी द्वारा प्रस्तावित

एक सामान्य सेवा बनाने के शहरी द्वारा प्रस्तावित समाधान अच्छा लग रहा है। यहां मेरा मुख्य सेट अप है:

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);

क्या मुझे इस पर सामान्य सेवा जोड़नी चाहिए और मैं इसे कैसे कर सकता हूं?


आप निरंतर सेवा का भी उपयोग कर सकते हैं। निरंतर कॉल के बाहर फ़ंक्शन को परिभाषित करने से यह भी रिकर्सिव हो सकता है।

function doSomething( a, b ) {
    return a + b;
};

angular.module('moduleName',[])
    // Define
    .constant('$doSomething', doSomething)
    // Usage
    .controller( 'SomeController', function( $doSomething ) {
        $scope.added = $doSomething( 100, 200 );
    })
;

नियंत्रक विरासत का उपयोग क्यों न करें, हेडर-Ctrl के दायरे में परिभाषित सभी विधियों / गुण एनजी-व्यू के अंदर नियंत्रक में पहुंच योग्य हैं। $ scope.servHelper आपके सभी नियंत्रकों में पहुंच योग्य है।

    angular.module('fnetApp').controller('HeaderCtrl', function ($scope, MyHelperService) {
      $scope.servHelper = MyHelperService;
    });


<div ng-controller="HeaderCtrl">
  <div ng-view=""></div>
</div>

क्या मैं सही ढंग से समझता हूं कि आप बस कुछ उपयोगिता विधियों को परिभाषित करना चाहते हैं और उन्हें टेम्पलेट्स में उपलब्ध करा सकते हैं?

आपको उन्हें प्रत्येक नियंत्रक में जोड़ने की ज़रूरत नहीं है। बस सभी उपयोगिता विधियों के लिए एक नियंत्रक को परिभाषित करें और उस नियंत्रक को <html> या <body> (ngController निर्देश का उपयोग करके) संलग्न करें। <Html> (अर्थात् कहीं भी, अवधि) या <body> (कहीं भी लेकिन <head>) के तहत कहीं भी आप जो भी अन्य नियंत्रक संलग्न करते हैं, वह उस क्षेत्र के दायरे का उत्तराधिकारी होगा और उन तरीकों तक पहुंच होगी।


इस पुराने धागे पर आ रहा था मैं उस पर दबाव देना चाहता था

1 डिग्री) उपयोगिता कार्यों मॉड्यूल.रुन के माध्यम से जड़कोप में जोड़ा जाना चाहिए (चाहिए?)। इस उद्देश्य के लिए एक विशिष्ट रूट स्तर नियंत्रक को स्थापित करने की कोई आवश्यकता नहीं है।

angular.module('myApp').run(function($rootScope){
  $rootScope.isNotString = function(str) {
   return (typeof str !== "string");
  }
});

2 डिग्री) यदि आप अलग-अलग मॉड्यूल में अपना कोड व्यवस्थित करते हैं तो आपको कोणीय services या factory उपयोग करना चाहिए और फिर उन्हें रन ब्लॉक में दिए गए फ़ंक्शन में इंजेक्ट करना चाहिए, जैसा कि अनुसरण करें:

angular.module('myApp').factory('myHelperMethods', function(){
  return {
    isNotString: function(str) {
      return (typeof str !== 'string');
    }
  }
});

angular.module('myApp').run(function($rootScope, myHelperMethods){ 
  $rootScope.helpers = myHelperMethods;
});

3 डिग्री) मेरी समझ यह है कि विचारों में, अधिकांश मामलों के लिए आपको इन सहायक कार्यों की आवश्यकता होती है ताकि आप प्रदर्शित तारों के लिए किसी प्रकार का स्वरूपण लागू कर सकें। इस अंतिम मामले में आपको कोणीय filters का उपयोग करना है

और यदि आपने कोणीय सेवाओं या कारखाने में कुछ निम्न स्तर की सहायक विधियों को संरचित किया है, तो बस उन्हें अपने फ़िल्टर कन्स्ट्रक्टर के भीतर इंजेक्ट करें:

angular.module('myApp').filter('myFilter', function(myHelperMethods){ 
  return function(aString){
    if (myHelperMethods.isNotString(aString)){
      return 
    }
    else{
      // something else 
    }
  }
);

और आपके विचार में:

{{ aString | myFilter }}   

संपादित करें 7/1/15:

मैंने यह जवाब बहुत समय पहले लिखा था और थोड़ी देर के लिए कोणीय के साथ बहुत कुछ नहीं रख रहा है, लेकिन ऐसा लगता है कि यह उत्तर अभी भी अपेक्षाकृत लोकप्रिय है, इसलिए मैं यह इंगित करना चाहता था कि कुछ बिंदु @nicolas नीचे अच्छा है। एक के लिए, रूट रूटस्कोप इंजेक्शन और हेल्पर्स को जोड़ने से आपको हर नियंत्रक के लिए उन्हें जोड़ने से रोक दिया जाएगा। इसके अलावा - मैं सहमत हूं कि यदि आप जो जोड़ रहे हैं उसे कोणीय सेवाओं या फ़िल्टर के रूप में माना जाना चाहिए, तो उन्हें इस तरह कोड में अपनाया जाना चाहिए।

इसके अलावा, वर्तमान संस्करण 1.4.2 के अनुसार, कोणीय एक "प्रदाता" एपीआई का खुलासा करता है, जिसे कॉन्फ़िगरेशन ब्लॉक में इंजेक्शन देने की अनुमति है। इन संसाधनों को और देखें:

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

Module.config के अंदर मूल्य के AngularJS निर्भरता इंजेक्शन

मुझे नहीं लगता कि मैं नीचे दिए गए वास्तविक कोड ब्लॉक को अपडेट करने जा रहा हूं, क्योंकि मैं वास्तव में सक्रिय रूप से सक्रिय रूप से एंगुलर का उपयोग नहीं कर रहा हूं और मैं वास्तव में सहज महसूस किए बिना एक नया उत्तर खतरे में नहीं रखना चाहता हूं कि यह वास्तव में नए सर्वोत्तम रूप से अनुरूप है कार्य करती है। अगर कोई और इसे महसूस करता है, तो हर तरह से इसके लिए जाओ।

संपादित करें 2/3/14:

इसके बारे में सोचने और कुछ अन्य उत्तरों को पढ़ने के बाद, मुझे लगता है कि मैं @ ब्रेंट वॉशबर्न और @ अमोग तलपल्लीकर द्वारा लाए गए तरीके की विविधता को प्राथमिकता देता हूं। विशेष रूप से यदि आप isNotString () या इसी तरह की उपयोगिताओं की तलाश में हैं। यहां स्पष्ट लाभों में से एक यह है कि आप उन्हें अपने कोणीय कोड के बाहर फिर से उपयोग कर सकते हैं और आप उन्हें अपने कॉन्फ़िगरेशन फ़ंक्शन के अंदर उपयोग कर सकते हैं (जिसे आप सेवाओं के साथ नहीं कर सकते हैं)।

ऐसा कहा जा रहा है कि, यदि आप सेवाओं का सही ढंग से उपयोग करने के लिए एक सामान्य तरीका ढूंढ रहे हैं, तो मुझे लगता है कि पुराना जवाब अभी भी एक अच्छा है।

अब मैं क्या करूँगा:

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;
  });

फिर आपके आंशिक में आप इसका उपयोग कर सकते हैं:

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

नीचे पुराना उत्तर:

उन्हें सेवा के रूप में शामिल करना सबसे अच्छा हो सकता है। यदि आप उन्हें कई नियंत्रकों में फिर से उपयोग करने जा रहे हैं, तो उन्हें एक सेवा के रूप में शामिल करने से आपको कोड दोहराने से रोक दिया जाएगा।

यदि आप अपने एचटीएमएल आंशिक में सेवा कार्यों का उपयोग करना चाहते हैं, तो आपको उन्हें उस नियंत्रक के दायरे में जोड़ना चाहिए:

$scope.doSomething = ServiceName.functionName;

फिर आपके आंशिक में आप इसका उपयोग कर सकते हैं:

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

यहां एक तरीका है कि आप इसे सभी व्यवस्थित और बहुत परेशानी से मुक्त रख सकते हैं:

अपने नियंत्रक, सेवा और रूटिंग कोड / कॉन्फ़िगर को तीन फ़ाइलों में अलग करें: controlers.js, services.js, और app.js. शीर्ष परत मॉड्यूल "ऐप" है, जिसमें app.controllers और app.services निर्भरता के रूप में हैं। फिर app.controllers और app.services को अपनी फाइलों में मॉड्यूल के रूप में घोषित किया जा सकता है। यह संगठनात्मक संरचना सिर्फ कोणीय बीज से ली गई है:

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;
  });

फिर आपके आंशिक में आप इसका उपयोग कर सकते हैं:

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

इस तरह आप केवल प्रत्येक नियंत्रक को कोड की एक पंक्ति जोड़ते हैं और जहां भी स्कोप पहुंच योग्य होता है, वहां किसी भी सेवा कार्य को एक्सेस करने में सक्षम होते हैं।





angularjs