क्या AngularJS सिर्फ सिंगल-पेज एप्लिकेशन (एसपीए) के लिए है?

Question

हम एक एप्लिकेशन के सामने के अंत के निर्माण के विकल्पों को देख रहे हैं और एक उपकरण का मूल्यांकन करने की कोशिश कर रहे हैं जो हमारे लिए काम करेगा और हमें आगे बढ़ने के लिए सबसे अच्छा मंच देगा।

यह एक Node.js परियोजना है। हमारी प्रारंभिक योजना एक्सप्रेस का उपयोग करने और उस मार्ग से नीचे जाने की थी, लेकिन हमने तय किया कि इस चरण को समाप्त करने से पहले यह समीक्षा करना सबसे अच्छा हो सकता है कि वहां क्या है। हमारे आवेदन में कई क्षेत्र हैं जो हमें विश्वास नहीं है कि वे एकल-पृष्ठ मॉडल में फिट होते हैं, वे एक आवेदन के दृष्टिकोण से संबंधित हैं, लेकिन एक दृश्य से नहीं।

हमने कुछ रूपरेखाएँ देखी हैं जिनका उपयोग हम ग्राहक को बैकबोन.जेएस , उल्का , इत्यादि के निर्माण के लिए कर सकते हैं और एंगुलरजेएस भी।

यह काफी हद तक स्पष्ट प्रश्न हो सकता है, लेकिन अगर एंगुलरजेएस विशुद्ध रूप से सिंगल-पेज एप्लिकेशन के लिए है तो हम इसे समझ नहीं सकते हैं या इसका उपयोग एक्सप्रेस जैसे मल्टी-पेज एप्लिकेशन के लिए किया जा सकता है।

---

अद्यतन 17 जुलाई 2013 बस लोगों को लूप में रखने के लिए, मैं इस प्रश्न को अपडेट कर रहा हूं क्योंकि हम प्रक्रिया से गुजर रहे हैं। हम अब के लिए सब कुछ एक साथ बनाने जा रहे हैं, और हम देखेंगे कि यह कितना अच्छा प्रदर्शन करता है। हम कुछ ऐसे लोगों तक पहुँच गए हैं जो हमारे से अधिक AngularJS के साथ योग्य हैं और संदर्भ साझा करने वाले बड़े अनुप्रयोगों को विभाजित करने के बारे में प्रश्न प्रस्तुत करते हैं, लेकिन एक ही पृष्ठ पर बहुत बड़े काम कर सकते हैं।

सर्वसम्मति यह थी कि हम कई स्थिर पृष्ठों की सेवा कर सकते हैं और केवल उन पृष्ठों के साथ काम करने वाले एंगुलरजेएस एप्लिकेशन बना सकते हैं, जो प्रभावी रूप से एसपीए का संग्रह बना सकते हैं और मानक लिंकिंग का उपयोग करके उन अनुप्रयोगों को एक साथ जोड़ सकते हैं। अब हमारे उपयोग का मामला बहुत विशिष्ट है क्योंकि हमारे समाधान में कई अनुप्रयोग हैं, और जैसा कि मैंने कहा कि हम पहले एकल कोड आधार की कोशिश करने जा रहे हैं और वहां से अनुकूलन करेंगे।

अद्यतन 18 जून 2016 परियोजना एक चट्टान से गिर गई, इसलिए हमने कभी भी बहुत अधिक काम करने के लिए गोल नहीं किया। हमने इसे हाल ही में फिर से उठाया है, लेकिन अब कोणीय का उपयोग नहीं कर रहे हैं और इसके बजाय रिएक्ट का उपयोग कर रहे हैं। हम अभी भी पिछले अद्यतन में उल्लिखित आर्किटेक्चर का उपयोग कर रहे हैं, जहां हम एक्सप्रेस और सेल्फ एप्लिकेशन का उपयोग करते हैं, इसलिए, उदाहरण के लिए, हमारे पास /chatएक्सप्रेस में एक मार्ग है जो हमारे रिएक्ट चैट ऐप को परोसता है, हमारे पास एक और मार्ग है /projectsजो प्रोजेक्ट्स एप्लिकेशन और कार्य करता है। जल्द ही। हम जिस तरह से इसे देख रहे हैं, वह प्रत्येक ऐप अपने फीचर सेट के संदर्भ में एक समग्र जड़ है, इसे अपने आप में एक ऐप माना जाने के लिए इसे स्टैंडअलोन करने में सक्षम होने की आवश्यकता है। तकनीकी रूप से, सभी जानकारी वहां से बाहर है, इसका सिर्फ मूल एक्सप्रेस और क्लाइंट साइड ऐप का अच्छा स्वाद जो भी आप उपयोग करना चाहते हैं।

Comments

तो यह कैसे जाना होगा? मैं यह पता लगाने की कोशिश कर रहा हूं कि 50+ पृष्ठ ASP.NET एप्लिकेशन को शुद्ध HTML + जावास्क्रिप्ट + रीस्ट एप्लिकेशन में कैसे स्थानांतरित किया जाए और मुझे वास्तव में ऐसा नहीं लगता कि यह एक एसपीए के रूप में कैसे काम करेगा।

— ग्रेग

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

— मोडिका

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

— मोदिका

बहुत बहुत धन्यवाद। क्या कोई विशिष्ट कोडिंग है जो विभिन्न एसपीए को एक साथ जोड़ने के लिए किया जाना है? या सिर्फ नियमित लिंक?

— ग्रेग

@Greg, हमारे सीमित ज्ञान से, क्योंकि वे अनिवार्य रूप से अपने स्वयं के सही मानक लिंकिंग में ऐप हैं, काम करेंगे, जाहिर है कि यह संभवत: एक सीधा आगे नहीं होगा और दृढ़ता (कुकीज़, स्थानीय भंडारण) के कुछ प्रकार को बनाए रखने की आवश्यकता होगी हो सकता है कि शेयर और जानकारी या प्रोफाइल जैसी साझा जानकारी अगर ऐप किसी लॉगिन के पीछे है। हमारे ऐप हमारे API से बहुत अधिक जुड़े होंगे और जैसा कि हम एक विश्वसनीय ऐप बना रहे हैं, हम प्रत्येक अनुरोध की सुरक्षा के लिए oauth का उपयोग कर रहे हैं, मुझे लगता है कि Trello कुछ ऐसा ही करता है, लेकिन मैं गलत हो सकता है।

— मोदिका

Answer 1

हर्गिज नहीं। विभिन्न प्रकार के ऐप बनाने के लिए आप Angular का उपयोग कर सकते हैं। क्लाइंट-साइड रूटिंग सिर्फ एक छोटा सा टुकड़ा है।

आपके पास उन विशेषताओं की एक बड़ी सूची है जो क्लाइंट-साइड रूटिंग के बाहर आपको लाभान्वित करेंगे:

• दो तरफा बंधन
• templating
• मुद्रा स्वरूपण
• pluralization
• पुन: प्रयोज्य नियंत्रण
• उत्साहपूर्ण एपीआई से निपटने
• AJAX हैंडलिंग
• मॉड्यूलर
• निर्भरता अन्तःक्षेपण

यह सोचने के लिए पागल है कि यह सब "केवल एक ही पृष्ठ ऐप में इस्तेमाल किया जा सकता है"। बिल्कुल नहीं .. यह कहने जैसा है कि "जैकी केवल एनिमेशन वाली परियोजनाओं के लिए है"।

यदि यह आपकी परियोजना में फिट बैठता है, तो इसका उपयोग करें।

Comments

उल्लेख करने के लिए एक और बात यह है कि पूर्ण पृष्ठों के लिए कोणीय का उपयोग करने की भी आवश्यकता नहीं है - यह एक मौजूदा सिस्टम में घटकों को बनाने के लिए एकीकृत किया जा सकता है, अर्थात एक विरासत विजेट या एक विरासत अनुप्रयोग के अंदर प्लगइन।

— एलेक्स ओसबोर्न

@ मांस, उत्तर के लिए धन्यवाद, यह समझ में आता है, लेकिन हम जो खोजने में संघर्ष कर रहे हैं वह है "कैसे" हम इसका उपयोग करते हैं बहु पृष्ठ एप्लिकेशन का निर्माण करते हैं, यही कारण है कि प्रश्न पोस्ट किया गया था, यह वास्तव में एक अलग प्रश्न है, इसलिए आपका उत्तर रहा है उदाहरण के लिए स्वीकार किया जाता है, लेकिन हम एक्सप्रेस.जेएस के साथ कोणीय.जेएस का उपयोग कर सकते हैं या ऐसा कुछ है जो सिर्फ समय की बर्बादी और जटिलता पर है।

— मोडिका

एक्सप्रेस के साथ कोणीय लगभग आदर्श है! यह वास्तव में, एक्सप्रेस के साथ एक RESTful एपीआई बनाने के लिए वास्तव में आसान है आप अपने कोणीय आवेदन (ओं) से उपभोग कर सकते हैं। Google NodeJS एक्सप्रेस रेस्टफुल एपीआई और कोणीय के $ संसाधन और $ http सेवाएं। उसके बाद, बस प्रोटोटाइप बनाना और उसके साथ खेलना शुरू करें। मुझे लगता है कि आप पा सकते हैं कि आप "HOW" के बारे में बहुत ज्यादा चिंता कर रहे हैं।

— बेन लेश

@ मांस, देर से वापस आने के लिए खेद है। हमारे पास पहले से ही एक REST / Hypermedia API है जिसे Restify का उपयोग करके बनाया गया है, मुझे लगता है कि हमें किसी भी तरह से बनाए गए अलग-अलग "ऐप्स" को जोड़ने के लिए एक साफ-सुथरा रास्ता खोजने की जरूरत है, इस पर गौर करेंगे और शायद किसी बिंदु पर सवाल को अपडेट करेंगे।

— मोदिका

@Modika क्या आप किसी भी अच्छे संसाधनों को खोजने में सक्षम थे, या मल्टी पेज ऐप्स के लिए कोई अच्छी जानकारी है?

— dre

Answer 2

मैं "कैसे" के साथ पहले से ही कोणीय के साथ संघर्ष किया। फिर एक दिन यह मुझ पर छा गया: "यह अभी भी जावास्क्रिप्ट है"। एंगुलर के इन्स-एंड-आउट (पुस्तक के साथ मेरे पसंदीदा में से एक पर https://github.com/angular-app/angular-app ) के उदाहरणों का एक समूह है । याद करने के लिए सबसे बड़ी बात यह है कि जैसे आप किसी अन्य प्रोजेक्ट में होंगे वैसे ही js फाइलों में लोड करना है। आपको बस इतना करना है कि विभिन्न पृष्ठ सही कोणीय वस्तु (नियंत्रक, दृश्य, आदि) का संदर्भ दें और आप बंद और चल रहे हैं। मुझे उम्मीद है कि यह समझ में आता है, लेकिन जवाब इतना आसान था कि मैंने इसे नजरअंदाज कर दिया।

Answer 3

शायद मेरा अनुभव किसी के लिए उपयोगी होगा। हम अपनी परियोजना को तार्किक रूप से विभाजित करते हैं। एक एसपीए हम फ़ीड के लिए उपयोग करते हैं, एक और एक नक्शे के साथ काम करने के लिए, एक अन्य उपयोगकर्ता प्रोफ़ाइल और आदि को संपादित करने के लिए। उदाहरण के लिए हमारे पास तीन ऐप हैं: फ़ीड, उपयोगकर्ता और मैप। मैं इसे इस तरह अलग किए गए url में उपयोग करता हूं:

https://host/feed/#/top/
https://host/user/#/edit/1/
https://host/map/favorites/#/add/

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

वास्तव में, आप बहुत आसानी से एसपीए ऐप्स का मिश्रण बना सकते हैं, उदाहरण के लिए फ़ीड को एंगुलरज एप्लिकेशन के साथ यूआरएल, रिएक्जेज के साथ उपयोगकर्ता ऐप और बैकबोन.जेएस एप्लिकेशन में मैप किया जाएगा।

आपके सवाल के जवाब में:

एंगुलर न केवल एसपीए के लिए, एंगुलर एसपीए अनुप्रयोगों के लिए अच्छा और तेज खेलता है, लेकिन कोई भी एसपीए विभिन्न प्रकार के एसपीए अनुप्रयोगों के निर्माण के लिए परेशान नहीं करता है। लेकिन अपने url वास्तुकला के बारे में सोचना डॉन `टी अपने अनुप्रयोगों की एसईओ उपलब्धता के बारे में भूल जाओ।

मैं भी इस विचार का समर्थन करता हूं:

प्रोजेक्ट और ऐप में क्या अंतर है? एक ऐप एक वेब एप्लिकेशन है जो कुछ करता है - जैसे, एक वेबलॉग सिस्टम, सार्वजनिक रिकॉर्ड का एक डेटाबेस या एक साधारण पोल ऐप। एक परियोजना एक विशेष वेबसाइट के लिए कॉन्फ़िगरेशन और एप्लिकेशन का एक संग्रह है। एक प्रोजेक्ट में कई ऐप्स हो सकते हैं। एक ऐप कई प्रोजेक्ट्स में हो सकता है।

Answer 4

यदि आप सभी की जरूरत है ग्राहक डेटाबाइंडिंग के साथ कुछ पृष्ठ हैं, तो मैं नॉकआउट और जावास्क्रिप्ट नामस्थान के साथ जाऊंगा।

नॉकआउट बहुत अच्छा है, खासकर अगर आपको पिछड़े हुए अनुकूलता की आवश्यकता है और इसमें काफी सीधे आगे के पृष्ठ हैं। यदि आप तीसरे पक्ष के घटकों का उपयोग कर रहे हैं, तो नॉकआउट के कस्टम बाइंडिंग सीधे और आसान हैं।

जावास्क्रिप्ट नामस्थान आपको अपने कोड को अलग और प्रबंधनीय रखने की अनुमति देता है।

var myCo = myCo || {};
myCo.page = {
    init: function(){ ... },
    ...
}

और आपके अन्य स्क्रिप्ट लोड होने के बाद एक स्क्रिप्ट टैग में

<script>
    myCo.init();
</script>

कुंजी यह है कि आप अपनी आवश्यकता के लिए जो भी उपकरण चाहते हैं, उसका उपयोग करते हैं। डेटाबाइंडिंग की आवश्यकता है? नॉकआउट (या जो भी आपको पसंद हो)। मार्ग की आवश्यकता है? sammy.js (या जो भी आपको पसंद है)।

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

Answer 5

मैं कहूंगा कि अगर आप सिर्फ एक एसपीए को विकसित करना चाहते हैं तो कोणीय ओवरकिल है। यकीन है, अगर आप पहले से ही इसके साथ विकसित करने में सहज हैं, तो आगे बढ़ें। लेकिन अगर आप ढांचे के लिए नए हैं और केवल एक एसपीए को विकसित करने की आवश्यकता है, तो मैं अपने स्वयं के भत्तों की संख्या के साथ कुछ और सरल के साथ जाऊंगा। मैं Vue.js या Aurelia.io में देखने की सलाह देता हूं ।

Vue.js दो-तरफ़ा डेटा बाइंडिंग, MVVM, पुन: प्रयोज्य घटक, सरल और त्वरित रूप से पिकअप, लिखने के लिए कम कोड आदि का उपयोग करता है, यह कुछ कोणीय और अभिक्रिया की सर्वोत्तम विशेषताओं को जोड़ता है।

Aurelia.io , सभी ईमानदारी में, मुझे इसके बारे में ज्यादा जानकारी नहीं है। लेकिन मैंने चारों ओर झाँका है और यह ऊपर देखने के समान एक वैकल्पिक मूल्य है।

लिंक:
https://vuejs.org/
http://aurelia.io/