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



इस ट्यूटोरियल में हम एक मोबाइल एप्लिकेशन बनाने पर एक नज़र डालेंगे जो वेबसाइट की आरएसएस सामग्री प्रदर्शित करता है। हम आरएसएस यूआरएल को कॉन्फ़िगर करेंगे और एप्लिकेशन इसे डाउनलोड करेगा, इसे पार्स करें और आरएसएस से पदों को प्रदर्शित करें।
मोबाइल एप्लिकेशन को बनाने के लिए, हम एंगुलर जेएस के साथ आयनिक फ्रेमवर्क v1 का उपयोग करेंगे।इस ट्यूटोरियल को पूरा करने के लिए, आपको जावास्क्रिप्ट और एचटीएमएल के साथ कुछ अनुभव होना चाहिए। इसके अलावा, इससे पहले कि आप ऐंगग्यलर जेएस के साथ काम कर चुके हैं, यह मदद करता है।
यदि आपने कभी आयनिक फ्रेमवर्क से पहले कभी काम नहीं किया है, तो मैं कम से कम आरंभिक मार्गदर्शिका पर एक नज़र लेने की सलाह देता हूं क्योंकि इससे आपको एक त्वरित जानकारी मिलती है कि चीजें कैसे काम करती हैं।
चलो शुरू करें!
आयनिक परियोजना की स्थापना
मुझे लगता है कि आपने अपने सिस्टम पर नोड स्थापित किया है और आपके पास एनएमएम (नोड पैकेज प्रबंधक) भी है। आयनिक ढांचे को स्थापित करना निम्न कार्य करता है:
1 |
npm install -g cordova ionic |
यह आपके कंप्यूटर पर कॉर्डोबा और आयनिक दोनों स्थापित करेगा।
कॉर्डोवा आयनिक के लिए मुख्य तकनीक है, और मूल रूप से यह हमारे मोबाइल एप्लिकेशन में एक एम्बेडेड ब्राउज़र की अनुमति देता है। उस ब्राउज़र में हम अपने सभी एचटीएमएल और जावास्क्रिप्ट कोड को चलाने में सक्षम होंगे। इसे हाइब्रिड मोबाइल एप्लिकेशन कहा जाता है, क्योंकि आवेदन मूल कोड नहीं चला है, लेकिन ब्राउज़र के अंदर चलाता है।
कॉर्डोवा के बगल में, आयनिक हमारे कोड को लिखने के लिए ऐंगग्यलर जेएस का उपयोग करने की संभावना को जोड़ता है, और यह एक बहुत साफ यूआई ढांचा भी जोड़ता है।
आयनिक जगह के साथ, हम आयनिक सीएलआई, एक बहुत ही उपयोगी कमांड लाइन उपकरण का उपयोग करके हमारी परियोजना बना सकते हैं। आयनिक तीन डिफ़ॉल्ट प्रोजेक्ट टेम्प्लेट प्रदान करता है जिन्हें आरंभ बिंदु के रूप में इस्तेमाल किया जा सकता है:
- रिक्त: जैसा कि नाम बताता है, यह जगह में केवल न्यूनतम आवश्यक घटकों के साथ एक खाली परियोजना है।
- टैब्स: अपने स्क्रीन के माध्यम से नेविगेट करने के लिए टैब का उपयोग कर एक एप्लिकेशन।
- साइडमेनू: नेविगेशन के लिए एक मानक मोबाइल साइड मेनू का उपयोग कर एक एप्लिकेशन।
इस ट्यूटोरियल के लिए, हम टैब एप्लिकेशन टेम्प्लेट का उपयोग करेंगे। हमारी परियोजना शुरू करने के लिए, चलें:
1 |
ionic start myWebsiteOnMobile tabs |
आयनिक सभी घटकों को डाउनलोड और स्थापित करेगा, और यह मेरे फ़ोसाइट नाम पर प्रोजेक्ट फ़ोल्डर को बनाएगा myWebsiteOnMobile
।चलकर प्रोजेक्ट डायरेक्टरी में जाएं:
1 |
cd myWebsiteOnMobile
|
चूंकि हमारा एप्लीकेशन हाइब्रिड मोबाइल एप्लिकेशन है, इसलिए हम ब्राउज़र के अंदर एप्लिकेशन को चलाने में सक्षम होने का फायदा उठाते हैं।ऐसा करने के लिए, आयनिक एक स्वच्छ निर्मित वेब सर्वर प्रदान करता है जो हमारी इस तरह से चलाता है:
1 |
ionic serve |
यह हमारे एप्लिकेशन के साथ एक ब्राउज़र खुल जाएगा, और यह इस तरह दिखाई देगा:



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



टैब आयनिक एप्लिकेशन टेम्पलेट में तीन टैब हैं: स्थिति, चैट और खाता अगले चरणों में हम अपनी जरूरतों को पूरा करने के लिए आवेदन को समायोजित करेंगे।
डिफ़ॉल्ट आयनिक टैब्स खाका एप्लिकेशन को कैसे समायोजित करें।
हमारे आवेदन के लिए हमारे पास दो टैब होंगे:
- नवीनतम पोस्ट: आरएसएस फ़ीड से प्राप्त नवीनतम पदों की सूची दिखा रहा है।
- सेटिंग्स: जहां उपयोगकर्ता अनुप्रयोग के कई पहलुओं को कॉन्फ़िगर करने में सक्षम होगा।
नवीनतम पोस्ट टैब से, उपयोगकर्ता किसी भी नवीनतम पोस्ट पर क्लिक करने और पोस्ट के बारे में और अधिक जानकारी देखने के लिए, एक बाहरी ब्राउज़र में पोस्ट को खोलने की संभावना के साथ सक्षम होगा।
चूंकि हमारी नवीनतम पोस्ट टैब टेम्पलेट द्वारा प्रदान किए गए चैट टैब के समान है, इसलिए हम उस खाते टैब के साथ पुनः उपयोग करेंगे, जो कि हमारे सेटिंग टैब बन जाएगा। हम आयनिक वेबसर्वर के साथ सभी बदलाव कर सकते हैं, और आयनिक हमारे लिए ऐप को फिर से लोड कर देगा। यह एक बहुत सुथरा विशेषता है जो विकास को गति देगा।
जैसा कि पहले उल्लेख किया गया है, आयनिक AngularJS का उपयोग करता है, और यह संपूर्ण अनुप्रयोग वास्तव में एक AngularJS मॉड्यूल है। मॉड्यूल को www/js /app.js
में परिभाषित किया गया है, और यहां यह भी है कि जहां आवेदन के पथ या रूट परिभाषित किए गए हैं। एप्लिकेशन के प्रत्येक स्क्रीन पर एक संबंधित मार्ग है।
चलिए स्टेटस टैब को हटा दें क्योंकि हमें इसकी आवश्यकता नहीं होगी। ऐसा करने के लिए, हमें पहली बार चैट स्क्रीन पर ध्यान देने के लिए हमारे एप्लिकेशन की डिफ़ॉल्ट स्क्रीन (या मार्ग) को बदलना होगा, जो हमारी मुख्य स्क्रीन बन जाएगी। डिफ़ॉल्ट स्क्रीन $urlRouterProvider.otherwise()
के माध्यम से कॉन्फ़िगर ह, तो चलिए इसे उस पर परिवर्तित करें:
1 |
$urlRouterProvider.otherwise('/tab/chats'); |
अगर हम अब अपने ब्राउज़र में http://localhost:8100
को पुनः लोड करते हैं, तो हम देखेंगे कि चैट टैब डिफ़ॉल्ट रूप से लोड होगा।
स्थिति टैब को निकालने के लिए, हमें www/templates/tabs.html
फ़ाइल को संपादित करना होगा जो टैब घटक के लिए टेम्पलेट को धारण करता है। हम तत्व को निकाल देंगे:
1 |
<!-- Dashboard Tab -->
|
2 |
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash"> |
3 |
<ion-nav-view name="tab-dash"></ion-nav-view> |
4 |
</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
इस तरह दिखना चाहिए:
1 |
<ion-tabs class="tabs-icon-top tabs-color-active-positive"> |
2 |
|
3 |
<!-- Latest posts Tab -->
|
4 |
<ion-tab title="Latest posts" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/latest-posts"> |
5 |
<ion-nav-view name="tab-latest-posts"></ion-nav-view> |
6 |
</ion-tab>
|
7 |
|
8 |
<!-- Settings Tab -->
|
9 |
<ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/settings"> |
10 |
<ion-nav-view name="tab-settings"></ion-nav-view> |
11 |
</ion-tab>
|
12 |
|
13 |
|
14 |
</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
फ़ाइल से इस तरह दिखना चाहिए:
1 |
...
|
2 |
// Each tab has its own nav history stack:
|
3 |
|
4 |
.state('tab.latest-posts', { |
5 |
url: '/latest-posts', |
6 |
views: { |
7 |
'tab-latest-posts': { |
8 |
templateUrl: 'templates/tab-latest-posts.html', |
9 |
controller: 'LatestPostsCtrl' |
10 |
}
|
11 |
}
|
12 |
})
|
13 |
.state('tab.post-detail', { |
14 |
url: '/latest-posts/:postId', |
15 |
views: { |
16 |
'tab-latest-posts': { |
17 |
templateUrl: 'templates/post-detail.html', |
18 |
controller: 'PostDetailCtrl' |
19 |
}
|
20 |
}
|
21 |
})
|
22 |
|
23 |
.state('tab.settings', { |
24 |
url: '/settings', |
25 |
views: { |
26 |
'tab-settings': { |
27 |
templateUrl: 'templates/tab-settings.html', |
28 |
controller: 'SettingsCtrl' |
29 |
}
|
30 |
}
|
31 |
});
|
32 |
|
33 |
// if none of the above states are matched, use this as the fallback
|
34 |
$urlRouterProvider.otherwise('/tab/latest-posts'); |
35 |
...
|
और हमारे www/js/controllers.js
फ़ाइल को साफ किया गया है:
1 |
angular.module('starter.controllers', []) |
2 |
.controller('LatestPostsCtrl', function($scope) {}) |
3 |
.controller('PostDetailCtrl', function($scope, $stateParams) {}) |
4 |
.controller('SettingsCtrl', function($scope) {}); |
अब जब हमने हमारी ज़रूरतों को पूरा करने के लिए ऐप को पुनर्गठित किया है, तो हम अगले भाग पर आगे बढ़ें और कुछ कार्यक्षमता जोड़ें।
आयनिक के साथ एक आरएसएस फ़ीड कैसे प्राप्त करें
नवीनतम पदों की सूची प्रदर्शित करने के लिए, हमारे आवेदन को यूआरएल से आरएसएस फ़ीड प्राप्त करना होगा। सर्वोत्तम अभ्यास के रूप में, यह सलाह दी जाती है कि इस प्रकार की कार्यक्षमता एप्लिकेशन के सेवा स्तर में रहती है। इस तरीके से हम इसे अपने नियंत्रक में आसानी से उपयोग कर सकते हैं और फिर उपयोगकर्ता को एक दृश्य का उपयोग करके इसे प्रस्तुत कर सकते हैं।
हमारी वेबसाइट के आरएसएस को पुनः प्राप्त करने के लिए Yahoo's YQL REST API का इस्तेमाल करेगी। REST API पर कॉल करने के लिए, हम AngularJS द्वारा प्रस्तावित $http
प्रदाता का उपयोग करेंगे।
आइओनिक सेवाओं को आमतौर पर www/js/services.js
फ़ाइल में परिभाषित किया जाता है, इसलिए हम जहां भी अपनाएंगे I कोड ऐसा दिखेगा:
1 |
angular.module('starter.services', []) |
2 |
.service('RSS',function($http){ |
3 |
var self = this; |
4 |
this.download = function(next){ |
5 |
var feedUrl = "https://tutsplus.com/posts.atom"; |
6 |
var yql_query = "select * from xml where url = '"+feedUrl+"'"; |
7 |
var url = 'https://query.yahooapis.com/v1/public/yql?q='+encodeURIComponent(yql_query)+'&format=json&callback=JSON_CALLBACK'; |
8 |
$http
|
9 |
.jsonp(url) |
10 |
.success(function(response){ |
11 |
if (response.query.results["feed"]){ |
12 |
next(self.parseAtom(response.query.results)); |
13 |
} else if (response.query.results["rss"]){ |
14 |
next(self.parseRSS(response.query.results)); |
15 |
} else { |
16 |
throw "Unknown RSS format"; |
17 |
}
|
18 |
})
|
19 |
.error(function(data, status){ |
20 |
|
21 |
});
|
22 |
}
|
23 |
|
24 |
this.parseAtom = function(atomFeed){ |
25 |
var posts = []; |
26 |
angular.forEach(atomFeed.feed.entry,function(item,idx){ |
27 |
var post = { |
28 |
id:idx, |
29 |
title:item.title, |
30 |
description:item.content.content, |
31 |
link:item.link.href |
32 |
}
|
33 |
posts.push(post); |
34 |
})
|
35 |
return posts; |
36 |
}
|
37 |
|
38 |
this.parseRSS = function(rssFeed){ |
39 |
var posts = []; |
40 |
angular.forEach(rssFeed.rss.channel.item,function(item,idx){ |
41 |
var post = { |
42 |
id:idx, |
43 |
title:item.title, |
44 |
description:item.description, |
45 |
link:item.link |
46 |
}
|
47 |
posts.push(post); |
48 |
})
|
49 |
return posts; |
50 |
}
|
51 |
})
|
हम सेवा का उपयोग कर सेवा की service()
AngularJS द्वारा प्रदान की गई विधि। हम फिर Angular's $http
मॉड्यूल को इंजेक्ट करते हैं ताकि हम इसे हमारी सेवा में कॉल कर सकें।
self
वेरीअबल आरएसएस सेवा का एक संदर्भ है ताकि हम इसे सेवा के तरीकों के भीतर से कॉल कर सकें। सेवा का मुख्य तरीका download()
विधि है, जो फ़ीड जानकारी को डाउनलोड करता है और इसे प्रोसेस करता है। वेबसाइट फीड्स के लिए इस्तेमाल दो मुख्य स्वरूप हैं: आरएसएस(RSS) और एटीएम(ATOM) हमारे आवेदन के लिए, हमने टूट+ से ट्यूटोरियल के फ़ीड https://tutsplus.com/posts.atom का उपयोग किया है जो ATOM प्रारूप में है, लेकिन पूर्णता के लिए हमने आरएसएस प्रारूप को भी ध्यान में रखा है।
download()
पद्धति YQL API पर कॉल करती है और फ़ीड के प्रकार के आधार पर parseAtom ()
या parseRSS ()
विधियों का उपयोग करके परिणामों को पार्स करती है। विचार यहां एक ही आउटपुट स्वरूप है जिसे आगे कॉलबैक के माध्यम से next()
किया जाएगा। जगह में आरएसएस सेवा के साथ, हम नियंत्रक को आगे बढ़ सकते हैं।
नवीनतम पोस्ट कंट्रोलर के लिए आरएसएस(RSS) सेवा का झोंका
हमारे www/js/controllers.js
फ़ाइल में, हमें आरएसएस डेटा लोड करना होगा और इसे हमारे दृश्य में पास करना होगा। ऐसा करने के लिए, हमें इस तरह हमारे LatestPostsCtrl
को संशोधित करने की आवश्यकता है:
1 |
.controller('LatestPostsCtrl', function($scope, RSS) { |
2 |
RSS.download(function(posts){ |
3 |
$scope.posts = posts; |
4 |
});
|
5 |
})
|
कोणीय निर्भरता इंजेक्शन तंत्र का उपयोग करते हुए, हमें केवल विधि दायरे के रूप में $scope
और RSS
वैरिएबल निर्दिष्ट करने की जरूरत है, और यह उन मॉड्यूल को लोड करने के तरीके को पता चलेगा। $scope
मॉड्यूल हमें देखने के लिए बाध्य मॉडल पर चर सेट करने की अनुमति देता है।दायरे में सेट किए गए किसी भी मान को फिर से प्राप्त किया जा सकता है और नियंत्रक से जुड़े दृश्य के अंदर प्रदर्शित किया जा सकता है।
जब नवीनतम पोस्ट के लिए दृश्य लोड किया जाता है, तो वह LatestPostsCtrl
नियंत्रक से फोन करेगा, और बदले में फीड जानकारी डाउनलोड करने के लिए आरएसएस सेवा का उपयोग करेगा।परिणाम पार्स किए जाते हैं और posts
वेरीअबल का उपयोग करते हुए एक सरणी के रूप में वापस हो जाते हैं, जो कि हम वर्तमान गुंजाइश में जमा करते हैं।
रास्ते में से सभी के साथ, हम अब दृश्य भाग में आगे बढ़ सकते हैं, फ़ीड से प्राप्त पदों की सूची प्रदर्शित कर सकते हैं।
नवीनतम डेटा देखें फ़ीड डेटा को देखें।
अब हमें नवीनतम पोस्ट के लिए हमारे दृश्य को संशोधित करने की आवश्यकता है। यदि आपको याद है, यह templateUrl
विशेषता के माध्यम से www/js/app.js
फ़ाइल में कॉन्फ़िगर किया गया है, और यह www/templates/tab-latest-posts.html
फ़ाइल को इंगित करता है।
हम क्या करना चाहेंगे, फ़ीड की सूची प्रदर्शित करते हैं I चूंकि फ़ीड की जानकारी में एचटीएमएल(HTML) हो सकती है, और यह केवल नवीनतम पोस्टों की सूची को अव्यवस्थित करेगा, हमें पोस्ट की सामग्री से एचटीएमएल(HTML) टैग के बिना पाठ निकालने के लिए कुछ चाहिए। ऐसा करने का सबसे आसान तरीका एक एन्जेलरजेएस फ़िल्टर परिभाषित करके होता है जो पाठ से एचटीएमएल टैग्स को स्ट्रिप्स करता है। हम इसे www/js/services.js
में जोड़कर करते हैं:
1 |
.filter('htmlToPlaintext', function() { |
2 |
return function(text) { |
3 |
return text ? String(text).replace(/<[^>]+>/gm, '') : ''; |
4 |
};
|
5 |
}
|
6 |
)
|
www/templates/tab-latest-posts.html
फ़ाइल के अंदर वापस हमारे दृश्य में नहीं, चलो इसे इस तरह देखने के लिए संशोधित करें:
1 |
<ion-view view-title="Latest posts"> |
2 |
<ion-content>
|
3 |
<ion-list>
|
4 |
<ion-item class="item-icon-left item-icon-right" ng-repeat="post in posts" type="item-text-wrap" href="#/tab/latest-posts/{{post.id}}"> |
5 |
<span class="icon ion-social-rss-outline"></span> |
6 |
<h2>{{post.title}}</h2> |
7 |
<p>{{post.description | htmlToPlaintext}}</p> |
8 |
<i class="icon ion-chevron-right icon-accessory"></i> |
9 |
</ion-item>
|
10 |
</ion-list>
|
11 |
</ion-content>
|
12 |
</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
में परिणामी कोड इस तरह दिखेगा:
1 |
.controller('LatestPostsCtrl', function($scope, $rootScope, RSS) { |
2 |
RSS.download(function(posts){ |
3 |
$rootScope.posts = posts; |
4 |
});
|
5 |
})
|
6 |
|
7 |
.controller('PostDetailCtrl', function($scope,$rootScope, $stateParams) { |
8 |
angular.forEach($rootScope.posts,function(post){ |
9 |
if (post.id == $stateParams.postId){ |
10 |
$scope.post = post; |
11 |
}
|
12 |
})
|
13 |
})
|
हमने बस $rootscope
नियंत्रक को दोनों नियंत्रकों में इंजेक्ट किया और दो नियंत्रकों के बीच posts
पास करने के लिए इसका इस्तेमाल किया।कृपया ध्यान दें कि हमारे नवीनतम पोस्ट दृश्य में $rootScope
के रूप में कोई भी बदलाव करने की आवश्यकता नहीं और $scope
दृश्य से दोनों तरह से पहुंच योग्य हैं।
PostDetailCtrl
नियंत्रक के अंदर, हम केवल उपयोगकर्ता द्वारा क्लिक किए गए लिंक में दिए गए आईडी के साथ पोस्ट की खोज करते हैं। हम प्रत्येक पोस्ट आईडी को $stateParams.postId
वेरीअबल के माध्यम से पारित यूआरएल के मूल्य के साथ तुलना करके करते हैं। अगर हम एक मैच पाते हैं तो हम दायरे पर पोस्ट सेट करते हैं ताकि हम इसे हमारे दृष्टिकोण में इस्तेमाल कर सकें।
आइए अब हमारे पोस्ट विवरण दृश्य को समायोजित करें www/templates/ post-detail.html
इस तरह से:
1 |
<ion-view view-title="{{post.title}}"> |
2 |
<ion-nav-buttons side="right"> |
3 |
<a ng-href="{{post.link}}" class="button" target="_system"> |
4 |
Open |
5 |
</a>
|
6 |
</ion-nav-buttons>
|
7 |
<ion-content class="padding"> |
8 |
<h1>{{post.title}}</h1> |
9 |
<span ng-bind-html="post.description"></span> |
10 |
</ion-content>
|
11 |
</ion-view>
|
यह हमने इस दृश्य में किया है:
- हमने स्क्रीन के शीर्ष लेख में पोस्ट का शीर्षक रखा है।
- हमने सही पर हैडर में एक "ओपन" बटन रखा है।यह बटन एक बाहरी ब्राउज़र में पोस्ट लिंक को खोल देगा क्योंकि विशेषता
target="_system"
। हमें ऐसा करना होगा क्योंकि कॉर्डोवा के कारण ब्राउज़र में एप्लिकेशन पहले से ही चल रहा है। अगर हम उस विशेषता को निर्धारित नहीं किया है, तो पोस्ट उसी ब्राउज़र में आवेदन के रूप में खोलेगा, और फिर हमारे पास आवेदन पर वापस जाने का कोई तरीका नहीं होगा। - हम एंजेलर
ng-bind-html
निर्देश का उपयोग करके पोस्ट के विवरण को एचटीएमएल(HTML) के रूप में प्रदर्शित करते हैं।
आवेदन को चलाने के दौरान, मुझे पता चला कि यदि पोस्ट विवरण में छवियाँ हैं, तो उनमें से कुछ स्क्रीन बंद हो जाते हैं। यह वीडियो जैसे अन्य HTML तत्वों के साथ मामला हो सकता है हम निम्न सीएसएस नियम को www/css/style.css
में जोड़कर आसानी से इसे ठीक कर सकते हैं।
1 |
ion-content *{ |
2 |
max-width: 100%; |
3 |
}
|
अगर हम अब आवेदन पर एक नज़र डालें और किसी पोस्ट पर क्लिक करें, तो हमें कुछ ऐसा देखना चाहिए:



और हमारे आवेदन लगभग पूर्ण है। अगले खंड में, हम सेटिंग्स स्क्रीन को लागू करने पर एक नज़र डालेंगे।
आपके आयनिक अनुप्रयोग के लिए सेटिंग जोड़ना
हमारी सेटिंग्स स्क्रीन के लिए, हम यह दर्शाने के लिए एक तरीका लागू करेंगे कि आवेदन की मुख्य स्क्रीन पर कितनी पोस्ट प्रदर्शित हों। हम इस सेटिंग को localStorage
मेमोरी में संग्रहीत करेंगे, जो कि एप्लिकेशन बंद होने पर मिटा नहीं है।नियंत्रक फ़ाइल www/js/controllers.js
को संपादित करें और इस तरह से SettingsCtrl
नियंत्रक बदलें:
1 |
.controller('SettingsCtrl', function($scope,$rootScope) { |
2 |
$scope.settings = { |
3 |
maxPosts: window.localStorage.getItem("myWebsiteOnMobile.maxPosts") |
4 |
};
|
5 |
|
6 |
$scope.$watch('settings.maxPosts',function(){ |
7 |
window.localStorage.setItem("myWebsiteOnMobile.maxPosts",$scope.settings.maxPosts); |
8 |
$rootScope.maxPosts = window.localStorage.getItem("myWebsiteOnMobile.maxPosts"); |
9 |
});
|
10 |
});
|
इसके अलावा, हमें www/templates/tab-settings.html
जैसी सेटिंग्स स्क्रीन को संशोधित करने की आवश्यकता है:
1 |
<ion-view view-title="Settings"> |
2 |
<ion-content>
|
3 |
<div class="item item-divider item-balanced">Maximum posts</div> |
4 |
<ion-radio ng-model="settings.maxPosts" ng-value="null">Unlimited</ion-radio> |
5 |
<ion-radio ng-model="settings.maxPosts" ng-value="5">5</ion-radio> |
6 |
<ion-radio ng-model="settings.maxPosts" ng-value="10">10</ion-radio> |
7 |
</ion-content>
|
8 |
</ion-view>
|
नियंत्रक localStorage
से सेटिंग myWebsiteOnMobile.maxPosts
को पुनर्प्राप्त करता है Iयदि यह null
में नहीं है, तो यह शून्य हो जाएगा, और हम विचार करेंगे कि पदों की अधिकतम संख्या के लिए कोई सीमा नहीं है।
हम $scope.$ Watch()
सेटिंग्स के परिवर्तन की निगरानी के लिए कहते हैं, settings.maxPosts
वेरिएबल, जो सेटिंग्स स्क्रीन में रेडियो नियंत्रण से जुड़ी है।
इस सब जगह के साथ, हर बार जब हम सेटिंग स्क्रीन पर पोस्ट की अधिकतम संख्या बदलते हैं, तो सेटिंग को localStroage
में संग्रहीत किया जाएगा, और जब एप्लिकेशन पुनरारंभ होता है तब से इसे वापस लिया जाएगा।
अब इस सेटिंग का उपयोग करते हैं। यह www/js/controllers.js
से LatestPostsCtrl
में इसे जोड़ने के रूप में सरल है:
1 |
$rootScope.maxPosts = window.localStorage.getItem("myWebsiteOnMobile.maxPosts"); |
और नवीनतम पोस्ट स्क्रीन www/templates/tab-latest-posts.html
में एक निर्देश जोड़ना:
1 |
<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
होगा, जो आरएसएस सेवा द्वारा प्राप्त सभी फीड्स को प्रदर्शित करेगा।
बधाई! अब हमारे पास एक आरएसएस फ़ीड प्रदर्शित करने के लिए एक पूरी तरह से काम करने वाला आवेदन है।
निष्कर्ष
इस ट्यूटोरियल में, हमने देखा है कि आयनिक फ्रेमवर्क और एंग्युलरजेएस का उपयोग करके एक हाइब्रिड मोबाइल एप्लिकेशन कैसे तैयार किया जाए। केवल एक और चीज है: मोबाइल डिवाइस या मोबाइल एमुलेटर पर एप्लिकेशन को चलाएं। यह आयनिक के साथ बहुत सरल है ऐन्ड्रॉइड एमुलेटर पर एप्लिकेशन को चलाने के लिए, बस चलाएं:
1 |
ionic platform add android |
2 |
ionic run |
यदि आप किसी भी वेबसाइट को किसी मोबाइल एप्लिकेशन में बदलने के लिए एक पूर्व बनाया गया आयनिक आवेदन टेम्पलेट डाउनलोड करना चाहते हैं, तो वेबसाइट को मोबाइल कोड के लिए क्लिक करें।


