Ngăn chặn angular-ui-router tải lại ui-view khi tải trang đầu tiên

Question

Khi lần truy cập đầu tiên vào một trang, tôi muốn gửi lại trang được hiển thị đầy đủ cho người dùng. Điều này làm việc tốt nếu javascript bị vô hiệu hóa, nhưng nếu javascript được kích hoạt thì angular-ui-router tìm kiếm trạng thái và hiển thị vào ui-view trên đầu trang của nội dung hiện có. Có cách nào để tắt tính năng này trên trang tải đầu tiên không?

Xem vấn đề này: https://github.com/angular-ui/ui-router/issues/1807 đề xuất sử dụng $ urlRouterProvider.deferIntercept(), nhưng tôi không thể tìm thấy nhiều tài liệu về cách sử dụng và không chắc chắn cách chặn tải trang đầu tiên.

Answer 1

Có hai phần: trước hết bạn cần vô hiệu hóa bộ định tuyến khỏi việc khởi động trang tải đầu tiên. Điều này có thể được thực hiện như sau:

app.config(function($httpProvider, $urlRouterProvider) { 
    // On the first page load disable ui-router so that 
    // our server rendered page is not reloaded based on the window location. 
    $urlRouterProvider.deferIntercept(); 
}); 

Thứ hai chúng ta cần phải thiết lập ui xem một cách chính xác: Bán phá giá đánh dấu server-rendered bên trong ui-view gây ra các vấn đề hành vi kỳ lạ với bộ điều khiển đầu tiên được chạy hai lần (xem https://github.com/angular-ui/ui-router/issues/1807), vì vậy chúng tôi sẽ thêm đánh dấu máy chủ của chúng tôi ngay sau khi xem ui-view div và ẩn giao diện ui cho đến khi có sự kiện điều hướng.

<div ng-controller="PropertyDetailCtrl"> 
    <div class="ng-cloak" ng-show="!isFirstPageLoad" ui-view></div> 

    <div ng-show="isFirstPageLoad"> 
    (server rendered markup goes here) 
    </div> 
</div> 

Bây giờ chúng ta cần phải thiết lập isFirstPageLoad trong $ phạm vi:

app.controller('PropertyDetailCtrl', function loader($rootScope, $scope) { 
    $scope.isFirstPageLoad = true; 

    $rootScope.$on('$viewContentLoading', function(event, viewConfig) { 
    $scope.isFirstPageLoad = false; 
    }); 
}); 

Chúng tôi đã sử dụng ng-áo choàng để đảm bảo rằng trang cư xử một cách hoàn hảo nếu javascript bị vô hiệu hóa, vì vậy bây giờ chúng tôi đã có một phía máy chủ hoàn toàn được tải trang đầu tiên với tất cả các điều hướng tiếp theo được xử lý bởi ui-router.