具有主视图/详细视图的AngularJs SPA：“慢速”方法

Question

My app is a simple AngularJS SPA, which is essentially a contacts manager: the master (landing) page is a list of persons, one per row, in a ng-repeat loop.
Each person, clicked, shows the details page: a form with many fields.

Currently my router is like this

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

Ie: one controller for both master ('person s ') and detail ('person') view, and two separate views (of course).

The link to the Detail page on each row in the master view does:

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

and the Back to master page link in the detail view does:

$location.path('/');

This approach (which is the "institutional" approach, I suppose...) has many drawbacks:

• since my persons list is quite big (300 persons and growing), with one small image for each person, the loading of the master page is very slow (~5 - ~8 seconds), even if I save the $scope.persons array in a service, to avoid to resync it from server: the slowness is due to Angular, I suppose (the browser freezes for almost the whole time...). I did not yet try to optimize my code (and reduce the $watch es), I know :-), but...

• When returning to master page, the scroll position is lost: the view is shown from the top, which could be very annoying, for the user... :-(

The question is :

Is there a better approach you'd suggest? (for example, just changing the template view, instead to change location...)

Answer 1

Every {{ .. }} , ng- counts and ng-repeats multiply them, and then automatically add to watchers. So, you need to look for angular-once, bind-once or angular-js 1.3 's one time binding syntax {{::variable}}

According to your repository, you using angular 1.3, so you can use angular's one time binding syntax ::, so, you can just try to change {{ to {{:: for those you don't really need 2 way binding.