如何通过延迟模型加载来防止 AngularJS 路由更改闪烁？

延迟 AngularJS 路由更改直到模型加载以防止闪烁

AngularJS 提供了一种在 Web 应用程序中管理路由的便捷方法。但是，在某些情况下，您可能希望延迟显示新路线，直到从服务器加载相应的模型和数据之后。这对于防止检索数据时出现闪烁或空白页面显示很有用。

$routeProvider.Resolve 属性

$routeProvider.resolve 属性允许您指定在发生路由更改之前需要解决的依赖关系。这意味着路由更改将被延迟，直到满足这些依赖关系。

使用 Resolve 定义路由

定义一个路由，将路由更改延迟到模型已加载，只需在路由配置上指定resolve属性即可。例如：

$routeProvider.when('/projects', {
  templateUrl: 'partials/project-list.html',
  controller: PhoneListCtrl,
  resolve: PhoneListCtrl.resolve
});

实现 Resolve 函数

resolve 函数负责返回一个 Promise。在这一承诺得到解决之前，路线变更不会进行。下面是一个使用 $resource 服务检索项目列表的解析函数示例：

PhoneListCtrl.resolve = {
  phones: function (Phone, $q) {
    // Create a deferred object to resolve the promise later
    var deferred = $q.defer();

    // Fetch the projects using $resource and resolve the promise when successful
    Phone.query(function (successData) {
      deferred.resolve(successData);
    }, function (errorData) {
      deferred.reject(); // Optionally pass error data here
    });

    // Return the promise
    return deferred.promise;
  },
  // For demonstration purposes, add a delay to the resolve
  delay: function ($q, $defer) {
    var delay = $q.defer();
    $defer(delay.resolve, 1000);
    return delay.promise;
  }
};

解析函数完成后，相应的控制器就可以访问解析后的数据，例如

加载数据时防止闪烁

数据加载时加载后，您可以通过继续显示当前页面来防止闪烁。这可以通过使用 ng-switch 指令有条件地显示加载状态或加载的数据来实现。

演示和源代码

有关工作示例和源代码代码请参考：

• 演示： http://mhevery.github.com/angular-phonecat/app/#/phones
• 来源：https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831

以上是如何通过延迟模型加载来防止 AngularJS 路由更改闪烁？的详细内容。更多信息请关注PHP中文网其他相关文章！