AngularJS $ stateProvider

Question

के साथ URL में वर्तमान स्थिति का नाम छुपाएं मैं AngularJS $ StateProvider के साथ काम कर रहा हूं। अपने आवेदन में नेविगेट करने के लिए, उपयोगकर्ताओं, राज्य से दूसरे राज्य जाने के इस समारोह का उपयोग कर: काम कर देता है:

$rootScope.gotoState = function(stateName) { 
    $state.go(stateName, {}, { location: false }); 
}; 

इस राज्य को बदलने और यूआरएल (गलत स्थान) को बदले बिना नया दृश्य लोड करने के लिए अनुमति देता है।

हालांकि, एप्लिकेशन में प्रवेश करते समय (जो "index.html" पृष्ठ में होता है), प्रदर्शित यूआरएल "myWebsite/index.html #/tab/index" है, सूचकांक एप्लिकेशन की पहली स्थिति है। मेरा सवाल है: मैं इसे केवल "myWebsite/index.html" प्रदर्शित करने के लिए कैसे बदल सकता हूं?

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

यहाँ राज्य घोषणा है:

angular.module('ionicApp', ['ionic', 'ngCookies']) 
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) { 

    $ionicConfigProvider.tabs.position('top'); // values: bottom, top 

    $stateProvider 
     .state('tabs', { 
     url: "/tab", 
     abstract: true, 
     templateUrl: "templates/tabs.html" 
     }) 
     .state('tabs.index', { 
     url: "/index", 
     cache:false, 
     views: { 
      'index-tab': { 
      templateUrl: "home.html" 
      } 
     } 
     }) 
     .state('tabs.profile', { 
     url: "/profile", 
     cache:false, 
     views: { 
      'profile-tab': { 
      templateUrl: "profile.html" 
      } 
     } 
     }) 

     $urlRouterProvider.otherwise("/tab/index"); 
    }) 

    .run(function($rootScope, $state, $location) { 
    $rootScope.$state = $state; 
    $rootScope.$location = $location; 
    $rootScope.gotoState = function(stateName) { 
     $state.go(stateName, {}, { location: false }); 
    }; 
    }) 

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

Answer 1

इस प्रकार

अपने tabs.index राज्य & वापस आने यूआरएल बदलें:

.state('tabs.index', { 
     url: "/", 
     cache:false, 
     views: { 
     'index-tab': { 
      templateUrl: "home.html" 
     } 
    } 
    }) 

$urlRouterProvider.otherwise("/"); 

अब इस # के बाद किसी भी यूआरएल के बिना सूचकांक पेज के साथ अपने एप्लिकेशन लोड होगा। और एचटीएमएल पर $ state.go या ui-sref का उपयोग करने के साथ आप राज्यों के बीच नेविगेट कर सकते हैं। यहां तक ​​कि आप सभी राज्य url: "/" भी कर सकते हैं, जब तक आपने अनन्य राज्य नाम & अपने माता-पिता के रिश्ते का उपयोग किया है (इस तरह से आपको $state.go में उपयोग करने की आवश्यकता नहीं है)। Example

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

पीएस कोणीय अनुप्रयोग में यूआरएल से # निकालने के लिए आप html5mode उपयोग करने के लिए है:

$locationProvider.html5Mode(true); 

Answer 2

जब आप .state के लिए एक ही नाम और यूआरएल आसान घोषित

.state('tabs', { 
    url: "/tabs", 
    abstract: true, 
    templateUrl: "templates/tabs.html" 
    }) 

समझते हैं और अपने फ़ाइल पथ की जांच करने के लिए