Switching between views on same controller

Question

I've got a page that says "GENERATE", and it has a form on it. And then you submit the form by pressing the Generate button, and I want it to take you to a new view called "LOADING" whilst it waits for the result to come back from the server, then when the response comes back successfully I want it to take you to a "SHARE" page that allows you to share what you get back. This flow is all on 1 controller/route:

http://mydomain.com/create

At the moment my routes look like so:

.config(function ($routeProvider) {
$routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/create', {
    templateUrl: 'views/create.html',
    controller: 'CreateCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });

});

How can I do this view switching behavior, or what is the most recommended way to do it? If the response is an error I want to go back to the create page for example as well, so I need that sort of control.

Thank you!

Answer 1

Consider useing ui-router:

UI-Router for Nested Routing by the AngularUI Team!

Sample: http://angular-ui.github.io/ui-router/sample/