AngularJS - एकल टेम्पलेट में कई एनजी-व्यू

Question

मैं AngularJS का उपयोग करके एक गतिशील वेब ऐप बना रहा हूं। क्या ng-viewएक टेम्पलेट पर कई होना संभव है ?

Comments

लगता है कि एक पुल अनुरोध है, अभी भी कुछ कीड़े के साथ: github.com/angular/angular.js/pull/1198

— Alp

Jan Varwig कोणीय में निर्देशकों की भूमिका के बारे में लिखते हैं। यह आपके प्रश्न का उत्तर नहीं है, लेकिन कुछ मामलों के लिए उनके विचार अच्छे विकल्प हो सकते हैं: jan.varwig.org/archive/angularjs-views-vs-directives/…

— Juha Palomäki

कोणीय ट्यूटोरियल के माध्यम से जा रहा था और यह बिल्कुल वही सवाल था, वे इसे बहुत स्पष्ट नहीं करते हैं, हालांकि एक बहुत गहरी अवधारणा की तरह लगता है ..

— qwwqqq

Answer 1

आपके पास सिर्फ एक हो सकता है ng-view।

: आप कई तरीकों से अपनी सामग्री को बदल सकते हैं ng-include, ng-switchमानचित्रण विभिन्न नियंत्रकों और routeProvider के माध्यम से टेम्पलेट्स या।

Comments

मैपिंग कंट्रोलर और टेम्प्लेट पूरे एनजी-व्यू तत्व की जगह लेंगे, है ना?

— zx1986

विजेट की सामग्री को गतिशील रूप से बदलने के बारे में क्या? क्या आप विजेट और विजेट के लिए एक नियंत्रक और विजेट के लिए एक मॉडल के लिए एक दृश्य बनाना नहीं चाहेंगे?

— रे सुलेजर

क्या विचारों का उपयोग करने की सिफारिश की गई है? क्या डिव को परिभाषित करना ng-showऔर ng-hideचर का उपयोग करके उनकी दृश्यता को नियंत्रित करना बेहतर नहीं है ? क्योंकि कभी-कभी मैं कई घटकों को छिपाने / दिखाने के लिए पसंद कर सकता हूं

— SomeSomething

Answer 2

यूआई-राउटर एक ऐसी परियोजना है जो मदद कर सकती है: https://github.com/angular-ui/ui-router इसकी एक विशेषता यह है कि एकाधिक नामांकित दृश्य हैं

यूआई-राउटर में कई विशेषताएं हैं और मैं आपको इसका उपयोग करने की सलाह देता हूं यदि आप एक उन्नत ऐप पर काम कर रहे हैं।

यहां कई नामांकित दृश्यों के दस्तावेज़ देखें ।

Comments

दुर्भाग्य से जैसा कि ui- राउटर रीडमे कहता है: नोट: यूआई-राउटर सक्रिय विकास के तहत है। इस तरह, जबकि यह पुस्तकालय अच्छी तरह से परीक्षण किया गया है, एपीआई बदल सकता है। उत्पादन अनुप्रयोगों में इसका उपयोग करने पर विचार करें, यदि आप एक चैंज के बाद सहज हों और उसी के अनुसार अपने उपयोग को अपडेट कर रहे हों।

— ट्रेनोआसिस

@trainoasis ने कई परियोजनाओं के लिए इसका इस्तेमाल किया, 'बहुत' स्थिर और अब तक मुझे एपीआई बदलने के बारे में कोई समस्या नहीं थी, वास्तव में मुझे एपीआई में कोई बड़ा बदलाव याद नहीं है।

— मोर्तेजा ज़िया

Answer 3

मेरा मानना ​​है कि आप इसे सिर्फ सिंगल होने से पूरा कर सकते हैं ng-view। मुख्य टेम्पलेट में आपके पास ng-includeउप दृश्यों के लिए अनुभाग हो सकते हैं , फिर मुख्य नियंत्रक में प्रत्येक उप टेम्पलेट के लिए मॉडल गुणों को परिभाषित कर सकते हैं । ताकि वे स्वचालित रूप से ng-includeवर्गों में बंध जाएंगे । यह एक से अधिक होने के समान हैng-view

आप प्रलेखन में दिए गए उदाहरण की जाँच कर सकते हैंng-include

उदाहरण में जब आप ड्रॉपडाउन सूची से टेम्पलेट बदलते हैं तो यह सामग्री को बदल देता है। यहां मान लें कि आपके पास एक मुख्य है ng-viewऔर मैन्युअल रूप से ड्रॉप डाउन का चयन करके उप सामग्री का चयन करने के बजाय, आप इसे तब करते हैं जब मुख्य दृश्य लोड होता है।

Comments

यूआई-राउटर जैसे समाधान की अनुपस्थिति में एनजी-इनकॉल वास्तव में एक व्यवहार्य विकल्प है, जैसा आपने समझाया है। कौन-सी एनजी-इनवॉइस पूरा नहीं कर सकता है URL (राज्य) संचालित बहु विचार, $ मार्ग वर्तमान URL के आधार पर विभिन्न विचारों को गतिशील रूप से प्रस्तुत नहीं कर सकता है। हम कोणीय की भुजाओं को मोड़ सकते हैं और नियंत्रक में कस्टम लॉजिक का उपयोग करके ऐसा कर सकते हैं, जैसे कि ng-include प्रलेखन में उदाहरण है , लेकिन यह वांछनीय एप्लिकेशन आर्किटेक्चर पैटर्न नहीं है, यूआई-राउटर सही प्रकार का समाधान है।

— येलिंग

@ प्लसिंग टिप्पणी के लिए एक प्लस। एनजी-शामिल का उपयोग करना एक समाधान है।

— फर्षिद सबरी

Answer 4

नियमित रूप से उपयोग करना ng-view मॉड्यूल आपके पास एक से अधिक डायनामिक टेम्पलेट नहीं हो सकते।

हालाँकि, यह प्रोजेक्ट आपको ऐसा करने में सक्षम बनाता है (देखें ui-router)।

Comments

कोणीय-यूआई (निकट) भविष्य में एक अच्छे विकल्प की तरह लगता है लेकिन यह अभी भी उत्पादन उपयोग के लिए बहुत अस्थिर लगता है

— डेविड बैरेटो

Answer 5

एकाधिक या नेस्टेड दृश्य होना संभव है। लेकिन एनजी-व्यू द्वारा नहीं।

कोणीय में प्राथमिक रूटिंग मॉड्यूल कई विचारों का समर्थन नहीं करता है। लेकिन आप यूआई-राउटर का उपयोग कर सकते हैं। यह एक थर्ड पार्टी मॉड्यूल है जिसे आप गिथूब, कोणीय-यूआई / यूआई-राउटर, https://github.com/angular-ui/ui-router के माध्यम से प्राप्त कर सकते हैं । वर्तमान में ngRouter (ngNewRouter) का एक नया संस्करण भी विकसित किया जा रहा है। यह फिलहाल स्थिर नहीं है। इसलिए मैं आपको यूआई-राउटर के साथ एक सरल स्टार्ट अप उदाहरण प्रदान करता हूं। इसका उपयोग करके आप विचारों को नाम दे सकते हैं और निर्दिष्ट कर सकते हैं कि उन्हें प्रदान करने के लिए कौन से टेम्पलेट और नियंत्रक का उपयोग किया जाना चाहिए। $ StateProvider का उपयोग करके आपको यह निर्दिष्ट करना चाहिए कि विशिष्ट राज्य के लिए प्लेसहोल्डर्स को कैसे देखना चाहिए।

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

आपको इस नमूने के लिए कोणीयज, और कोणीय ui.router को संदर्भित करने की आवश्यकता है।

$ bower install angular-ui-router

Comments

थैंक्स फ़्रेडिड दिस ग्रेट! इसका उल्लेख कोणीय-उई / उई-राउटर गितुब रिपॉजिटरी github.com/angular-ui/ui-router में किया जाना चाहिए जहां मुझे मॉड्यूल मिला है

— पूरी तरह से

मुझे यकीन नहीं है कि आपको ऐसा करने की आवश्यकता क्यों होगी। क्यों नहीं हेडर / फुटर और एनजी-कंटेंट को शामिल करें?

— user441521

अगर फाइल को होस्ट किया जाता है तो एनजी-इन काम करेगा, उदाहरण के लिए। नोडज पर। यदि स्थानीय निर्देशिका के साथ काम करते हैं, तो यह एक क्रॉस डोमेन त्रुटि फेंक देगा।

— सिड

Answer 6

आप कई एनजी-व्यू नहीं कर सकते। नीचे मेरा उपयोग मामला है जहां मैंने अपनी आवश्यकता को हल किया। मैं अपने मॉडल संवाद में वर्जित व्यवहार करना चाहता था। मैं हाइपरलिंक होने वाले टैब पर क्लिक के रूप में समस्या का सामना कर रहा था जो राउटर लिंक को आमंत्रित करेगा। मैंने टैब के लिए बटन और सीएसएस का उपयोग करके इसे हल किया। जब उपयोगकर्ता टैब पर क्लिक करता है, तो यह वास्तव में किसी भी हाइपरलिंक को कॉल नहीं करेगा जो हमेशा एनजी-राउटर को आमंत्रित करेगा। जब उपयोगकर्ता टैब पर क्लिक करता है, तो यह एक विधि कहलाएगा, जहां मैं html को डायनामिकली लोड करता हूं। नीचे टैब पर क्लिक करने का कार्य है

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

प्रयोक्ता $ टेम्पलेट Test_template.html पेज में अपनी html सामग्री जोड़ें। यह html सामग्री आपके कंट्रोलर से बंध जाएगी।