How to make steps or itermediate pages?


#1

I have a simple login panel something like this

<form ng-submit="authenticateUser()">
    <div class="list">
        <label class="item item-input">
            <i class="icon ion-person placeholder-icon"></i>
            <input type="text" value="" placeholder="Email" ng-model="user.email">
        </label>
        <label class="item item-input">
            <i class="icon ion-locked placeholder-icon"></i>
            <input type="password" value="" placeholder="Password" ng-model="user.password">
        </label>
    </div>
    <button class="button button-block button-positive">Sign In</button>
</form>

which is in a scope of AuthCtrl

.state('app.auth', {
    url: 'login',
    views: {
        'content@app': {
            controller: 'AuthCtrl',
            templateUrl: 'template/auth/index.html'
        }
    }
})

When clicking on “Sign In” it takes me to the profile page. Now the idea was to add an itermediate page which will have a simple dropdown to choose the context or panel into which he wants to be logged in.

The problem I’m struggeling on:

  1. I need to create the itermediate page without any controls or history.
  2. I don’t like to create a whole new controller for it, like I would when defining a new page.
  3. I would like to handle it by AuthCtrl, but I can’t define two templates for one controller. See here Understanding Controllers: Do not use controllers to…
  4. I would like to make it a simple slide like in ion-slides, but how do I switch the slide when the login was successful and how to disable swipe on the slides? The component is poorly documented.

I would really appreciate other suggestions.