Ẩn tên tiểu bang hiện tại trong URL bằng AngularJS $ stateProvider

Question

Tôi đang làm việc với AngularJS $ stateProvider. Để điều hướng trong ứng dụng của tôi, người dùng đi từ tiểu bang, sử dụng chức năng này:

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

này cho phép thay đổi trạng thái và tải các quan điểm mới mà không thay đổi URL (địa điểm: false) hiện các trick.

Tuy nhiên, khi nhập ứng dụng (xảy ra trong trang "index.html"), URL được hiển thị là "myWebsite/index.html #/tab/index", chỉ mục là trạng thái đầu tiên của ứng dụng. Câu hỏi của tôi là: làm cách nào tôi có thể thay đổi nó để chỉ hiển thị "myWebsite/index.html"?

LƯU Ý: tại thời điểm này, người dùng không thể sử dụng nút quay lại của trình duyệt để điều hướng vì vị trí được đặt thành sai, vì vậy nếu giải pháp tồn tại cũng sẽ giải quyết được vấn đề này, tôi quan tâm .

Đây là tuyên bố tình trạng:

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 }); 
    }; 
    }) 

Tôi không rất quen thuộc với các ứng dụng một trang duy nhất, và tôi không biết nếu những gì tôi yêu cầu thậm chí còn có thể với cấu trúc này. Nếu không, tôi sẽ rất vui khi biết lựa chọn thay thế tốt nhất là gì.

Answer 1

Thay đổi dự phòng url tabs.index bang & của bạn như sau:

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

$urlRouterProvider.otherwise("/"); 

Bây giờ điều này sẽ được tải ứng dụng của bạn với trang index mà không cần bất kỳ url sau #. Và ngược lại với việc sử dụng $ state.go hoặc ui-sref trên html, bạn có thể điều hướng giữa các trạng thái. Thậm chí bạn có thể có tất cả các trạng thái url: "/" nó sẽ hoạt động tốt miễn là bạn đã sử dụng tên trạng thái duy nhất & mối quan hệ cha-con của chúng (thông qua cách này bạn thậm chí không cần sử dụng location: false trong $state.go). Example

Nhưng nó sẽ không giải quyết được vấn đề về nút quay lại. Bởi vì nút back/forard là tính năng gốc của trình duyệt & về cơ bản dựa trên url duy nhất, nhưng vì bạn đang sử dụng cùng một url cho tất cả trình duyệt tiểu bang của mình, bạn sẽ không biết trạng thái khác nhau của nút quay số & sẽ không hoạt động như mong đợi. Ngoài ra còn có beneits khác của việc sử dụng url khác nhau duy nhất cho tất cả các tiểu bang của bạn như là người dùng có thể đánh dấu chúng. Nhưng nếu bạn đang xây dựng ứng dụng di động (sử dụng ion) tại sao bạn quan tâm nếu url được hiển thị hay không, bởi vì cuối cùng nó sẽ không được hiển thị trong giao diện của ứng dụng, trong url ionic chỉ là một phần của logic định tuyến. Vì vậy, có các url duy nhất cho các tiểu bang của bạn sẽ mang lại lợi ích cho bạn & người dùng để sử dụng nút quay lại trên thiết bị di động gốc.

P.S. Để loại bỏ # từ url trong ứng dụng góc bạn đã sử dụng html5mode:

$locationProvider.html5Mode(true); 

Answer 2

khi bạn khai báo cùng tên để .state và url dễ hiểu

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

và kiểm tra đường dẫn tập tin của bạn