AngularJs 具有 master/detail 观看次数的 SPA："slow" 方法

Question

我的应用程序是一个简单的 AngularJS SPA，它本质上是一个联系人管理器：主（登录）页面是一个人员列表，每行一个，在 ng-repeat 循环中。
单击每个人，显示详细信息页面：一个包含许多字段的表单。

目前我的路由器是这样的

app.config(function ($routeProvider) {
  $routeProvider
    ...
    .when('/', {
      templateUrl: 'views/persons.html',
      controller: 'PersonsController'
    })
    .when('/details/:personId', {
      templateUrl: 'views/person.html',
      controller: 'PersonsController'
    })
    ...
  });

即：一个控制器用于主视图 ('persons') 和详细视图 ('person')，以及两个单独的视图（当然）。

主视图中每一行的 link 到 Detail page 执行：

$location.path('/detail/' + id);

和详细视图中的 Back to master page link：

$location.path('/');

这种方法（我想是 "institutional" 方法...）有很多缺点：

由于我的人员名单很大（300 人并且还在增加），每个人一张小图片，母版页的加载速度非常慢（~5 - ~8 秒），即使我将 $scope.persons 数组保存在服务中，以避免从服务器重新同步它：缓慢是由于 Angular，我想（浏览器几乎整个时间都冻结......）。我还没有尝试优化我的代码（并减少 $watches），我知道 :-)，但是...
返回母版页时，滚动位置丢失：视图从顶部显示，这对用户来说可能非常烦人...:-(

问题是:

您有更好的建议吗？（例如，只是更改模板视图，而不是更改位置...）

Answer 1

每{{ .. }}、ng-计数并ng-repeats相乘，然后自动添加到watchers。因此，您需要查找 angular-once、bind-once 或 angular-js 1.3 的一次性绑定语法 {{::variable}}

根据您的存储库，您使用 angular 1.3，因此您可以使用 angular 的一次性绑定语法 ::，因此，您可以尝试更改 {{ {{:: 对于那些你真的不需要双向绑定的人。

AngularJs 具有 master/detail 观看次数的 SPA："slow" 方法

AngularJs SPA with master/detail views: a "slow" approach

javascript

angularjs

single-page-application