javascript - Angular application architecture + controller re-initialising issues -

javascript - Angular application architecture + controller re-initialising issues -

i have been developing angularjs search our website on lastly week , have ran big problem, think maybe misunderstanding of technology case (this first medium sized angularjs app).

basic overview of how app works

user types in search query, api returns data, i utilize ng-repeat on checkbox input field iterate on facets returned, each input field has ng-model (e.g. <input type="checkbox" ng-model="filters['key']['name'] />, property on filters object have (plain old empty js object), when user clicks facet (checks checkbox), property added filters (e.g. { brand: { sony: true } }, a have watch on filters, updates url + performs search.

here issues having

the initial page load blocking ui (the more facets returned api, bigger freeze), it's not noticeable on 100~ items (although there tiny delay!), 1 time bigger that, blocking ui noticeably long time.

the above not issue in itself, happy little delay on initial page load whilst ng-repeat adding stuff dom, when update $location.path, pretty url (after filter clicked), controller getting re-initialised, , huge freeze again.

here why think huge delay: route has changed, hence angular go fetch template again, re-initialise controller , in turn add together items dom again, correct?

i found using $location.search , reloadonsearch set false in route, controller isn't re-initialised, when click in browser, have write code handle both cases, ideally i'd utilize same code both!

i have tried various fixes found in angularjs github issues prevent path changes reloading controller, , briefly tried ui.router, both without success!

my questions

is there uniform way modify $location.path doesn't issue total controller reload, works / forwards buttons in browser? (using $location.search not issue if there isn't, how can ng-repeat not lock page whilst adding hundreds of elements dom? (since in scrollable list, need write custom directive partially render list? + add together more on scroll)

cheers.

answered myself after long search, , doesn't produce elegant solution!

i dropped in ui-router reloadonsearch: false, in states, downside have hear $locationchangesuccess event , lot of manual work populate scope state that's in url.

javascript angularjs architecture