Simple login page using ionic and AngularJS

Go to your command line and start a new ionic app:

ionic start simple-login tabs
cd simple-login
ionic serve --lab

View File

As we want to display our login page before the tabs you see right now, we must add a new file in the www/templates folder, named login.html with this content:

<ion-view view-title="Login" name="login-view">
  <ion-content class="padding">
      <div class="list list-inset">
          <label class="item item-input">
              <input type="text" placeholder="Username" ng-model="data.username">
          </label>
          <label class="item item-input">
              <input type="password" placeholder="Password" ng-model="data.password">
          </label>
      </div>
      <button class="button button-block button-calm" ng-click="login()">Login</button>
  </ion-content>
</ion-view>

So here we have a simple view, a small login form and a button. We will assign everything needed in the controller later, for now lets add our route so we can see our view the first time. Therefore, open up the app.js and add this state to the already existing states:

.state('login', {
      url: '/login',
      templateUrl: 'templates/login.html'
  })

You can run your app now, and you should see a view like this