AngularJs 具有 master/detail 观看次数的 SPA:"slow" 方法
AngularJs SPA with master/detail views: a "slow" approach
我的应用程序是一个简单的 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,我想(浏览器几乎整个时间都冻结......)。我还没有尝试优化我的代码(并减少 $watch
es),我知道 :-),但是...
返回母版页时,滚动位置丢失:视图从顶部显示,这对用户来说可能非常烦人...:-(
问题是:
您有更好的建议吗? (例如,只是更改模板视图,而不是更改位置...)
每{{ .. }}
、ng-
计数并ng-repeats
相乘,然后自动添加到watchers。因此,您需要查找 angular-once、bind-once 或 angular-js 1.3 的一次性绑定语法 {{::variable}}
根据您的存储库,您使用 angular 1.3,因此您可以使用 angular 的一次性绑定语法 ::,因此,您可以尝试更改 {{
{{::
对于那些你真的不需要双向绑定的人。
我的应用程序是一个简单的 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,我想(浏览器几乎整个时间都冻结......)。我还没有尝试优化我的代码(并减少$watch
es),我知道 :-),但是...返回母版页时,滚动位置丢失:视图从顶部显示,这对用户来说可能非常烦人...:-(
问题是:
您有更好的建议吗? (例如,只是更改模板视图,而不是更改位置...)
每{{ .. }}
、ng-
计数并ng-repeats
相乘,然后自动添加到watchers。因此,您需要查找 angular-once、bind-once 或 angular-js 1.3 的一次性绑定语法 {{::variable}}
根据您的存储库,您使用 angular 1.3,因此您可以使用 angular 的一次性绑定语法 ::,因此,您可以尝试更改 {{
{{::
对于那些你真的不需要双向绑定的人。