एक पृष्ठ में दो कोणीय एप्लिकेशन / मॉड्यूल कैसे परिभाषित करें?

118

मैं एक पृष्ठ पर दो कोणीय एप्लिकेशन / मॉड्यूल जोड़ने का प्रयास कर रहा हूं। नीचे दिए गए फ़िडल्स में आप देख सकते हैं कि हमेशा केवल पहला मॉड्यूल, html कोड में संदर्भित, सही तरीके से काम करेगा, जबकि दूसरा कोणीय द्वारा मान्यता प्राप्त नहीं है।

इस फिडल में हम केवल doSearch2विधि को निष्पादित कर सकते हैं , जबकि इस फिडल में केवल doSearchविधि सही तरीके से काम करती है।

मैं कैसे सही ढंग से एक पृष्ठ में दो कोणीय मॉड्यूल जगह के लिए रास्ता देख रहा हूँ।

javascript angularjs

— थॉमस क्रेम्मल
स्रोत

123

प्रति HTML दस्तावेज़ में केवल एक AngularJS एप्लिकेशन को ऑटो-बूटस्ट्रैप किया जा सकता है। दस्तावेज़ में पाया जाने वाला पहला एनकैप एक एप्लिकेशन के रूप में रूट तत्व को ऑटो-बूटस्ट्रैप में परिभाषित करने के लिए उपयोग किया जाएगा। एक HTML दस्तावेज़ में कई एप्लिकेशन चलाने के लिए आपको मैन्युअल रूप से उन्हें angular.bootstrap का उपयोग करके बूटस्ट्रैप करना होगा। AngularJS अनुप्रयोगों को एक दूसरे के भीतर नहीं रखा जा सकता है। - http://docs.angularjs.org/api/ng.directive:ngApp

यह सभी देखें

— मार्क राजकोक
स्रोत

@MarkRajcok तो यह केवल HTML दस्तावेज़ प्रति एक मॉड्यूल के लिए अच्छा अभ्यास है? मुख्य AngularJS पृष्ठ पर "वायर अप बैकएंड" उदाहरण सेट करता है ng-app="project"और कहता है कि "इससे आपको पृष्ठ के विभिन्न भागों में चलने वाले मॉड्यूल मिल सकते हैं" लेकिन ngApp डॉक्स बताता है कि "प्रति HTML दस्तावेज़ में केवल एक निर्देश का उपयोग किया जा सकता है"।

— दिबांग

9

@mattblang, मॉड्यूल कोणीय अनुप्रयोगों से जुड़े हैं, और वास्तव में HTML दस्तावेज़ नहीं हैं। आम तौर पर आपको प्रति पृष्ठ / दस्तावेज़ में केवल एक ऐप की आवश्यकता होती है, लेकिन यदि आप एक ही पृष्ठ / दस्तावेज़ पर कई कोणीय अनुप्रयोगों (जिनमें से प्रत्येक एक या एक से अधिक मॉड्यूल का उपयोग कर सकते हैं) चलाना चाहते हैं, तो आपको उनमें से प्रत्येक को मैन्युअल रूप से बूटस्ट्रैप करना होगा - - उपयोग न करें ng-app(क्योंकि यह काम नहीं करेगा)। ng-appकेवल HTML दस्तावेज़ के अनुसार एक बार उपयोग किया जा सकता है। यह वास्तव में सिर्फ एक शॉर्ट-कट है यदि आपके पास पृष्ठ पर केवल एक ऐप है, जो सामान्य मामला है।

— मार्क राजकोक

1

क्या इसका कोई उदाहरण है? मैं ट्रिक बूस्ट्रैप एपि डॉक्यूमेंटेशन देखता हूं लेकिन मैं इसे काम करने में सक्षम नहीं हूं। मैंने इसे कुछ समय के लिए देखा है और इसमें एक भी उदाहरण नहीं दिया गया है। इसके अतिरिक्त, दुनिया में मार्गों के साथ यह कैसे काम करेगा? जाहिर है टकराव का मुद्दा है।

— रॉबर्ट क्रिश्चियन

इसके अलावा, मुझे वास्तव में एनजी ऐप का उपयोग करने का तरीका एक और डेवलपर दिखाता है कि पृष्ठ के किस हिस्से को किस मॉड्यूल द्वारा नियंत्रित किया जा रहा है। क्या इसे पूरा करने के लिए पेज पर मार्कअप का उपयोग करने का कोई तरीका नहीं है? या कम से कम, मार्कअप में कुछ संकेत?

— क्रिस्मस एर्क्स

1

एनजी-ऐप निर्देश के लिए पहले दो पैराग्राफ यह सब कहते हैं - docs.angularjs.org/api/ng.directive:ngApp

— simo

38

मैंने एक वैकल्पिक निर्देश बनाया है जिसकी ngAppसीमाएँ नहीं हैं । इसे कहते हैं ngModule। जब आप इसका उपयोग करते हैं तो यह आपको कैसा दिखेगा:

<!DOCTYPE html>
<html>
    <head>
        <script src="angular.js"></script>
        <script src="angular.ng-modules.js"></script>
        <script>
          var moduleA = angular.module("MyModuleA", []);
          moduleA.controller("MyControllerA", function($scope) {
              $scope.name = "Bob A";
          });

          var moduleB = angular.module("MyModuleB", []);
          moduleB.controller("MyControllerB", function($scope) {
              $scope.name = "Steve B";
          });
        </script>
    </head>
    <body>
        <div ng-modules="MyModuleA, MyModuleB">
            <h1>Module A, B</h1>
            <div ng-controller="MyControllerA">
                {{name}}
            </div>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>

        <div ng-module="MyModuleB">
            <h1>Just Module B</h1>
            <div ng-controller="MyControllerB">
                {{name}}
            </div>
        </div>
    </body>
</html>

आप स्रोत कोड यहां प्राप्त कर सकते हैं:

http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/

यह अनिवार्य रूप से सीमाओं के बिना AngularJS द्वारा आंतरिक रूप से उपयोग किए जाने वाला समान कोड है।

— लुइस पेरेज़
स्रोत

luisperezphd: मैंने आपका ब्लॉग पोस्ट पढ़ा। क्या एप्स को घोंसला बनाने का कोई तरीका है (जैसे एक AJAX लोड विजेट के साथ एक विजेट बिल्डर) या यह पता लगाने के लिए कि क्या किसी पेज में पहले से कोई ऐप है और दूसरे ऐप को पहले की निर्भरता के रूप में इंजेक्ट करें? मैंने अभी अपने प्रश्न को यहाँ और अधिक विवरण के साथ पोस्ट किया है जिसे मैं पूरा करने की कोशिश कर रहा हूं। धन्यवाद!

— डैनियल बॉननेल

@ACIDSTEALTH तथ्य यह है कि AngularJS रिपोर्ट कर रहा है कि पहले से ही बूटस्ट्रैप्ड तत्व का मतलब है कि यह बताने का कोई तरीका होना चाहिए - हालांकि वह कोड AngularJS के लिए आंतरिक हो सकता है। यह पता लगाने के लिए कि क्या आप इस स्थिति को देखने के लिए उस त्रुटि पर AngularJS और ब्रेकपॉइंट के अवर्गीकृत संस्करण को संदर्भित कर सकते हैं। मैं आपके StackOverflow प्रश्न लिंक से क्या बना सकता हूं, ऐसा लगता है कि आप रनटाइम के दौरान एक मॉड्यूल को "इंजेक्ट" करना चाहते हैं। यदि आप इस लेख पर एक नज़र डालना चाहते हैं: weblogs.asp.net/dwahlin/…

— लुइस पेरेज़

अरे @LuisPerez, मैंने आपकी वेबसाइट की जाँच की। मैंने उसे अपनी मशीन पर थका दिया। कोणीयजेएस "एनजी-मॉड्यूल" / "एनजी-मॉड्यूल" का पता नहीं लगा रहा है। क्या मुझे अपनी फ़ाइल में शामिल किसी संदर्भ की आवश्यकता है?

— सुजय कोडमाला

हां @sujaykodamala, ngModule को AngularJS में नहीं बनाया गया है यह एक ऐसा निर्देश है जिसे मैंने बनाया है। आप इसे GitHub से डाउनलोड कर सकते हैं। आप इसे यहाँ देख सकते हैं: github.com/luisperezphd/ngModule

— लुइस पेरेज़

नमस्कार @Luis पेरेस! मैं आपके ब्लॉग पोस्ट की जाँच कर रहा था और वे वास्तव में बहुत बढ़िया हैं। यदि आपके पास समय है, तो क्या आप एक समस्या - stackoverflow.com/questions/46952478/… को हल करने के लिए मेरी पोस्ट यहाँ देख सकते हैं । धन्यवाद।

— user8512043

19

आप कई [एनजी-ऐप] का उपयोग क्यों करना चाहते हैं? चूंकि मॉड्यूल का उपयोग करके कोणीय को फिर से शुरू किया जाता है, आप एक ऐप का उपयोग कर सकते हैं जो कई निर्भरता का उपयोग करता है।

जावास्क्रिप्ट:

// setter syntax -> initializing other module for demonstration
angular.module('otherModule', []);

angular.module('app', ['otherModule'])
.controller('AppController', function () {
    // ...do something
});

// getter syntax
angular.module('otherModule')
.controller('OtherController', function () {
    // ...do something
});

HTML:

<div ng-app="app">
    <div ng-controller="AppController">...</div>
    <div ng-controller="OtherController">...</div>
</div>

संपादित करें

ध्यान रखें कि यदि आप कंट्रोलर के अंदर कंट्रोलर का उपयोग करना चाहते हैं तो आपको कंट्रोलर सिंटैक्स का उपयोग करना होगा, जैसे:

<div ng-app="app">
    <div ng-controller="AppController as app">
        <div ng-controller="OtherController as other">...</div>
    </div>
</div>

— बन्दर साधु
स्रोत

ध्यान में न आया त्रुटि: [$ इंजेक्टर: modulerr] errors.angularjs.org/1.3.14/$injector/... ... criptMinification% 2Fbower_components% 2Fangular% 2Fangular.min.js% 3A17% 3A381)

— Anandaraja_Srinivasan

क्या आपने 2 मॉड्यूल के ऑर्डर को पलटने की कोशिश की है? ('App' से पहले 'otherModule') क्योंकि, मैं इस समाधान का बहुत उपयोग करता हूं और यह पूरी तरह से काम करता है ...

— बंदर भिक्षु

1

ठीक ! मैंने जावास्क्रिप्ट छूट में एक त्रुटि देखी है जो मैं प्रदान करता हूं। मुझे लगता है कि यह अब तय हो गया है! रिकॉर्ड के लिए, मैं एक ही मॉड्यूल के लिए 2 स्थानों में सेटर सिंटैक्स का उपयोग करूँगा ... जो स्पष्ट रूप से अनुमति नहीं है! :-)

— बंदर भिक्षु

जिस तरह से हम इसे करने के लिए करते हैं

— हैरी बोश

9

आप कई कोणीय अनुप्रयोगों को बूटस्ट्रैप कर सकते हैं, लेकिन:

1) आपको उन्हें मैन्युअल रूप से बूटस्ट्रैप करने की आवश्यकता है

2) आपको रूट के रूप में "दस्तावेज़" का उपयोग नहीं करना चाहिए, लेकिन नोड जहां कोणीय इंटरफ़ेस निम्न है:

var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);

यह सुरक्षित होगा।

— Wouter
स्रोत

3

मैनुअल बूटस्ट्रैपिंग दोनों मॉड्यूल काम करेंगे। इसे देखो

  <!-- IN HTML -->
  <div id="dvFirst">
    <div ng-controller="FirstController">
      <p>1: {{ desc }}</p>
    </div>
  </div>

  <div id="dvSecond">
    <div ng-controller="SecondController ">
      <p>2: {{ desc }}</p>
    </div>
  </div>



// IN SCRIPT       
var dvFirst = document.getElementById('dvFirst');
var dvSecond = document.getElementById('dvSecond');

angular.element(document).ready(function() {
   angular.bootstrap(dvFirst, ['firstApp']);
   angular.bootstrap(dvSecond, ['secondApp']);
});

यहाँ प्लंकर का लिंक http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview है

नोट: html में, नहीं है ng-app। idइसके बजाय उपयोग किया गया है।

— हरि दास
स्रोत

0

मैंने एक एकल पृष्ठ ऐप में उप-एप्स को घोंसले के लिए कई मॉड्यूल और राउटर-आउटलेट का उपयोग करके एक कोणीय अनुप्रयोग के लिए एक पीओसी बनाया। आप स्रोत कोड यहां प्राप्त कर सकते हैं: https://github.com/AhmedBahet/ng-sub-apps

आशा है कि यह मदद करेगा

— abahet
स्रोत