ईओण के साथ शुरू हो रही है: नेवीगेशन

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

Final product image — What You'll Be Creating

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

ट्यूटोरियल परियोजना फ़ाइलें

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

तुम पर GitHub से इस ट्यूटोरियल के लिए पूरा परियोजना डाउनलोड कर सकते हैं । यदि आप परियोजना क्लोन, तुम भी साथ git का उपयोग कर और git checkout –b start कोड कर सकते हैं । अंतिम उदाहरण पूर्वावलोकन करने के लिए भी उपलब्ध है ।

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

1. एक पक्ष मेनू जोड़ना

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

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

ईओण घटक है कि यह तुच्छ एक ओर मेनू स्थापित करने के लिए बनाने के एक जोड़े प्रदान करता है । आप दो पक्ष मेनू, दाईं और बाईं तरफ एक पर बना सकते हैं । एक ओर मेनू कई घटकों, ionSideMenus, ionSideMenu, और ionSideMenuContent शामिल हैं ।

कार्रवाई में यह देखने के लिए, चलो अद्यतन www/index.html और एक तरफ मेनू की स्थापना की । आप नीचे दिए गए कोड के साथ मौजूदा सामग्री को बदल देंगे, जो हमारे मौजूदा कोड के आसपास साइड मेनू घटकों को जोड़ता है ।

<body ng-app="App">
  <ion-side-menus>
    <ion-side-menu side="left">
      <ion-header-bar>
        <h1 class="title">Civinfo</h1>
      </ion-header-bar>
      <ion-content>
        <ion-list>
          <ion-item ui-sref="places" menu-close>Places</ion-item>
          <ion-item ui-sref="settings.preferences" menu-close>Settings</ion-item>
        </ion-list>
      </ion-content>
    </ion-side-menu>
    <ion-side-menu-content drag-content="false">
      <ion-nav-bar class="bar-balanced">
        <ion-nav-buttons side="left">
          <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
        </ion-nav-buttons>
        <ion-nav-back-button class="button-clear">
          <i class="ion-arrow-left-c"></i> Back
        </ion-nav-back-button>
      </ion-nav-bar>
      <ion-nav-view></ion-nav-view>
    </ion-side-menu-content>
  </ion-side-menus>
</body>

एक ओर मेनू सक्षम करने के लिए, हम ionSideMenus में हमारे app सामग्री लपेटकर शुरू करते हैं । यह ईओण पक्ष मेनू और सामग्री क्षेत्रों समंवय करने के लिए सक्षम बनाता है । हम तो एक पक्ष के साथ ionSideMenu एक side="left" विशेषता निर्दिष्ट करने के लिए जो पक्ष यह रह रहे हैं ।

साइड मेनू में, हम किसी भी सामग्री हम चाहते है डाल सकते हैं । इस स्थिति में, और संभवत: सबसे सामांय परिदृश्य में, सामग्री एक ionHeaderBar घटक और अनुप्रयोग शीर्षक और लिंक्स की सूची क्रमश: रेंडर करने के लिए एक ionList घटक है । हम सेटिंग दृश्य अभी तक परिभाषित नहीं किया है, ताकि लिंक पल के लिए असफल हो जाएगी । भी ध्यान दें कि ionItem घटक एक menu-close विशेषता है । जब कोई उपयोगकर्ता लिंक क्लिक करता है तो यह स्वचालित रूप से पार्श्व मेनू बंद कर देता है, अंयथा यह खुला रहता है ।

ionSideMenuContent घटक प्राथमिक सामग्री क्षेत्र में शामिल करने के लिए उपयोग किया जाता है । इस सामग्री के क्षेत्र में पूरे स्क्रीन लेता है, लेकिन इस घटक सिर्फ साइड मेनू घटक ठीक से प्रस्तुत करने में मदद करता है । हम भी उपयोग किया है खींचें drag-content="false" खींचें इशारों को निष्क्रिय करने के लिए विशेषता है क्योंकि वे स्क्रॉल सूची और टैब के साथ हस्तक्षेप करेंगे ।

हम भी नेविगेशन पट्टी ionNavButtons का उपयोग करने के लिए एक नया बटन जोड़ लिया है । यह पार्श्व मेनू चिह्न है जो शीर्ष दाईं ओर तीन स्टैक्ड रेखाओं के रूप में प्रकट होता है । यह बटन मेनू menu-toggle="left" विशेषता है, जो बाईं ओर मेनू से चलाता है टॉगल जब चयनित ।

अब जब कि हमारे पक्ष मेनू जगह में है, चलो सेटिंग्स को देखने के लिए टैब जोड़कर अगले प्रमुख नौवहन घटक की स्थापना पर काम करते हैं ।

2. व्यक्तिगत नेविगेशन इतिहास के साथ टैब्स

टैब एक app नेविगेट करने के लिए एक और आम नेविगेशन पैटर्न हैं. टैब्स समझने में आसान होते हैं क्योंकि हम उन्हें इतने प्रकार के इंटरफेस में देखते हैं, न कि सिर्फ मोबाइल ऐप्स.

टैब या ख़ामोश हो सकता है । कोई टैब जो ऐसी सामग्री प्रदर्शित करता है जो किसी भी परिवर्तन की स्मृति को बनाए नहीं रखती है, जबकि एक टैब जो उपयोगकर्ता इंटरैक्शन के आधार पर स्थिति बनाए रखता है, वह स्थितिपूर्ण है (उदाहरण के लिए, खोज परिणाम जारी रखना). हम कैसे ईओण के साथ राज्य टैब बनाने के लिए देखो के रूप में वे और अधिक जटिल और अधिक शक्तिशाली हैं ।

टैब्स की स्थापना ionTabs और ionTab घटकों के साथ काफी आसान है । बहुत ओर मेनू की तरह, तुम अंदर कई टैब घटकों के रूप में डाल के रूप में आप की तरह । कोई मुश्किल सीमा नहीं है, लेकिन मैं पांच मिल एक स्वस्थ अधिकतम है । छोटे डिवाइसेज़ पर, बहुत अधिक चिह्न किसी टैब का चयन करना कठिन बना देता है.

हम नई फ़ाइलों की एक जोड़ी बनाने के द्वारा टैब स्थापित करने के लिए जा रहे हैं । पहले, चलो www/views/settings/settings.html पर एक नई फ़ाइल बनाने के द्वारा टेंपलेट की स्थापना की । नई फ़ाइल के लिए निम्न कोड जोड़ें ।

<ion-tabs class="tabs-icon-top tabs-stable">

  <ion-tab title="Preferences" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline" ui-sref="settings.preferences">
    <ion-nav-view name="preferences"></ion-nav-view>
  </ion-tab>

  <ion-tab title="About" icon-on="ion-ios-information" icon-off="ion-ios-information-outline" ui-sref="settings.about">
    <ion-nav-view name="about"></ion-nav-view>
  </ion-tab>

</ion-tabs>

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

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

प्रत्येक टैब के भीतर एक और ionNavView है । यह जगह से बाहर लग सकता है क्योंकि हम पहले से ही एक ionNavView index. html में स्थापित किया है । क्या हम कर रहे है अतिरिक्त स्थानों की घोषणा है कि एक राज्य प्रदान किया जा सकता है, जो बच्चे के विचार के रूप में सोचा जा सकता है ।

प्रत्येक टैब अपने स्वयं के नौवहन इतिहास है, क्योंकि प्रत्येक ionNavView दूसरों के स्वतंत्र है सक्षम है । प्रत्येक टैब भी एक अनूठा नाम है, जो काम में आ जाएगा तो हम कुछ राज्यों को परिभाषित करने के लिए नामित ionNavView में प्रदर्शित कर सकते हैं ।

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

अब हम कुछ अतिरिक्त राज्यों की स्थापना के लिए उदाहरण कार्यात्मक बनाने की जरूरत है । www/views/settings/settings. js पर कोई अंय फ़ाइल बनाएं और इसे करने के लिए निंन कोड जोड़ें ।

angular.module('App')
.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state('settings', {
    url: '/settings',
    abstract: true,
    templateUrl: 'views/settings/settings.html'
  })
  .state('settings.about', {
    url: '/about',
    views: {
      about: {
        templateUrl: 'views/settings/tab.about.html'
      }
    }
  })
  .state('settings.license', {
    url: '/license',
    views: {
      about: {
        templateUrl: 'views/settings/tab.license.html'
      }
    }
  })
  .state('settings.preferences', {
    url: '/preferences',
    views: {
      preferences: {
        controller: 'PreferencesController',
        controllerAs: 'vm',
        templateUrl: 'views/settings/tab.preferences.html'
      }
    }
  });

  $urlRouterProvider.when('/settings', '/settings/preferences');
})
.controller('PreferencesController', function(Types) {
  var vm = this;

  vm.types = Types;
});

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

अंय तीन राज्यों सेटिंग्स [नाम] के रूप में परिभाषित कर रहे हैं । इससे हम इन राज्यों के बीच एक अभिभावक-संतान संबंध को परिभाषित कर सकते हैं, जो मूलतः ionTabs और ionTab घटकों के जनक-संतान संबंध को दर्शाता है. ये राज्य दृश्य गुण का उपयोग करते हैं, जो उपयोग करने के लिए दृश्य के लिए नाम वाले गुण वाला ऑब्जेक्ट है ।

ionNavView के साथ आपके टेंपलेट में जो नाम आप देते है वह गुण नाम से मेल खाना चाहिए । उस संपत्ति का मूल्य तो एक ही राज्य परिभाषा है, यूआरएल है कि सामांय तरीके से घोषित किया गया था बिना । url दोनों को संयोजित करके पैरेंट-चाइल्ड संबंध का अनुसरण भी करता है. तो इन बाल राज्यों के सभी/settings/preferences. की तरह प्रदान

आप एक और स्क्रिप्ट टैग का उपयोग कर index. html के लिए settings. js जोड़ने की जरूरत है । एक बार जब आप किया है कि, आप कुछ त्रुटियों क्योंकि हम फ़ाइलों है कि हम अभी तक नहीं बनाया है की एक संख्या को संदर्भित कर रहे है देखेंगे । चलो हमारे टैब्स टेंपलेट्स के साथ खत्म करो ।

1	<script src="views/settings/settings.js"></script>

हमें तीन बनाने की जरूरत है । पहले दो स्थैतिक सामग्री तो मैं उन पर विस्तार से जाने के लिए नहीं जा रहा हूं रहे हैं । www/views/settings/tab.about.html पर एक फ़ाइल बनाएं और इसे करने के लिए निंन सामग्री जोड़ें ।

<ion-view view-title="About" hide-back-button="true">
  <ion-content>
    <div class="list">
      <a href="https://github.com/gnomeontherun/civinfo-part-3" target="_blank" class="item">
        <h2>Project on GitHub</h2>
        <p>Click to view project</p>
      </a>
      <div class="item" ui-sref="settings.license">
        <h2>License</h2>
        <p>See full license</p>
      </div>
    </div>
  </ion-content>
</ion-view>

इसमें कुछ जानकारी प्रदर्शित करने वाला टेम्पलेट है. यह GitHub परियोजना और लाइसेंस के लिए लिंक । यह वही है जो यह पसंद है ।

www/views/settings/tab.license.html पर कोई अंय फ़ाइल बनाएं और इसमें निंन सामग्री जोड़ें ।

<ion-view view-title="License">
  <ion-content>
    <div class="card">
      <div class="item item-divider">
        The MIT License (MIT)
      </div>
      <div class="item item-text-wrap">
        <p>Copyright (c) 2016 Jeremy Wilken</p>
        <p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
        <p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
        <p>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
      </div>
    </div>
  </ion-content>
</ion-view>

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

अंतिम टेंपलेट में कुछ प्रपत्र तत्व हैं । मैं इसे थोड़ा और अधिक विस्तार में जाना होगा । www/views/settings/tab.preferences.html पर एक नई फ़ाइल बनाएं और इसे करने के लिए निंन सामग्री जोड़ें ।

<ion-view view-title="Preferences" hide-back-button="true">
  <ion-content>
    <ul class="list">
      <li class="item item-divider">
        Types of Locations
      </li>
      <li class="item item-toggle" ng-repeat="type in vm.types">
        {{type.type}}
        <label class="toggle">
          <input type="checkbox" ng-model="type.enabled">
          <div class="track">
            <div class="handle"></div>
          </div>
        </label>
      </li>
    </ul>
  </ion-content>
</ion-view>

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

यह दृश्य एक नियंत्रक settings. js में घोषित किया है, लेकिन यह एक प्रकार की सेवा है कि हम अभी तक नहीं बनाया है इंजेक्ट करता है । हम तय करेंगे कि www/js/app. js के लिए एक नई सेवा जोड़कर ।

.factory('Types', function() {
  return [
    {type: 'Park', enabled: true},
    {type: 'Hospital', enabled: true},
    {type: 'Library', enabled: true},
    {type: 'Museum', enabled: true}
  ];
})

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

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

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

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

3. कैशिंग और इतिहास सेवा का उपयोग

डिफ़ॉल्ट रूप से, ईओण पिछले 10 विचारों caches और उंहें स्मृति में रहता है । कई apps भी हो सकता है कि कई राज्यों, जो अपने पूरे app स्मृति में रह सकता है मतलब नहीं है । यह उपयोगी है क्योंकि यह है कि ईओण का मतलब है नेविगेट करने से पहले दृश्य फिर से प्रस्तुत करने की जरूरत नहीं है, जो app गति ।

क्योंकि आपको लगता है कि हो सकता है कि आपके राज्य हमेशा पुनः लोड और नियंत्रक reinitialize कभी भी राज्य तक पहुँचा है यह कुछ व्यवहार समस्याएँ पैदा कर सकता है । के बाद से केवल 10 विचार कैश्ड हैं, यदि आप 20 विचार है, केवल पिछले 10 कैश में किया जाएगा । इसका मतलब है कि आप गारंटी नहीं हो सकता है कि एक दृश्य या नहीं कैश में है । तो तुम जीवन चक्र के बाहर अपने नियंत्रकों में सेटअप तर्क प्रदर्शन से बचना चाहिए हुक । आप $ionicConfigProvider का उपयोग करके कैशिंग कार्यनीतियां भी कॉंफ़िगर कर सकते हैं ।

कई बार आपको यह निर्धारित करने के लिए कि क्या करना है उपयोगकर्ता के नेविगेशनल इतिहास को देखने की जरूरत है । उदाहरण के लिए, इस ऐप्लिकेशन में, हम कैश किए गए स्थानों की सूची रखना चाहते हैं यदि उपयोगकर्ता किसी स्थान पर टैप करता है और फिर सूची में वापस लौटाता है. यदि हम स्वचालित रूप से हर यात्रा पर सूची ताज़ा, उपयोगकर्ताओं को सूची में अपनी जगह खो के बाद वे स्क्रॉल किया है और एक जगह देखा जा सकता है ।

दूसरी ओर, यदि कोई उपयोगकर्ता सेटिंग्स पृष्ठ पर नेविगेट करता है और फिर स्थान सूची पर वापस जाता है, तो हम सूची को ताज़ा करना चाहते हैं, क्योंकि वे उन स्थानों के प्रकारों को बदल सकते हैं, जिन्हें वे प्रदर्शित करना चाहते हैं.

हम जीवन चक्र घटनाओं है कि हम पहले $ionicHistory सेवा के साथ कुछ तर्क है कि मदद मिलेगी निर्धारित जब स्थानों राज्य सूची पुनः लोड करना चाहिए जोड़ने के साथ देखा है का एक संयोजन का उपयोग करने जा रहे हैं । हम भी प्रकार सेवा का उपयोग करने में मदद करने के लिए हमें केवल स्थानों के प्रकार उपयोगकर्ता देखना चाहता है लोड करना चाहते हैं ।

www/views/places. js खोलें और इसे निंन कोड से मेल खाने के लिए अद्यतन करें । हम जिस तरह से डेटा लोड और $ionicHistory सेवा का उपयोग करने के लिए इतिहास का निरीक्षण करने के लिए जब पुनः लोड करने के लिए निर्धारित बदलने की जरूरत है ।

angular.module('App')
.config(function($stateProvider) {
  $stateProvider.state('places', {
    url: '/places',
    controller: 'PlacesController as vm',
    templateUrl: 'views/places/places.html'
  });
})
.controller('PlacesController', function($http, $scope, $ionicLoading, $ionicHistory, Geolocation, Types) {
  var vm = this;
  var base = 'https://civinfo-apis.herokuapp.com/civic/places?location=' + Geolocation.geometry.location.lat + ',' + Geolocation.geometry.location.lng;
  var token = '';
  vm.canLoad = true;
  vm.places = [];

  vm.load = function load() {
    $ionicLoading.show();
    var url = base;
    var query = [];
    angular.forEach(Types, function(type) {
      if (type.enabled === true) {
        query.push(type.type.toLowerCase());
      }
    });
    url += '&query=' + query.join('|');

    if (token) {
      url += '&token=' + token;
    }

    $http.get(url).then(function handleResponse(response) {
      vm.places = vm.places.concat(response.data.results);
      token = response.data.next_page_token;

      if (!response.data.next_page_token) {
        vm.canLoad = false;
      }
      $scope.$broadcast('scroll.infiniteScrollComplete');
      $ionicLoading.hide();
    });
  };

  $scope.$on('$ionicView.beforeEnter', function() {
    var previous = $ionicHistory.forwardView();
    if (!previous || previous.stateName != 'place') {
      token = '';
      vm.canLoad = false;
      vm.places = [];
      vm.load();
    }
  });
});

सबसे पहले, हम जिस तरह से यूआरएल हमारे एपीआई के लिए बनाया है बस पार्क लोड हो रहा है अनुरोध प्रकार लदान से बदलने के लिए संशोधित किया है । यदि आप पिछले संस्करण के लिए यह तुलना, यह मुख्य रूप से angular. forEach का उपयोग करने के लिए प्रत्येक प्रकार पर पाश और इसे यूआरएल में जोड़ें ।

हमने $ionicLoading सेवा के व्यवहार के तरीके को भी संशोधित किया है । तुरंत चलाने के बजाय जब नियंत्रक शुरू में चलाता है, हम इसे किसी भी समय vm. load () विधि कहा जाता है ट्रिगर । यह महत्वपूर्ण है क्योंकि नियंत्रक कैश हो जाएगा और डिफ़ॉल्ट रूप से डेटा पुनः लोड नहीं होगा ।

सबसे बड़ा परिवर्तन है $ionicView. beforeEnter जीवन चक्र ईवेंट हैंडलर । यह घटना आग से पहले देखने के बारे में अगले सक्रिय दृश्य बनने के लिए है और हमें कुछ सेटअप करने की अनुमति देता है । हम $ionicHistory. forwardView () का उपयोग करें | उपयोगकर्ता पर अंतिम दृश्य के बारे में जानकारी प्राप्त करने के लिए विधि ।

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

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

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

हम अपने स्थानों के लिए दो अंय छोटे tweaks बनाने जा रहे है टेंपलेट । www/views/places/places.html खोलें और शीर्षक स्थानीय स्थानों पर परिवर्तित करें ।

1	<ion-view view-title="Local Places" hide-back-button="true">

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

1	<ion-infinite-scroll on-infinite="vm.load()" ng-if="vm.canLoad" immediate-check="false"></ion-infinite-scroll>

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

निष्कर्ष

ईओण के साथ नेविगेशन हमेशा कुछ राज्यों की घोषणा के साथ शुरू होता है । कि नेविगेशन को उजागर तरीके के रूप में हम इस ट्यूटोरियल में देखा है की एक संख्या किया जा सकता है । यह वही है जो हम इस ट्यूटोरियल में शामिल किया है:

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