विस्तृत AngularJS मोबाइल एप्लिकेशन डेवलपमेंट गाइड

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

उत्तरदायी वेब अनुप्रयोग

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

बातचीत

डेस्कटॉप अनुप्रयोगों के लिए, ng-click निर्देश के माध्यम से आवेदन के साथ बातचीत और पहले से ही उपलब्ध हैं।
AngularJS संस्करण 1.2.0 और उच्चतर के साथ शुरू, अब हमारे पास नए उपकरणों के साथ बातचीत करने की क्षमता है, नए मॉड्यूल के लिए धन्यवाद - ngTouch । यह पुस्तकालय एंगुलरजेएस के मूल में नहीं बनाया गया है, इसे स्थापित किया जाना चाहिए।

स्थापना

ngTouch कई मायनों में स्थापित किया जा सकता है। इस मॉड्यूल को स्थापित करने का सबसे आसान तरीका इसे angular.org से डाउनलोड करना है।
डाउनलोड संवाद में एक्स्ट्रा पाएं, और डाउनलोड पृष्ठ पर जाएं, अपने एप्लिकेशन के लिए उपलब्ध किसी भी स्थान पर ng-touch.js फ़ाइल डाउनलोड करें।
इसके बजाय, आप angular-touch स्थापित करने के लिए Bower का उपयोग कर सकते हैं:

 $ bower install angular-touch --save 

किसी भी स्थिति में, हमें इस लाइब्रेरी का एक लिंक index.html फ़ाइल में जोड़ना होगा:

 <script src="/bower_components/angular-touch/angular-touch.js"></script> 

और अंत में, आपको हमारे आवेदन के लिए निर्भरता के रूप में ngTouch कनेक्ट करना होगा:

 angular.module('myApp', ['ngTouch']); 

अब आप ngTouch लाइब्रेरी का उपयोग कर सकते हैं।

ngTouch

क्लिक-आधारित घटनाओं को ट्रिगर करते समय मोबाइल ब्राउज़र अपने डेस्कटॉप समकक्षों से कुछ अलग तरीके से काम करते हैं। मोबाइल ब्राउज़र, क्लिक करने की क्रिया का पता लगाने के बाद, 300 मि। या इसके बारे में कुछ प्रतीक्षा करें, यह तय करने से पहले कि किस विशेष घटना को उठाया जाना है, उदाहरण के लिए, स्क्रीन पर डबल-क्लिक करके। इस देरी के बाद, ब्राउज़र एक click ईवेंट को फायर करता है।
इस देरी से आपके आवेदन की प्रतिक्रिया देर से हो सकती है। हमें click इवेंट के साथ काम करने के बजाय इससे बचने के लिए touch इवेंट के साथ काम करना चाहिए।
पहला क्लिक होने के बाद, ब्राउज़र click इवेंट की फायरिंग में देरी करता है, अगली कार्रवाई की प्रतीक्षा करता है। ngTouch आपके लिए इस क्रिया को संभालने का ध्यान ngTouch ।
नतीजतन, ng-click निर्देश मोबाइल ब्राउज़र पर डेस्कटॉप ब्राउज़र के समान ही काम करता है।

 <button ng-click="save()">Save</button> 

ngTouch दो नए निर्देश भी जोड़ता है: स्वाइप निर्देश। ये निर्देश हमें स्क्रीन के बाएं या दाएं किनारे पर निर्देशित उपयोगकर्ता की उंगली के आंदोलनों को ट्रैक करने की अनुमति देते हैं। वे उपयोगी होते हैं जब हम उपयोगकर्ता के इशारों को ट्रैक करना चाहते हैं, जो कि गैलरी में अगली फोटो या हमारे आवेदन के अगले हिस्से तक स्क्रॉल करना चाहिए।
ngSwipeLeft उपयोगकर्ता की उंगली के दाईं से बाईं ओर के आंदोलनों को ट्रैक करता है, और ngSwipeRight बाएं से दाएं उंगली के निर्देश को ट्रैक करता है।
NgSwipe * निर्देशों की एक अच्छी विशेषता यह है कि वे स्पर्श उपकरणों के साथ-साथ माउस ईवेंट जैसे कि क्लिक या मूवमेंट के साथ भी काम करते हैं।
ngSwipeLeft और ngSwipeRight का उपयोग करना काफी आसान है। उदाहरण के लिए, मान लें कि हमारे पास ईमेल संदेशों की एक सूची है, और हम प्रत्येक पत्र के लिए उपलब्ध कार्यों को दिखाना चाहते हैं, जैसा कि लोकप्रिय MailboxApp मोबाइल मेल क्लाइंट में है।
हम अपनी संदेश सूची के साथ संयोजन में स्वाइप निर्देशों का उपयोग करके आसानी से इस कार्यक्षमता को लागू कर सकते हैं। जब हम अपने संदेशों की सूची दिखाते हैं, तो हम इस मेल संदेश के संभावित कार्यों को दिखाने के लिए एक निश्चित दिशा में उपयोगकर्ता के इशारों को ट्रैक करते हैं।
जब हम एक मेल संदेश के लिए कार्रवाई दिखाते हैं, तो हम इस मामले में विपरीत दिशा में निर्देशित उपयोगकर्ता इशारों को ट्रैक करने में सक्षम करते हैं, इस मामले में, पहले प्रदर्शित किए गए कार्यों को छिपाने के लिए।

 <ul> <li ng-repeat="mail in emails"> <div ng-show="!mail.showActions" ng-swipe-left="mail.showActions=true"> <div class="from"> : <span>{{ mail.from }}</span> </div> <div class="body"> {{ mail.body }} </div> </div> <div ng-show="mail.showActions" ng-swipe-right="mail.showActions=false"> <ul class="actions"> <li><button></button></li> <li><button></button></li> </ul> </div> </li> </ul> 

आप मूल लेख के साथ साइट पर एक लाइव उदाहरण देख सकते हैं।

$ स्वाइप सेवा

$swipe का उपयोग संवेदी एनीमेशन की प्रक्रिया को ठीक करने के लिए किया जा सकता है। $swipe आपको होल्ड से अमूर्त और घटनाओं को उच्च-स्तरीय व्यवहार में खींचने की अनुमति देती है।
$swipe में एकल bind() विधि है। bind() विधि उस ऑब्जेक्ट को स्वीकार करती है जिसमें कार्रवाई संलग्न की जाएगी, साथ ही चार इवेंट हैंडलर के साथ एक ऑब्जेक्ट।
इन ईवेंट हैंडलर्स को ऑब्जेक्ट के निर्देशांक वाले एक पैरामीटर के साथ बुलाया जाएगा, उदाहरण के लिए, जैसे कि { x: 200, y: 300 } ।
ये चार इवेंट हैंडलर इवेंट हैंडलर को परिभाषित करते हैं:

प्रारंभ

start इवेंट तब उठाया जाता है जब किसी touchstart या touchstart इवेंट को touchstart । इस घटना के बाद, $swipe सेवा ने touchmove और mousemove लिए हैंडलर स्थापित mousemove । झूठी ट्रिगरिंग को रोकने के लिए, यह ईवेंट केवल तब उठाया जाता है जब कुल दूरी तय की गई हो, एक निश्चित न्यूनतम मान से अधिक हो।
जैसे ही कुल दूरी इस न्यूनतम से अधिक हो जाती है, दो कार्यों में से एक किया जाता है:

• यदि ऊर्ध्वाधर ऑफसेट क्षैतिज से अधिक है, तो ब्राउज़र एक scroll ईवेंट को फायर करता है।
• यदि क्षैतिज ऑफसेट ऊर्ध्वाधर से अधिक है, तो कार्रवाई को एक स्पर्श इशारा माना जाता है, और move और end घटनाओं का उपयोग आगे की ओर इशारा करने के लिए किया जाता है

चाल

mousemove या touchmove बाद move इवेंट तब होता है जब केवल $swipe सेवा से यह निर्धारित होता है कि उपयोगकर्ता के कार्य एक इशारे हैं, और यह इशारा अभी तक पूरा नहीं हुआ है।

अंत

end घटना को उठाया जाता है touchend या mouseup घटना के बाद touchend , पहले उठाए गए move घटना के बाद।

रद्द करना

touchcancel घटना को touchcancel जाने के बाद cancel घटना को उठाया जाता है, या जब पृष्ठ को स्क्रॉल करना start किया जाता है, तो start घटना के बाद start ।

इसका उपयोग करते हुए, उदाहरण के लिए, आप एक निर्देश बना सकते हैं जो आपको इशारों का उपयोग करके स्लाइडर को नियंत्रित करने की अनुमति देता है, जिससे आप स्क्रीन पर प्रदर्शित स्लाइड को नियंत्रित कर सकते हैं। मोबाइल उपकरणों पर इशारों को संभालने के लिए, हम अपने स्वयं के तर्क के माध्यम से उपयोगकर्ता इंटरफ़ेस परत को प्रदर्शित करने के लिए $swipe सेवा का उपयोग करेंगे।

 angular.module('myApp') .directive('mySlideController', ['$swipe', function($swipe) { return { restrict: 'EA', link: function(scope, ele, attrs, ctrl) { var startX, pointX; $swipe.bind(ele, { 'start': function(coords) { startX = coords.x; pointX = coords.y; }, 'move': function(coords) { var delta = coords.x - pointX; // ... }, 'end': function(coords) { // ... }, 'cancel': function(coords) { // ... } }); } } }]); 

कोणीय इशारे और टच स्क्रीन इशारे

Angular-gestures एक अलग कोणीय मॉड्यूल है जो हमें हमारे एंगुलरजेएस एप्लिकेशन में स्पर्श इशारों को संभालने की क्षमता देता है। यह बहुत लोकप्रिय और सिद्ध हथौड़े पर आधारित है। पुस्तकालय।
हथौड़ा.जैब पुस्तकालय हमें कई घटनाओं के साथ प्रदान करते हैं जो सामान्य टचस्क्रीन घटनाएँ हैं:

• नल
• DoubleTap
• कड़ी चोट
• खींचना
• चुटकी
• घुमाएँ

angular-gestures लाइब्रेरी आपको एंगुलरजेएस निर्देशों के माध्यम से इन घटनाओं का उपयोग करने की अनुमति देती है। उदाहरण के लिए, ये सभी निर्देश उपयोग के लिए उपलब्ध हो जाते हैं:

• hmDoubleTap
• hmDragStart
• hmDrag
• hmDragUp
• hmDragDown
• hmDragLeft
• hmDragRight
• hmDragEnd
• hmHold
• hmPinch
• hmPinchIn
• hmPinchOut
• hmRelease
• hmRotate
• hmSwipe
• hmSwipeUp
• hmSwipeDown
• hmSwipeLeft
• hmSwipeRight
• hmTap
• hmTouch
• hmTransformStart
• hmTransform
• hmTransformEnd

कोणीय-इशारों को स्थापित करें

angular-gestures लाइब्रेरी को स्थापित करने के लिए, अपने आवेदन के मुख्य पृष्ठ पर आपको केवल जेस्चर.जेएस फ़ाइल (या जेस्चर.मिन.जेएस) शामिल करने की आवश्यकता है।
आप सीधे GitHub रिपॉजिटरी से इशारों को डाउनलोड कर सकते हैं, या इसके लिए Bower का उपयोग कर सकते हैं।
बोवर का उपयोग कर angular-gestures को स्थापित करने के लिए, निम्न कमांड का उपयोग करें:

 $ bower install --save angular-gestures 

अंत में, हमें अपने कोणीय अनुप्रयोग के लिए कोणीय angular-gestures निर्भरता निर्भरता निर्धारित करने की आवश्यकता है:

 angular.module('myApp', ['angular-gestures']); 

कोणीय-इशारों का उपयोग करना

इन सबसे ऊपर, कोणीय इशारों का उपयोग करना वास्तव में आसान है। इशारे सिर्फ कोणीय निर्देश हैं जो आप अपने आवेदन में किसी भी अन्य निर्देश की तरह उपयोग कर सकते हैं।
मान लें कि हमें उपयोगकर्ता को फोटो गैलरी में फ़ोटो को घुमाने, कम करने और विस्तार करने की अनुमति देने की आवश्यकता है। हम आवश्यक इशारों को संभालने के लिए Hammer.js लाइब्रेरी का उपयोग कर सकते हैं।
इस उदाहरण में, हम स्क्रीन को टैप करने के जवाब में एक यादृच्छिक बदलाव सेट करेंगे। इसे कार्यान्वित करने के लिए, हमने निम्नलिखित HTML कोड लिखा, इस बार hm-tap निर्देश का उपयोग किया।

 <div id="photowrapper"> <div class="cardProps" hm-tap="tapped($event)"> <div class="tradingcard"> <img src="/img/ari.jpeg" alt="" /> <span>Ari</span> </div> <div class="tradingcard"> <img src="/img/nate.jpeg" alt="" /> <span>Nate</span> </div> </div> </div> 

इस HTML में आपको अपने लिए कुछ नया नहीं मिलेगा, संभवतः इस तथ्य के अलावा कि यहाँ hm-tap निर्देश का उपयोग किया गया है। यह angular-gestures निर्देश छवि पर दस्तक देते समय काम करेगा।
Hammer.js निर्देश कोणीय भावों के साथ काम कर सकते हैं, इसलिए आप फ़ंक्शन को कॉल कर सकते हैं और उनके अंदर विभिन्न कार्य कर सकते हैं (उदाहरण के लिए, Hammer.js ng-click में समान) और इसके अलावा वे Hammer.js सेटिंग्स के साथ काम कर सकते हैं।
ऊपर के उदाहरण में, हमने एक फ़ंक्शन को बुलाया था जिसे हमारे $scope में tapped() रूप में परिभाषित किया गया था। आप नीचे इस फ़ंक्शन के लिए कोड देख सकते हैं:

 $scope.tapped = function($event) { var ele = $event.target; var x = Math.floor(Math.random() * 200) + 1, y = Math.floor(Math.random() * 100) + 1, z = Math.floor(Math.random() * 6) + 1, rot = Math.floor(Math.random()*360)+1; $(ele).css({ 'transform': "translate3d("+x+"px,"+y+"px,"+z+"px)" + "rotate("+rot+"deg)" }); } 

angular-gestures लाइब्रेरी विशेष $event तर्क के माध्यम से ईवेंट ऑब्जेक्ट तक पहुंच प्रदान करती है। हम यह निर्धारित करने के लिए कि हमारे उपयोगकर्ता ने किस तत्व पर क्लिक किया है और जब हम अपने तत्व के साथ विभिन्न चालें करके "पागल हो सकते हैं" यह निर्धारित करने के लिए हम target ईवेंट संपत्ति ( $event.target ) का उपयोग करते हैं।
आप मूल लेख के साथ साइट पर एक लाइव उदाहरण देख सकते हैं।

कॉर्डोवा के साथ मूल एप्लिकेशन

कॉर्डोव एक फ्री-टू-यूज़, ओपन-सोर्स फ्रेमवर्क है जो आपको देशी कोड के बजाय मानक वेब एपीआई का उपयोग करके मोबाइल एप्लिकेशन बनाने की अनुमति देता है। यह हमें उद्देश्य-सी या जावा (क्रमशः आईओएस या एंड्रॉइड के लिए) में लिखने के बजाय एचटीएमएल, जावास्क्रिप्ट, सीएसएस, और एंगुलरजेएस का उपयोग करके मोबाइल एप्लिकेशन लिखने की अनुमति देता है।

कॉर्डोवा जावास्क्रिप्ट एपीआई के माध्यम से देशी उपकरणों तक पहुंच प्रदान करता है, जो हमें डिवाइस से डेटा प्राप्त करने या अपने कैमरे का उपयोग करने जैसे डिवाइस-विशिष्ट संचालन करने की अनुमति देता है। इसे प्लगइन सपोर्ट के साथ बनाया गया है ताकि आप विशेषज्ञों द्वारा बनाए गए विभिन्न कॉर्डोवा प्लग इन का लाभ उठा सकें, जैसे ऑडियो डिवाइस तक पहुँचने के लिए प्लग-इन या बारकोड को स्कैन करना।
कॉर्डोवा का उपयोग करने के लाभों में से एक यह है कि हम मोबाइल पर्यावरण का समर्थन करने के लिए लिखे गए AngularJS कोड का पुन: उपयोग कर सकते हैं। बेशक, इसका उपयोग कुछ मुद्दों को उठाता है जिनका हम सामना करेंगे, जैसे कि प्रदर्शन और देशी घटकों तक सीधी पहुंच।

स्थापना

कॉर्डोवा वितरण एक npm पैकेज के रूप में वितरित किया जाता है, इसलिए आपको इसे स्थापित करने के लिए npm का उपयोग करने की आवश्यकता है।
यदि आपके पास npm स्थापित नहीं है, तो जांचें कि क्या आपने node स्थापित किया है। NodeJS स्थापित करने के बारे में जानकारी के लिए, "अगले चरण" अध्याय पढ़ें।

 $ npm install -g cordova 

कॉर्डोवा पैकेज में एप्लिकेशन बनाने के लिए एक जनरेटर शामिल है और यह कॉर्डोवा को उपलब्ध कराता है।

कॉर्डोवा के साथ शुरुआत करना

कॉर्डोवा के साथ शुरुआत करना आसान है। हम अपने कॉर्डोवा एप्लिकेशन के शुरुआती बिंदु को बनाने के लिए जनरेटर का उपयोग करेंगे। हम अपने आवेदन को GapApp कहेंगे।
जनरेटर तीन मापदंडों के साथ काम करता है:

1. प्रोजेक्ट-डायरेक्टरी (आवश्यक) - वह निर्देशिका जिसमें एप्लिकेशन बनाया जाएगा।
2. पैकेज-आईडी - प्रोजेक्ट आईडी (रिवर्स डोमेन शैली में पैकेज का नाम)
3. नाम - पैकेज का नाम (आवेदन नाम)

 $ cordova create gapapp io.fullstack.gapapp "GapApp" 

gapapp निर्देशिका इस लाइन (पहले पैरामीटर द्वारा परिभाषित) पैकेज पहचानकर्ता io.fullstack.gapapp और प्रोजेक्ट नाम GappApp साथ GappApp ।

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

 $ cd gapapp/ 

हम आईओएस के लिए अपने आवेदन का निर्माण करेंगे (हालांकि प्रक्रिया अन्य प्लेटफार्मों के लिए समान है)। IOS प्लेटफ़ॉर्म जोड़ने के लिए, आपको निम्नलिखित कॉर्डोवा कमांड का उपयोग करके प्रोजेक्ट में अपना समर्थन जोड़ना होगा:

 $ cordova platform add ios 

काम करने के लिए अगले आदेश के लिए, आपको यह सुनिश्चित करने की आवश्यकता है कि आपके पास आईओएस एसडीके और एक्सकोड स्थापित है। आप iOS SDK और Xcode को developer.apple.com से डाउनलोड कर सकते हैं।
एक बार सभी आवश्यक स्थापित हो जाने के बाद, आप एक साधारण एप्लिकेशन बना सकते हैं:

 $ cordova build ios 

अब, Apple डेवलपर के टूल में कुछ कठिनाइयाँ हैं, और हमें अपने स्थानीय iOS सिम्युलेटर पर काम करने के लिए अपने लिए एप्लिकेशन को समायोजित करने की आवश्यकता है।
आइए हमारे एप्लिकेशन की निर्देशिका पर जाएं, जहां हमें platforms निर्देशिका मिलती है। इसके अंदर हम ios डायरेक्टरी पाएंगे जो कि पहले से platform add कमांड द्वारा बनाई गई थी।

Xcode में, पहले से बनाई गई परियोजना खोलें। सुनिश्चित करें कि आपका कोड Xcode के शीर्ष पर मंच पहचानकर्ता में सूचीबद्ध है।

निष्पादित करें पर क्लिक करें।
उसके बाद, आपको अपने सिम्युलेटर में कॉर्डोवा एप्लिकेशन की शुरुआत देखनी चाहिए।

कॉर्डोवा के साथ विकास प्रक्रिया

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

मंच

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

• आईओएस
• एंड्रॉयड
• ब्लैकबेरी 10
• फ़ायरफ़ॉक्स ओएस

विंडोज पर, हम निम्नलिखित प्लेटफार्मों के लिए विकसित कर सकते हैं:

• एंड्रॉयड
• विंडोज फोन 7
• विंडोज फोन 8
• Windows8
• ब्लैकबेरी 10
• फ़ायरफ़ॉक्स ओएस

यदि आप जानना चाहते हैं कि कौन से प्लेटफ़ॉर्म उपलब्ध हैं और स्थापित हैं, तो आपको जाँचने के लिए platforms कमांड चलाने की आवश्यकता है:

 $ cordova platforms ls 

प्लेटफ़ॉर्म जोड़ने के लिए, आप platform add कमांड (जैसा हमने ऊपर किया था) का उपयोग कर सकते हैं।

 $ cordova platform add android 

प्लेटफार्मों में से एक को हटाने के लिए, आप rm उपयोग कर सकते हैं या कमांड remove सकते हैं।

 $ cordova platform rm blackberry10 

प्लग-इन

कॉर्डोवा को मॉड्यूल के आधार पर बनाया गया है, जो प्लग-इन सिस्टम का उपयोग करके किसी भी अतिरिक्त कार्यक्षमता को जोड़ना संभव बनाता है। किसी प्रोजेक्ट में plugin add लिए, हम plugin add कमांड का उपयोग करेंगे:

 $ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git 

हम प्लग plugins ls का उपयोग करके इंस्टॉल किए गए प्लगइन्स की सूची देख सकते हैं:

 $ cordova plugins ls [ 'org.apache.cordova.geolocation' ] 

अंत में, आप plugin rm कमांड का उपयोग करके किसी भी प्लगइन को हटा सकते हैं:

 $ cordova plugins rm org.apache.cordova.geolocation 

प्रोजेक्ट बिल्डिंग

डिफ़ॉल्ट रूप से, कॉर्डोवा www वेब फाइल फ़ोल्डर में एक प्रोजेक्ट वायरफ्रेम बनाता है, जो प्रोजेक्ट के होम डायरेक्टरी में स्थित है। जब कॉर्डोवा एक परियोजना का निर्माण करता है, तो वह इन फ़ाइलों को प्लेटफ़ॉर्म-विशिष्ट निर्देशिकाओं में कॉपी करता है।
एप्लिकेशन का निर्माण करने के लिए, आपको एक और कॉर्डोवा कमांड चलाने की जरूरत है, build :

 $ cordova build 

प्लेटफ़ॉर्म को बनाने के लिए निर्दिष्ट किए बिना, यह टीम हमारी परियोजना में उपलब्ध सभी प्लेटफार्मों के लिए एप्लिकेशन का निर्माण करेगी। आप परियोजना के निर्माण के लिए इसके दायरे को सीमित कर सकते हैं, केवल निर्दिष्ट प्लेटफार्मों के लिए।

 $ cordova build ios $ cordova build android 

build कमांड को निष्पादित करने के लिए एक विशेष प्लेटफ़ॉर्म के लिए आवश्यक कोड को स्थापित करने की गारंटी दी जाती है, ताकि इसके बाद हमारे आवेदन को संकलित किया जा सके। अनिवार्य रूप से, इस पद्धति के साथ हम वैसा ही करते हैं जैसा कि तैयारी के तरीके cordova prepare && cordova compile ।

अनुकरण और निष्पादन

कॉर्डोवा एक डिवाइस पर किसी एप्लिकेशन के लॉन्च को अनुकरण करने के लिए एक एमुलेटर चलाने की क्षमता भी रखता है। बेशक, यह केवल तभी किया जा सकता है जब आवश्यक एमुलेटर स्थापित किया गया हो और विकास के वातावरण में कॉन्फ़िगर किया गया हो।
मान लीजिए कि आवश्यक एमुलेटर विकास के वातावरण में कॉन्फ़िगर किया गया है, तो हम इसे कॉर्डोवा के माध्यम से चला सकते हैं और इसमें अपना एप्लिकेशन इंस्टॉल कर सकते हैं।

 $ cordova emulate ios 

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

 $ cordova run ios 

विकास में

एप्लिकेशन में परिवर्तन करना काफी बोझिल प्रक्रिया हो सकती है, जबकि एप्लिकेशन के किसी भी हिस्से में बदलाव करते हुए कार्रवाई में इन परिवर्तनों को देखने के लिए इसे फिर से शुरू करने की आवश्यकता होती है। वेब एप्लिकेशन को विकसित करने की प्रक्रिया को तेज करने के लिए, हम अपने एप्लिकेशन के स्थानीय संस्करण को www फ़ोल्डर से ब्राउज़र में वापस करने के लिए स्थानीय सर्वर को कॉन्फ़िगर करने के लिए serve कमांड का उपयोग कर सकते हैं।

 $ cordova serve ios Static file server running at => http://0.0.0.0:8000/ CTRL + C to shutdown 

अब, वेब ब्राउज़र का उपयोग करते हुए, निम्न URL पर जाएं: localhost:8000/ios/www/index.html localhost:8000/ios/www/index.html । आपके www फ़ोल्डर की सामग्री सर्वर द्वारा HTTP के माध्यम से दी जाएगी, इसलिए अब आप एप्लिकेशन का निर्माण कर सकते हैं और उसमें किए गए सभी परिवर्तनों को ट्रैक कर सकते हैं।
आपके द्वारा एप्लिकेशन में परिवर्तन करने के बाद, आपको बस इसे पुनर्निर्माण करने की आवश्यकता है:

 $ cordova build ios 

कोर्डोवा के लिए कोणीय सेवा

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

 ngular.module('myApp', []); var onDeviceReady = function() { angular.bootstrap( document, ['myApp']); } document.addEventListener('deviceready', onDeviceReady); 

हम deviceready घटना के लिए सुनने के वैकल्पिक तरीके का उपयोग करना पसंद करते हैं, वादों का उपयोग करते हुए, आवेदन शुरू करने के बाद deviceready घटना deviceready ।
हमने एक कोणीय मॉड्यूल बनाया, जो कि deviceready ईवेंट को सुनने के लिए जिम्मेदार है। हम एक ऐसी सेवा का उपयोग करेंगे जो इस घटना के उठने के बाद deviceready घटना को deviceready और हमारे वादों को हल deviceready ।

 angular.module('fsCordova', []) .service('CordovaService', ['$document', '$q', function($document, $q) { var d = $q.defer(), resolved = false; var self = this; this.ready = d.promise; document.addEventListener('deviceready', function() { resolved = true; d.resolve(window.cordova); }); // ,     //  (  ) setTimeout(function() { if (!resolved) { if (window.cordova) d.resolve(window.cordova); } }, 3000); }]); 

अब आपको अपने मॉड्यूल के लिए निर्भरता के रूप में fsCordova स्थापित करने की आवश्यकता है।

 angular.module('myApp', ['fsCordova']) // ... 

कॉर्डोवा काम के लिए तैयार है या नहीं, यह तय करने के लिए हम कॉर्डोबा सेवा का उपयोग कर सकते हैं, जो इस पर निर्भर करता है:

 angular.module('myApp', ['fsCordova']) .controller('MyController', function($scope, CordovaService) { CordovaService.ready.then(function() { // Cordova is ready }); }); 

कोणीय सक्षम करना

नंगे कॉर्डोवा आवेदन में, केवल शुद्ध javascript लिए समर्थन है, जो js/index.js में स्थित javascript दृश्य को छुपाता है और प्रदर्शित करता है।
इस प्रक्रिया में कोणीय शामिल करना बहुत सरल है। जब तक हम आवेदन समाप्त नहीं करते, हम सीडीएन का उपयोग करने के बजाय, इसमें आवश्यक घटकों को सीधे शामिल करेंगे, जो कि डिजाइन प्रक्रिया के दौरान अनावश्यक समस्याओं का कारण बन सकता है।
हम अधिक जटिल इंस्टॉलेशन प्रक्रिया के लिए Bower का उपयोग कर सकते हैं, लेकिन अभी के लिए, हम प्रोजेक्ट में angular.js . angular.js फ़ाइल जोड़ते हैं।
हमारे कोणीय अनुप्रयोग का निर्माण करने के लिए, हमें angularjs.org से इसके घटकों को डाउनलोड करना होगा , और उन्हें हमारे अनुप्रयोग के लिए सुलभ फ़ोल्डर में सहेजना होगा। हम सलाह देते हैं www/js/vendor/angular.js।
एक बार जब हमने ऐसा कर लिया है, तो हम अपने कोणीय अनुप्रयोग को विकसित करना शुरू कर सकते हैं। हमें अपने में जावास्क्रिप्ट फ़ाइल शामिल करने की आवश्यकता है www/index.html।

 <script type="text/javascript" src="js/vendor/angular.js"></script> 

अब आप सभी सामग्री js/index.jsको हमारे कोणीय अनुप्रयोग से बदल सकते हैं और सामान्य तरीके से काम कर सकते हैं।

विकास की प्रक्रिया

अपना एप्लिकेशन बनाने के बाद, आप निम्न प्रक्रिया का उपयोग कर सकते हैं:

• अपना स्थानीय सर्वर चलाएं ( cordova serve [platform])
• अपना आवेदन संपादित करें
• अपने आवेदन का पुनर्निर्माण ( cordova build [platform])

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