Payment Success Page AngularJS

Question

What's the correct AngularJS way to do this:

I have a page that accepts some user info and payment (via Stripe).

Upon success of the payment, I need to display the user a message to say it's been accepted.

Do I combine both views in the same partial (I suspect not), and then display one depending on the status of some scope variable, ie $scope.paymentAccepted .

<form ng-if='!paymentAccepted'>
    ...
</form>

<div id='paymentSuccess' ng-if='paymentAccepted'>
    <p>Your payment has been accepted</p>
</div>

or do I direct the user to another location using the $location service provider and then use a separate view and controller from there (I suspect this is the way).

Call this being fussy, but I want to stop users accessing my payment page directly which is why I am tempted to do this the first way.

What is the correct way of dealing with this?

Answer 1

If you use ui-router you could have a child state of your payment state that isn't URL addressable. You then just need to inject $state to your controller and transition to the relevant state on successful completion of payment, eg $state.go('home.payment.success') .

Edit: you'd actually reference the child state as $state.go('.success') assuming you were transitioning from the parent ('home.payment' in this example).