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

112

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

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

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

स्रोत

2012-10-12 Thomas Kremmel

118

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other. -- http://docs.angularjs.org/api/ng.directive:ngApp

भी

स्रोत

2012-10-12 17:21:45

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

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

क्या इसका कोई उदाहरण है? मैं terse boostrap एपीआई दस्तावेज देखता हूं लेकिन मैं इसे काम करने में सक्षम नहीं हूं। मैंने थोड़ी देर के लिए इसे गुगल किया है और ऐसा लगता है कि एक कामकाजी उदाहरण नहीं है। इसके अतिरिक्त, दुनिया में कैसे मार्गों के साथ काम करेगा? जाहिर है एक टकराव मुद्दा है। –

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

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

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

<!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>

आपको कम से स्रोत कोड प्राप्त कर सकते हैं।

स्रोत

2014-04-06 18:35:00

luisperezphd: मैंने आपके ब्लॉग पोस्ट को पढ़ा। क्या घोंसले के ऐप्स (जैसे AJAX लोड किए गए विजेट के साथ विजेट बिल्डर) का कोई तरीका है या पता लगाएं कि किसी पृष्ठ में पहले से कोई ऐप है और पहले ऐप की निर्भरता के रूप में किसी अन्य ऐप को इंजेक्ट करें?मैंने अभी अपना प्रश्न पोस्ट किया [यहां] (https://stackoverflow.com/questions/34730849/angular-bootstrap-error-error-ngbtstrpd-app-already-bootstrapped-with-this) बिल्कुल ठीक है कि मैं क्या हूं पूरा करने की कोशिश कर रहा है। धन्यवाद! – ACIDSTEALTH

@ACIDSTEALTH तथ्य यह है कि AngularJS रिपोर्ट कर रहा है कि तत्व पहले से बूटस्ट्रिप का मतलब है कि यह बताने का कोई तरीका होना चाहिए - हालांकि वह कोड AngularJS के लिए आंतरिक हो सकता है। यह पता लगाने के लिए कि क्या आप एंगुलरजेएस के असीमित संस्करण और उस स्थिति को तोड़ने के लिए उस त्रुटि पर ब्रेकपॉइंट का संदर्भ दे सकते हैं। आपके स्टैक ओवरफ्लो प्रश्न लिंक से मैं क्या कर सकता हूं, ऐसा लगता है कि आप गतिशील रूप से रनटाइम पर मॉड्यूल को "इंजेक्ट" करना चाहते हैं। यदि ऐसा है तो आप इस आलेख को देखना चाहेंगे: http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs –

अरे @ लुइसपेरेज़, मैंने आपकी जांच की वेबसाइट। मैंने इसे अपनी मशीन पर थक दिया। angularJS "ng-modules"/"ng-module" का पता नहीं लगा रहा है। क्या मुझे अपनी फाइल में शामिल किसी भी संदर्भ की आवश्यकता है? –

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

1) आप उन्हें मैन्युअल रूप से

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

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

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

स्रोत

2014-10-30 09:06:49 Wouter

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

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

// 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>

स्रोत

2015-01-28 13:18:22

असहज त्रुटि: [$ इंजेक्टर: मॉड्यूलर] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=mainModule&p1=Erro...criptMinification%2Fbower_components%2Fangular%2Fangular.min.js%3A17%3A381) –

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

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

-1

यह सीधे आगे जवाब नहीं हो सकता है। लेकिन बूटस्ट्रैप एनजी-एप के दौरान कृपया निम्नलिखित चीज का ख्याल रखें।

किसी तत्व पर एप को बूटस्ट्रैप न करें जो ट्रांसक्रिप्शन का उपयोग करता है, जैसे ngIf, ngInclude और ngView। यह ऐप $ rootElement और ऐप के इंजेक्टर को गलत जगह देता है, जिससे एनीमेशन काम करना बंद कर देता है और ऐप के बाहर इंजेक्टर को पहुंच से बाहर कर देता है।

कोणीय.बूटस्ट्रैप पर अधिक जानकारी के लिए कृपया the documentation देखें।

स्रोत

2016-02-18 07:29:27

वोट क्यों दें। मैंने डॉक्टर से इसका जिक्र किया है? –

यह उत्तर प्रश्न का समाधान नहीं करता है। प्रश्न एक पृष्ठ में एकाधिक ऐप्स/मॉड्यूल के बारे में पूछ रहा है। – adamtoakley

मैंने एक एकल पृष्ठ ऐप में घोंसले उप ऐप्स में एकाधिक मॉड्यूल और राउटर-आउटलेट का उपयोग करके एक कोणीय अनुप्रयोग के लिए एक पीओसी बनाया है। आपको कम से स्रोत कोड प्राप्त कर सकते हैं: इस

स्रोत

2017-06-08 14:19:12 abahet

मैनुअल बूटस्ट्रैपिंग दोनों मॉड्यूल काम करेंगे मदद मिलेगी https://github.com/AhmedBahet/ng-sub-apps

आशा। इस

<!-- 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']); 
});

यहाँ को देखो Plunker के लिए लिंक है http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p=preview

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

स्रोत

2017-10-11 17:20:12

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

उत्तर

संबंधित मुद्दे