获取数据时如何防止 AngularJS 路由转换期间出现闪烁？

延迟 AngularJS 获取数据的路由更改

当模型需要获取数据时，AngularJS 提供了一种防止路由转换期间闪烁的解决方案。这种技术类似于 Gmail 的行为，允许您延迟显示新路线，直到检索到必要的模型数据。

解析 $routeProvider 的属性

密钥延迟路由更改的功能是与 $routeProvider 关联的解析属性。通过使用解析属性定义路由，您可以指定在路由转换之前需要获取数据。

示例

考虑以下示例：

// Define a route with a resolve property
$routeProvider.when('/phones', {
    templateUrl: 'partials/phone-list.html', 
    controller: PhoneListCtrl, 
    resolve: PhoneListCtrl.resolve
});

resolve 属性是指您定义用于获取数据的函数的对象。例如：

function PhoneListCtrl($scope, phones) {
    $scope.phones = phones;
    $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {
    phones: function(Phone, $q) {
        // Deferred object for promise handling
        var deferred = $q.defer();
        
        // Fetch data via Phone service
        Phone.query(function(successData) {
            deferred.resolve(successData); 
        }, function(errorData) {
            deferred.reject(); // Optionally handle errors
        });
        
        return deferred.promise;
    }
}

Deferred Promises

Promises 用于表示异步数据获取过程。每个解析函数都会返回一个 Promise，AngularJS 会收集所有这些 Promise。路线更改会延迟，直到所有承诺都得到解决，以确保在显示新视图之前数据已准备好。

以上是获取数据时如何防止 AngularJS 路由转换期间出现闪烁？的详细内容。更多信息请关注PHP中文网其他相关文章！