आयनिक के साथ आपकी वेबसाइट आरएसएस सामग्री प्रदर्शित करने के लिए एक मोबाइल एप्लिकेशन बनाएं

Hindi (हिंदी) translation by Shubham Sharma (you can also view the original English article)

Final product image — What You'll Be Creating

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

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

यदि आपने कभी आयनिक फ्रेमवर्क से पहले कभी काम नहीं किया है, तो मैं कम से कम आरंभिक मार्गदर्शिका पर एक नज़र लेने की सलाह देता हूं क्योंकि इससे आपको एक त्वरित जानकारी मिलती है कि चीजें कैसे काम करती हैं।

चलो शुरू करें!

आयनिक परियोजना की स्थापना

मुझे लगता है कि आपने अपने सिस्टम पर नोड स्थापित किया है और आपके पास एनएमएम (नोड पैकेज प्रबंधक) भी है। आयनिक ढांचे को स्थापित करना निम्न कार्य करता है:

npm install -g cordova ionic

यह आपके कंप्यूटर पर कॉर्डोबा और आयनिक दोनों स्थापित करेगा।

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

कॉर्डोवा के बगल में, आयनिक हमारे कोड को लिखने के लिए ऐंगग्यलर जेएस का उपयोग करने की संभावना को जोड़ता है, और यह एक बहुत साफ यूआई ढांचा भी जोड़ता है।

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

रिक्त: जैसा कि नाम बताता है, यह जगह में केवल न्यूनतम आवश्यक घटकों के साथ एक खाली परियोजना है।
टैब्स: अपने स्क्रीन के माध्यम से नेविगेट करने के लिए टैब का उपयोग कर एक एप्लिकेशन।
साइडमेनू: नेविगेशन के लिए एक मानक मोबाइल साइड मेनू का उपयोग कर एक एप्लिकेशन।

इस ट्यूटोरियल के लिए, हम टैब एप्लिकेशन टेम्प्लेट का उपयोग करेंगे। हमारी परियोजना शुरू करने के लिए, चलें:

ionic start myWebsiteOnMobile tabs

आयनिक सभी घटकों को डाउनलोड और स्थापित करेगा, और यह मेरे फ़ोसाइट नाम पर प्रोजेक्ट फ़ोल्डर को बनाएगा myWebsiteOnMobile।चलकर प्रोजेक्ट डायरेक्टरी में जाएं:

cd myWebsiteOnMobile

चूंकि हमारा एप्लीकेशन हाइब्रिड मोबाइल एप्लिकेशन है, इसलिए हम ब्राउज़र के अंदर एप्लिकेशन को चलाने में सक्षम होने का फायदा उठाते हैं।ऐसा करने के लिए, आयनिक एक स्वच्छ निर्मित वेब सर्वर प्रदान करता है जो हमारी इस तरह से चलाता है:

ionic serve

यह हमारे एप्लिकेशन के साथ एक ब्राउज़र खुल जाएगा, और यह इस तरह दिखाई देगा:

सर्वर को रोकने के लिए, अपनी कमांड लाइन स्क्रीन पर कन्ट्रोल-सी का उपयोग करें। एप्लिकेशन मोबाइल पर कैसे दिखता है इसका बेहतर विचार प्राप्त करने के लिए, आप इसका उपयोग कर सकते हैं:

ionic serve --lab

यह ब्राउज़र में एप्लिकेशन को खोल देगा, आईओएस दिखा रहा है और ऐप की तरफ एक एंड्रॉइड पूर्वावलोकन भी दिखाएगा।

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

डिफ़ॉल्ट आयनिक टैब्स खाका एप्लिकेशन को कैसे समायोजित करें।

हमारे आवेदन के लिए हमारे पास दो टैब होंगे:

नवीनतम पोस्ट: आरएसएस फ़ीड से प्राप्त नवीनतम पदों की सूची दिखा रहा है।
सेटिंग्स: जहां उपयोगकर्ता अनुप्रयोग के कई पहलुओं को कॉन्फ़िगर करने में सक्षम होगा।

नवीनतम पोस्ट टैब से, उपयोगकर्ता किसी भी नवीनतम पोस्ट पर क्लिक करने और पोस्ट के बारे में और अधिक जानकारी देखने के लिए, एक बाहरी ब्राउज़र में पोस्ट को खोलने की संभावना के साथ सक्षम होगा।

चूंकि हमारी नवीनतम पोस्ट टैब टेम्पलेट द्वारा प्रदान किए गए चैट टैब के समान है, इसलिए हम उस खाते टैब के साथ पुनः उपयोग करेंगे, जो कि हमारे सेटिंग टैब बन जाएगा। हम आयनिक वेबसर्वर के साथ सभी बदलाव कर सकते हैं, और आयनिक हमारे लिए ऐप को फिर से लोड कर देगा। यह एक बहुत सुथरा विशेषता है जो विकास को गति देगा।

जैसा कि पहले उल्लेख किया गया है, आयनिक AngularJS का उपयोग करता है, और यह संपूर्ण अनुप्रयोग वास्तव में एक AngularJS मॉड्यूल है। मॉड्यूल को www/js /app.js में परिभाषित किया गया है, और यहां यह भी है कि जहां आवेदन के पथ या रूट परिभाषित किए गए हैं। एप्लिकेशन के प्रत्येक स्क्रीन पर एक संबंधित मार्ग है।

चलिए स्टेटस टैब को हटा दें क्योंकि हमें इसकी आवश्यकता नहीं होगी। ऐसा करने के लिए, हमें पहली बार चैट स्क्रीन पर ध्यान देने के लिए हमारे एप्लिकेशन की डिफ़ॉल्ट स्क्रीन (या मार्ग) को बदलना होगा, जो हमारी मुख्य स्क्रीन बन जाएगी। डिफ़ॉल्ट स्क्रीन $urlRouterProvider.otherwise() के माध्यम से कॉन्फ़िगर ह, तो चलिए इसे उस पर परिवर्तित करें:

$urlRouterProvider.otherwise('/tab/chats');

अगर हम अब अपने ब्राउज़र में http://localhost:8100 को पुनः लोड करते हैं, तो हम देखेंगे कि चैट टैब डिफ़ॉल्ट रूप से लोड होगा।

स्थिति टैब को निकालने के लिए, हमें www/templates/tabs.html फ़ाइल को संपादित करना होगा जो टैब घटक के लिए टेम्पलेट को धारण करता है। हम तत्व को निकाल देंगे:

  <!-- Dashboard Tab -->
  <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

बचत करते समय, हम देखेंगे कि आवेदन में अब केवल दो टैब हैं: चैट्स और अकाउंट।

जबकि www/templates/tabs.html फ़ाइल में हम देखते हैं कि कुछ एचटीएमएल टैग हैं जो मानक एचटीएमएल नहीं हैं, जैसे ion-tabs, ion-tab, और ion-nav-view। ये वास्तव में आयनिक फ्रेमवर्क द्वारा परिभाषित AngularJS निर्देश हैं निर्देश टैग हैं जो उनके पीछे कार्यक्षमता पैक करते हैं, और वे अधिक संरचित और अधिक संक्षिप्त कोड लिखने के लिए बहुत सुविधाजनक तरीके हैं।

हमारे मामले में, ion-tabs निर्देश टैब घटक है, जो प्रत्येक टैब के लिए ion-tab निर्देश की आवश्यकता होती है।

चलिए हमारे टैब चैट और अकाउंट से हमारे आवश्यक नामों पर नवीनतम पोस्ट और सेटिंग्स बदलते हैं। ऐसा करने के लिए, हम www/templates/tabs.html फ़ाइल में कई चीजों को संशोधित करेंगे:

टैब बटन पर पाठ निर्धारित करने वाले ion-tab तत्वों का title विशेषता। हम इसे क्रमशः नवीनतम पोस्ट और सेटिंग में बदल देंगे।
ion-tab तत्वों का href विशेषता जो मार्ग या स्क्रीन यूआरएल को इंगित करता है। हम उन्हें #/tab/latest-posts और #/tab/settings में बदल देंगे।
tab-latest-posts और tab-settings में ion-nav-view तत्वों का name विशेषता। ये नवीनतम पोस्ट और सेटिंग स्क्रीन के लिए उपयोग किए जाने वाले टेम्प्लेट के लिए पहचानकर्ता हैं।

नतीजतन, www/templates/tabs.html इस तरह दिखना चाहिए:

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Latest posts Tab -->
  <ion-tab title="Latest posts" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/latest-posts">
    <ion-nav-view name="tab-latest-posts"></ion-nav-view>
  </ion-tab>

  <!-- Settings Tab -->
  <ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/settings">
    <ion-nav-view name="tab-settings"></ion-nav-view>
  </ion-tab>


</ion-tabs>

इन परिवर्तनों के बाद, हमें कुछ त्रुटियां मिलेंगी। इसका कारण यह है कि हमें हमारे द्वारा प्रयोग किए गए नए पहचानकर्ताओं का उपयोग करने के लिए हमारे मार्गों को भी समायोजित करना होगा। www/js/app.js में, हमें राज्य पहचानकर्ता, दृश्य आइडेंटिफ़ायर और प्रत्येक मार्ग के लिए url को बदलने की जरूरत है जो हमने ऊपर सेट की है।

प्रत्येक मार्ग (या स्क्रीन) के लिए, एक नियंत्रक परिभाषित किया गया है यह एक बुनियादी एमवीसी (मॉडल-व्यू-नियंत्रक) डिजाइन पैटर्न है। नियंत्रक फ़ाइल www/js/controllers.js में परिभाषित किए गए हैं स्थिरता के प्रयोजनों के लिए, हम www/js/app.js और www/js/controller.js दोनों में नियंत्रकों के नामों को बदल देंगे:

ChatsCtrl बन जाती है LatestPostsCtrl ।
ChatDetailCtrl बन जाती है PostDetailCtrl।
AccountCtrl बन जाती है SettingsCtrl ।

साथ ही, प्रत्येक मार्ग के लिए हमारे पास एक टेम्प्लेट परिभाषित है, तो चलिए उन्हें बदल भी दें। www/js/app.js संपादित करें और इस तरह templateUrl को संशोधित करें:

Tab-chats.html को tab-latest-posts.html में बदलें। www/templates/tab-chats.html को www/templates/tab-latest-posts.html के नाम से भी फ़ाइल का नाम बदलें।
chat-detail.html को post-detail.html में बदलें। www/templates/chat-detail.html से www/templates/post-detail.html पर फ़ाइल का नाम भी बदलें।
tab-account.html को tab-settings.html में बदलें। www/templates/tab-account.html से www/templates/tab-settings.html फ़ाइल का नाम भी बदलें।
अंत में, दृश्य का उपयोग करके latest-posts में डिफ़ॉल्ट रूप से लोड हो जाता है $urlRouterProvider.otherwise('/tab/latest-posts')।

अगर सब कुछ अच्छी तरह से चला गया तो आपको www/js/app.js फ़ाइल से इस तरह दिखना चाहिए:

...
// Each tab has its own nav history stack:

  .state('tab.latest-posts', {
      url: '/latest-posts',
      views: {
        'tab-latest-posts': {
          templateUrl: 'templates/tab-latest-posts.html',
          controller: 'LatestPostsCtrl'
        }
      }
    })
    .state('tab.post-detail', {
      url: '/latest-posts/:postId',
      views: {
        'tab-latest-posts': {
          templateUrl: 'templates/post-detail.html',
          controller: 'PostDetailCtrl'
        }
      }
    })

  .state('tab.settings', {
    url: '/settings',
    views: {
      'tab-settings': {
        templateUrl: 'templates/tab-settings.html',
        controller: 'SettingsCtrl'
      }
    }
  });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/latest-posts');
  ...

और हमारे www/js/controllers.js फ़ाइल को साफ किया गया है:

angular.module('starter.controllers', [])
.controller('LatestPostsCtrl', function($scope) {})
.controller('PostDetailCtrl', function($scope, $stateParams) {})
.controller('SettingsCtrl', function($scope) {});

अब जब हमने हमारी ज़रूरतों को पूरा करने के लिए ऐप को पुनर्गठित किया है, तो हम अगले भाग पर आगे बढ़ें और कुछ कार्यक्षमता जोड़ें।

आयनिक के साथ एक आरएसएस फ़ीड कैसे प्राप्त करें

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

हमारी वेबसाइट के आरएसएस को पुनः प्राप्त करने के लिए Yahoo's YQL REST API का इस्तेमाल करेगी। REST API पर कॉल करने के लिए, हम AngularJS द्वारा प्रस्तावित $http प्रदाता का उपयोग करेंगे।

आइओनिक सेवाओं को आमतौर पर www/js/services.js फ़ाइल में परिभाषित किया जाता है, इसलिए हम जहां भी अपनाएंगे I कोड ऐसा दिखेगा:

angular.module('starter.services', [])
.service('RSS',function($http){
  var self = this;
  this.download = function(next){
    var feedUrl = "https://tutorials.tutsplus.com/posts.atom";
    var yql_query = "select * from xml where url = '"+feedUrl+"'";
    var url = 'https://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(yql_query)+'&format=json&callback=JSON_CALLBACK';
    $http
      .jsonp(url)
      .success(function(response){
        if (response.query.results["feed"]){
          next(self.parseAtom(response.query.results));
        } else if (response.query.results["rss"]){
          next(self.parseRSS(response.query.results));
        } else {
          throw "Unknown RSS format";
        }
      })
      .error(function(data, status){

      });
  }

  this.parseAtom = function(atomFeed){
    var posts = [];
    angular.forEach(atomFeed.feed.entry,function(item,idx){
      var post = {
        id:idx,
        title:item.title,
        description:item.content.content,
        link:item.link.href
      }
      posts.push(post);
    })
    return posts;
  }

  this.parseRSS = function(rssFeed){
    var posts = [];
    angular.forEach(rssFeed.rss.channel.item,function(item,idx){
      var post = {
        id:idx,
        title:item.title,
        description:item.description,
        link:item.link
      }
      posts.push(post);
    })
    return posts;
  }
})

हम सेवा का उपयोग कर सेवा की service() AngularJS द्वारा प्रदान की गई विधि। हम फिर Angular's $http मॉड्यूल को इंजेक्ट करते हैं ताकि हम इसे हमारी सेवा में कॉल कर सकें।

self वेरीअबल आरएसएस सेवा का एक संदर्भ है ताकि हम इसे सेवा के तरीकों के भीतर से कॉल कर सकें। सेवा का मुख्य तरीका download() विधि है, जो फ़ीड जानकारी को डाउनलोड करता है और इसे प्रोसेस करता है। वेबसाइट फीड्स के लिए इस्तेमाल दो मुख्य स्वरूप हैं: आरएसएस(RSS) और एटीएम(ATOM) हमारे आवेदन के लिए, हमने टूट+ से ट्यूटोरियल के फ़ीड https://tutorials.tutsplus.com/posts.atom का उपयोग किया है जो ATOM प्रारूप में है, लेकिन पूर्णता के लिए हमने आरएसएस प्रारूप को भी ध्यान में रखा है।

download() पद्धति YQL API पर कॉल करती है और फ़ीड के प्रकार के आधार पर parseAtom () या parseRSS () विधियों का उपयोग करके परिणामों को पार्स करती है। विचार यहां एक ही आउटपुट स्वरूप है जिसे आगे कॉलबैक के माध्यम से next() किया जाएगा। जगह में आरएसएस सेवा के साथ, हम नियंत्रक को आगे बढ़ सकते हैं।

नवीनतम पोस्ट कंट्रोलर के लिए आरएसएस(RSS) सेवा का झोंका

हमारे www/js/controllers.js फ़ाइल में, हमें आरएसएस डेटा लोड करना होगा और इसे हमारे दृश्य में पास करना होगा। ऐसा करने के लिए, हमें इस तरह हमारे LatestPostsCtrl को संशोधित करने की आवश्यकता है:

.controller('LatestPostsCtrl', function($scope, RSS) {
  RSS.download(function(posts){
    $scope.posts = posts;
  });
})

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

जब नवीनतम पोस्ट के लिए दृश्य लोड किया जाता है, तो वह LatestPostsCtrl नियंत्रक से फोन करेगा, और बदले में फीड जानकारी डाउनलोड करने के लिए आरएसएस सेवा का उपयोग करेगा।परिणाम पार्स किए जाते हैं और posts वेरीअबल का उपयोग करते हुए एक सरणी के रूप में वापस हो जाते हैं, जो कि हम वर्तमान गुंजाइश में जमा करते हैं।

रास्ते में से सभी के साथ, हम अब दृश्य भाग में आगे बढ़ सकते हैं, फ़ीड से प्राप्त पदों की सूची प्रदर्शित कर सकते हैं।

नवीनतम डेटा देखें फ़ीड डेटा को देखें।

अब हमें नवीनतम पोस्ट के लिए हमारे दृश्य को संशोधित करने की आवश्यकता है। यदि आपको याद है, यह templateUrl विशेषता के माध्यम से www/js/app.js फ़ाइल में कॉन्फ़िगर किया गया है, और यह www/templates/tab-latest-posts.html फ़ाइल को इंगित करता है।

हम क्या करना चाहेंगे, फ़ीड की सूची प्रदर्शित करते हैं I चूंकि फ़ीड की जानकारी में एचटीएमएल(HTML) हो सकती है, और यह केवल नवीनतम पोस्टों की सूची को अव्यवस्थित करेगा, हमें पोस्ट की सामग्री से एचटीएमएल(HTML) टैग के बिना पाठ निकालने के लिए कुछ चाहिए। ऐसा करने का सबसे आसान तरीका एक एन्जेलरजेएस फ़िल्टर परिभाषित करके होता है जो पाठ से एचटीएमएल टैग्स को स्ट्रिप्स करता है। हम इसे www/js/services.js में जोड़कर करते हैं:

.filter('htmlToPlaintext', function() {
    return function(text) {
      return  text ? String(text).replace(/<[^>]+>/gm, '') : '';
    };
  }
)

www/templates/tab-latest-posts.html फ़ाइल के अंदर वापस हमारे दृश्य में नहीं, चलो इसे इस तरह देखने के लिए संशोधित करें:

<ion-view view-title="Latest posts">
  <ion-content>
    <ion-list>
      <ion-item class="item-icon-left item-icon-right" ng-repeat="post in posts" type="item-text-wrap" href="#/tab/latest-posts/{{post.id}}">
        <span class="icon ion-social-rss-outline"></span>
        <h2>{{post.title}}</h2>
        <p>{{post.description | htmlToPlaintext}}</p>
        <i class="icon ion-chevron-right icon-accessory"></i>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

हम इओनिक सूची यूआई घटक का उपयोग कर रहे हैं, Angular's ng-repeat के निर्देश के साथ, जो हमारे नियंत्रक के दायरे पर सेट किए गए posts के माध्यम से पुनरावृत्त होगा। प्रत्येक पोस्ट प्रविष्टि के लिए, हमारे पास इसके शीर्षक के साथ एक सूची आइटम होगा और htmlToPlaintext फ़िल्टर के उपयोग से एचटीएमएल(HTML) टैग छीन लिया जाएगा। यह भी ध्यान रखें कि किसी पोस्ट पर क्लिक करने से हमें पोस्ट के विस्तार के बारे में अवश्य लेना चाहिए क्योंकि href विशेषता #/tab/latest-posts/{{post.id}} पर सेट है। यह अभी तक काम नहीं करता है, लेकिन हम अगले भाग में इसके बारे में ध्यान रखेंगे।

अगर हम अब ionic serve --lab का प्रयोग करते हुए आवेदन चलाते हैं, तो हमें कुछ ऐसा होना चाहिए:

एक पोस्ट का विवरण दिखा रहा है

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

इस समस्या को हल करने के लिए, हम Angular द्वारा प्रस्तावित $rootScope निर्देश का उपयोग कर सकते हैं।यह एक ऐसे क्षेत्र का संदर्भ देता है जो आवेदन में सभी नियंत्रकों को त्याग देता है। $rootscope में पदों को सेट करने के लिए और फिर उपयोगकर्ता को PostDetailCtrl में क्लिक किए जाने वाले विशिष्ट पद की खोज करने के लिए चलो हमारे LatestPostCtrl को संशोधित करें। www/js/controllers.js में परिणामी कोड इस तरह दिखेगा:

.controller('LatestPostsCtrl', function($scope, $rootScope, RSS) {
  RSS.download(function(posts){
    $rootScope.posts = posts;
  });
})

.controller('PostDetailCtrl', function($scope,$rootScope, $stateParams) {
  angular.forEach($rootScope.posts,function(post){
    if (post.id == $stateParams.postId){
      $scope.post = post;
    }
  })
})

हमने बस $rootscope नियंत्रक को दोनों नियंत्रकों में इंजेक्ट किया और दो नियंत्रकों के बीच posts पास करने के लिए इसका इस्तेमाल किया।कृपया ध्यान दें कि हमारे नवीनतम पोस्ट दृश्य में $rootScope के रूप में कोई भी बदलाव करने की आवश्यकता नहीं और $scope दृश्य से दोनों तरह से पहुंच योग्य हैं।

PostDetailCtrl नियंत्रक के अंदर, हम केवल उपयोगकर्ता द्वारा क्लिक किए गए लिंक में दिए गए आईडी के साथ पोस्ट की खोज करते हैं। हम प्रत्येक पोस्ट आईडी को $stateParams.postId वेरीअबल के माध्यम से पारित यूआरएल के मूल्य के साथ तुलना करके करते हैं। अगर हम एक मैच पाते हैं तो हम दायरे पर पोस्ट सेट करते हैं ताकि हम इसे हमारे दृष्टिकोण में इस्तेमाल कर सकें।

आइए अब हमारे पोस्ट विवरण दृश्य को समायोजित करें www/templates/ post-detail.html इस तरह से:

<ion-view view-title="{{post.title}}">
  <ion-nav-buttons side="right">
    <a ng-href="{{post.link}}" class="button" target="_system">
      Open
    </a>
  </ion-nav-buttons>
  <ion-content class="padding">
    <h1>{{post.title}}</h1>
    <span ng-bind-html="post.description"></span>
  </ion-content>
</ion-view>

यह हमने इस दृश्य में किया है:

हमने स्क्रीन के शीर्ष लेख में पोस्ट का शीर्षक रखा है।
हमने सही पर हैडर में एक "ओपन" बटन रखा है।यह बटन एक बाहरी ब्राउज़र में पोस्ट लिंक को खोल देगा क्योंकि विशेषता target="_system"। हमें ऐसा करना होगा क्योंकि कॉर्डोवा के कारण ब्राउज़र में एप्लिकेशन पहले से ही चल रहा है। अगर हम उस विशेषता को निर्धारित नहीं किया है, तो पोस्ट उसी ब्राउज़र में आवेदन के रूप में खोलेगा, और फिर हमारे पास आवेदन पर वापस जाने का कोई तरीका नहीं होगा।
हम एंजेलर ng-bind-html निर्देश का उपयोग करके पोस्ट के विवरण को एचटीएमएल(HTML) के रूप में प्रदर्शित करते हैं।

आवेदन को चलाने के दौरान, मुझे पता चला कि यदि पोस्ट विवरण में छवियाँ हैं, तो उनमें से कुछ स्क्रीन बंद हो जाते हैं। यह वीडियो जैसे अन्य HTML तत्वों के साथ मामला हो सकता है हम निम्न सीएसएस नियम को www/css/style.css में जोड़कर आसानी से इसे ठीक कर सकते हैं।

ion-content *{
    max-width: 100%;
}

अगर हम अब आवेदन पर एक नज़र डालें और किसी पोस्ट पर क्लिक करें, तो हमें कुछ ऐसा देखना चाहिए:

और हमारे आवेदन लगभग पूर्ण है। अगले खंड में, हम सेटिंग्स स्क्रीन को लागू करने पर एक नज़र डालेंगे।

आपके आयनिक अनुप्रयोग के लिए सेटिंग जोड़ना

हमारी सेटिंग्स स्क्रीन के लिए, हम यह दर्शाने के लिए एक तरीका लागू करेंगे कि आवेदन की मुख्य स्क्रीन पर कितनी पोस्ट प्रदर्शित हों। हम इस सेटिंग को localStorage मेमोरी में संग्रहीत करेंगे, जो कि एप्लिकेशन बंद होने पर मिटा नहीं है।नियंत्रक फ़ाइल www/js/controllers.js को संपादित करें और इस तरह से SettingsCtrl नियंत्रक बदलें:

.controller('SettingsCtrl', function($scope,$rootScope) {
  $scope.settings = {
    maxPosts:  window.localStorage.getItem("myWebsiteOnMobile.maxPosts")
  };

  $scope.$watch('settings.maxPosts',function(){
    window.localStorage.setItem("myWebsiteOnMobile.maxPosts",$scope.settings.maxPosts);
    $rootScope.maxPosts = window.localStorage.getItem("myWebsiteOnMobile.maxPosts");
  });
});

इसके अलावा, हमें www/templates/tab-settings.html जैसी सेटिंग्स स्क्रीन को संशोधित करने की आवश्यकता है:

<ion-view view-title="Settings">
  <ion-content>
      <div class="item item-divider item-balanced">Maximum posts</div>
  <ion-radio ng-model="settings.maxPosts" ng-value="null">Unlimited</ion-radio>
	<ion-radio ng-model="settings.maxPosts" ng-value="5">5</ion-radio>
	<ion-radio ng-model="settings.maxPosts" ng-value="10">10</ion-radio>
  </ion-content>
</ion-view>

नियंत्रक localStorage से सेटिंग myWebsiteOnMobile.maxPosts को पुनर्प्राप्त करता है Iयदि यह null में नहीं है, तो यह शून्य हो जाएगा, और हम विचार करेंगे कि पदों की अधिकतम संख्या के लिए कोई सीमा नहीं है।

हम $scope.$ Watch() सेटिंग्स के परिवर्तन की निगरानी के लिए कहते हैं, settings.maxPosts वेरिएबल, जो सेटिंग्स स्क्रीन में रेडियो नियंत्रण से जुड़ी है।

इस सब जगह के साथ, हर बार जब हम सेटिंग स्क्रीन पर पोस्ट की अधिकतम संख्या बदलते हैं, तो सेटिंग को localStroage में संग्रहीत किया जाएगा, और जब एप्लिकेशन पुनरारंभ होता है तब से इसे वापस लिया जाएगा।

अब इस सेटिंग का उपयोग करते हैं। यह www/js/controllers.js से LatestPostsCtrl में इसे जोड़ने के रूप में सरल है:

$rootScope.maxPosts = window.localStorage.getItem("myWebsiteOnMobile.maxPosts");

और नवीनतम पोस्ट स्क्रीन www/templates/tab-latest-posts.html में एक निर्देश जोड़ना:

<ion-item class="item-icon-left item-icon-right" ng-repeat="post in posts|limitTo:maxPosts" type="item-text-wrap" href="#/tab/latest-posts/{{post.id}}">

नोटिस करे limitTo:maxPosts का कोणीय फिल्टर इससे localStorage से ली गई संख्या में प्रदर्शित होने वाले पदों की संख्या को सीमित किया जाएगा। डिफ़ॉल्ट रूप से, यह null होगा, जो आरएसएस सेवा द्वारा प्राप्त सभी फीड्स को प्रदर्शित करेगा।

बधाई! अब हमारे पास एक आरएसएस फ़ीड प्रदर्शित करने के लिए एक पूरी तरह से काम करने वाला आवेदन है।

निष्कर्ष

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

ionic platform add android
ionic run

यदि आप किसी भी वेबसाइट को किसी मोबाइल एप्लिकेशन में बदलने के लिए एक पूर्व बनाया गया आयनिक आवेदन टेम्पलेट डाउनलोड करना चाहते हैं, तो वेबसाइट को मोबाइल कोड के लिए क्लिक करें।