Thay đổi url của angular-ui-router mà không cần tải lại trang

Question

Tôi muốn thay đổi trong URL để thúc đẩy ứng dụng của tôi và thay đổi trong ứng dụng thành thay đổi URL, nhưng không thực sự thay đổi trạng thái.

Tôi có lộ trình như thế này. Ví dụ về đất nước/thành phố có một chút giả tạo, hy vọng rằng điều đó không gây nhầm lẫn. Mối quan hệ trong ứng dụng thực tế có phần phân cấp. Chế độ xem con không có vẻ phù hợp mặc dù không cần phải có chế độ xem lồng nhau.

$stateProvider.state('viewMap', { 
    url: '/viewMap/:country/:city', 
    templateUrl: 'pages/viewMap/viewMap.html', 
    controller: 'ViewMapController' 
}; 

Trong ViewMapController, tôi có thể tạo trang dựa trên $stateParams.country và .city. Khi các giá trị này thay đổi, ứng dụng của tôi phản ứng và tôi muốn url luôn được đồng bộ hóa. Tuy nhiên, tôi không muốn tải lại toàn bộ trang. Tôi chỉ muốn cập nhật url và đẩy trạng thái lịch sử lên ngăn xếp.

Tôi hiểu rằng tôi có thể tự xây dựng một chuỗi:

updateUrl = function() { 
window.location.hash = '#/viewMap/'+ $stateParams.country +'/'+ $stateParams.city 
} 

này cảm thấy mong manh, như cách tôi xây dựng chuỗi tách biệt với cách khuôn khổ phân tích nó. Tôi muốn cho khung xây dựng cho tôi một chuỗi dựa trên các thông số hiện tại, nhưng $state.href('.') mô tả tuyến đường hiện tại, không bao gồm $ stateParams chưa được kích hoạt/điều hướng đến.

Tôi cũng đã xem reloadOnSearch, nhưng tôi nghĩ nó chỉ áp dụng cho các tham số truy vấn.

Có cách nào tốt hơn để tạo mô hình này không? Nó cảm thấy như tôi đang chiến đấu với khuôn khổ trên một cái gì đó đơn giản.

Answer 1

Bạn có thể vượt qua params nhà nước để $state.href chức năng để có được URL đầy đủ

$state.href('.', $stateParams) 

Để tạo url tùy ý bạn có thể vượt qua params phi hiện tại và/hoặc cấu hình:

$state.href('.', {country:'usa',city:'sf'}, {absolute:true})