आवेदन उदाहरण - AngularJS + बूटस्ट्रैप v3 पर फोन बुक

कोणीय समुदाय को नवीनतम लाइब्रेरी संस्करणों पर सरल उदाहरणों के साथ नए ट्यूटोरियल और ट्यूटोरियल की आवश्यकता होती है। कोणीय v0.X में काम करने वाले नियम अब सभी मान्य नहीं हैं, जिन्हें देखना आसान है, लेकिन मैं एक साइट पर एक पाठ्यपुस्तक से एक फिल्टर की तुलना में कुछ अधिक जटिल बनाना चाहता हूं और कार्यान्वयन उदाहरणों से एक TODO सूची (जैसे v1 के लिए पाया गया) .0.3: jsfiddle.net/dakra/U3pVM )। जब इस तरह के उदाहरण बहुत सरल लगते हैं, तो मैं समस्या के बयान के विकास और कुछ शैली के डिजाइन के साथ वास्तविकता के करीब एक आवेदन देखना चाहता हूं।

हम एक उदाहरण आवेदन प्रदान करते हैं - 2 सूचियों में फोन बुक के साथ काम करना: मुख्य और "स्पैम"। सूची में से प्रत्येक फ़िल्टरिंग के अधीन है (ठीक है, यह सबसे सरल और सबसे अंतर्निहित फ्रेमवर्क है), तत्वों को संपादित करना, नए लोगों को जोड़ना और मौजूदा लोगों को हटाना। एक क्लिक से तत्वों को एक सूची से दूसरी सूची में स्थानांतरित किया जाता है, और तत्वों का हाइलाइटिंग बूटस्ट्रैप v.3 की शैली में किया जाता है।

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

उदाहरण हैलो वर्ल्ड से काफी दूर चला गया और TODO सूची से बहुत दूर नहीं। कोई एरोबैटिक तकनीक जैसे निर्देश (एनजी-मॉडल विशेषताओं को छोड़कर) नहीं हैं, सेवाओं के साथ काम करने वाले कोई नियंत्रक नहीं हैं, हालांकि दो नियंत्रक मौजूद हैं (एनजी-नियंत्रक = "एड्रेसकंट्रोलर", एनजी-नियंत्रक = "एड्रेसएड कंट्रोलर") और प्रत्येक का अपना चर है $ गुंजाइश - प्रत्येक नियंत्रक की वस्तुओं की मुख्य जड़। कोई मॉड्यूल नहीं हैं (एक विशुद्ध रूप से औपचारिक संस्करण ddd2 = angular.module ("ddd", []); जिसे छोड़ा जा सकता है)। यही है, यह उदाहरण कुछ कोणीय तकनीकों को अन्य भागों से अलग करने के लिए रोशनी देता है और दिखाता है कि कई अन्य भागों को देखने और नियंत्रकों के साथ काम करने की आवश्यकता नहीं है।

मुख्य रुझान

चर और विधियों को प्रत्येक नियंत्रक में $ स्कोप ऑब्जेक्ट (हैश) के तहत संयोजित किया जाता है। नियंत्रक HTML तत्व पर आधारित है, जिसमें एनजी-नियंत्रक विशेषता में नियंत्रक का नाम शामिल है।

कोड में, आप सूची टेम्प्लेट का उपयोग देख सकते हैं, जिनमें से किसी को भी अलग विवरण या किसी अन्य फ़ाइल से लोड करने की आवश्यकता नहीं है। इसके बजाय, ऐसे टेम्पलेट (निर्देश) स्पष्ट रूप से भविष्य की सूचियों की संरचना का वर्णन करते हैं, क्योंकि लूप वाले कार्यक्रम उनके काम के तर्क का वर्णन करेंगे।

इवेंट सबसिस्टम से, उदाहरण में बटनों पर और एक स्थान पर केवल स्पष्ट क्लिक शामिल हैं - ब्लॉक के शीर्षक पर (और ब्लॉक खुद को शैलियों द्वारा पॉप-अप में बदल दिया जाता है)।

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

जैसा कि एक मामले के अध्ययन के लिए अपेक्षित है, प्रारंभिक TODO सूची की तुलना में समाधान की जटिलता बढ़ जाती है, लेकिन अंत तक नहीं - समाप्त आवेदन के लिए नहीं। कोणीय में उदाहरण सर्वर से बंधा नहीं है, परिवर्तन केवल ब्राउज़र में रहते हैं, और प्रारंभ डेटा जेएस कोड (मुख्य डेटा सूची का नियंत्रक) से ली गई एक छोटी सूची से शुरू होता है। यहां तक ​​कि लोकलस्टोरेज भी शामिल नहीं है, हालांकि यह मुश्किल नहीं होगा, लेकिन यह कोणीय की अतिरिक्त समझ के लिए कुछ भी नहीं देगा। उदाहरण एक वेब सर्वर और AJAX अनुरोधों के बिना चलता है।

कोड

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

• एक डेमो विकल्प है जिसमें बाहरी पुस्तकालयों की आवश्यकता नहीं है (दोनों AngularJS v.1.2.10 और बूटस्ट्रैप v3.1.1 एक ही डोमेन पर टिप्पणियों के साथ असम्पीडित रूप में हैं)।
  
  
• वहाँ है - jsfiddle , जो आपको प्रयोग करने की अनुमति देता है, यह सीडीएन से पुस्तकालयों के संकुचित संस्करणों को लोड करता है।
  
  
• और जीथब पर 3 फाइलें हैं जो बिना वेब सर्वर की आवश्यकता के काम करेंगी - कंप्यूटर पर फाइलों से सही।

कितना कोड है?

सभी कोड सीएसएस (20%), एचटीएमएल और जेएस (50%, 150 लाइनें) की 300 लाइनें हैं, बाकी ऐसी लाइब्रेरी हैं जो जानबूझकर संकुचित नहीं हैं, और Angular से jQuery और jqLite का उपयोग नहीं किया जाता है।

परीक्षण क्या करते हैं?

3 परीक्षण की जाँच करें:
1. सूची सरणी में प्रविष्टियों में से प्रत्येक में सभी गैर-खाली नामों (fname) की उपस्थिति। डेटा को एक खाली नाम लिखना एक त्रुटि माना जाता है।
2. एक नई सूची आइटम ("संपर्क") रिकॉर्ड करने की प्रक्रिया, फिर डेटा के सही स्थान की जांच करता है और परीक्षण रिकॉर्ड को तुरंत हटा देता है।
3. सभी गैर-खाली फोन नंबरों की उपस्थिति (हालांकि वे डायलन की शुद्धता के लिए मान्य नहीं हैं और आम तौर पर नंबरों की उपस्थिति के लिए)। सबसे पहले, "डेटाबेस" में कई गुम नंबरों की अनुमति दी गई थी, इसलिए "इनर फोन सत्यापन" परीक्षण गिर जाता है ... अब आप जानते हैं कि डेटाबेस के साथ क्या करना है ताकि कोड को छूने के बिना, आप परीक्षण को सही कर सकें। (हां, "फ़ोन" फ़ील्ड में फ़ोन या कुछ जोड़ें या अनुचित प्रविष्टियों को हटा दें।)

परीक्षणों की मात्रा जेएस की 40 लाइनें हैं।

आगे क्या किया जा सकता है?

गुणवत्ता कोड के उत्साही इस उद्यम के पद्धतिगत मूल्य में सुधार के विचार से प्रेरित हो सकते हैं। उसके पास विकसित होने के लिए जगह है।
1) बहुभाषी समर्थन जोड़ें;
2) कोणीय की शैली में परीक्षण लिखना;
3) सर्वर को कनेक्ट करें (लेकिन इतना है कि इसके बिना कुछ भी नहीं टूटता है)।

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

आशा है कि यह उदाहरण मानक ट्यूटोरियल और एपीआई को AngularJS 1.2.X में पार्स करने में मदद करता है।

संबंधित साहित्य:

• AngularJS Tutorial (en): MVC, रूटिंग, TODO ऐप,
• कहाँ सीखना शुरू करें AngularJS (ru) (बहुत बुनियादी)
• से पाठ्यपुस्तक (और बाकी) (बर्बाद) का अनुवाद। वेबसाइट angularjs.org
• JQuery (ru) के आदी लोगों के लिए AngularJS : दृष्टिकोण, दो-तरफ़ा डेटा बाइंडिंग, निर्भरता (2 शब्दों में)
• उदाहरण के साथ कोणीयजेएस नियंत्रक ट्यूटोरियल (एन): स्कोप, मॉड्यूल, नेस्टेड और विरासत में मिला नियंत्रक, 4 डेमो।

उन्नत:

• AngularJS को समझना - सरल उदाहरण (en): NodeJS, एक्सप्रेस, अनुप्रयोग, मॉड्यूल, रूटिंग, दृश्य। नियंत्रक, सर्वर से डेटा
• AngularJS की सर्वोत्तम प्रथाएँ
• शपरगल्को (en) (फ़िल्टर के साथ कीवर्ड (JS), डिज़ाइन के साथ)