角度ui路由器仅刷新页面的一部分，需要多个视图吗？

Question

I'm building an angular app where I present a navigation bar on the left with normal ui-sref's going to states like schedules and clients . On the clients view I present a list of clients (which animates in, slides in from left). Then I want to achieve the follow:

1. When a client is clicked on, load their information into the main part of the screen
2. Update the URL so that if they were to refresh at this point the same client would be selected
3. DO NOT re-instantiate the clients controller, as doing so re-animates the client list sliding in.

I've got #1 working, but can't get 2 or 3 to work in a way that I want. I can get the url to update, but doing so re-instantiates the clients controller and re-animates the client list, and no amount of {notify: false} or any other combo of options I've tried seems to do the trick. I did see the $urlRouter.deferIntercept() but I'm not sure how that applies to this situation. Do I need multiple views to achieve this, where clicking on a client just updates the "profile" section of the page? Thanks so much!

Answer 1

You can achieve this by loading a particular client in a substate of clients , with an associated URL that identifies the client.

$stateProvider.state('clients', {
    url: 'clients/',
    resolve: {
        clients: function () {
            // return the clients collection or a promise which will resolve with it
        }
    }
    // template, controller, etc
});

$stateProvider.state('clients.client', {
    url: 'client/{id:[1-9][0-9]+}/', // as this is a substate, this gets appended the the parent state's URL for an end result of something like /#/clients/client/1
    resolve: {
        client: ['$stateParams', 'clients', function ($stateParams, clients) {
            // Lookup the client in clients using $stateParams.id and return it or a promise that will resolve with it
        }]
    }
    // template, controller, etc
});

Then put a ui-view in the template for the clients state to give the clients.client substate somewhere to render.

When you first load any URL that starts with clients/ you'll enter the clients state. Navigation to and between substates will only run the substate transition code (resolves, controller, etc). Until you leave the clients parent state and return, the clients transition code will not run again.

The ui.router readme has good info about nesting states, and they a provide demo app that really helped me understand the idea of a state hierarchy. That demo bears a lot of similarity to what you're building.