What are Views?
In Ionic, views (sometimes called templates) are where the markup of the page resides. The views can support data binding. If you ever used the Handlebars framework, it is very similar.
Login View
Lets create our first view, the login page, that will ask users to sign in to their accounts. It’s a simplistic view with only two inputs and two buttons.
The ng-model directive binds the username and password input control to the scope’s properties. It will create the property on the scope if it does not exist. We will later access the scope in our login controller, which we will code later, to retrieve the credentials.
The ng-click directive is used to specify the app’s behavior when an element such as a button is clicked. In our login.html, it will activate the login function in our login controller.
Finally, we add a button to navigate users to the account registration view using ui-sref. We use ui-sref to activate a state which will deliver the corresponding view. We will add states to our app shortly in the next step of the tutorial.
The login view is rendered below:
Register View
We added a button to register an account on the login view. Lets now create the view in our register.html file. The template will look remarkably similar to our login view. The main difference is that the ng-click will call the register function instead.
The register view is rendered below:
Member Only Area View
When the user is successfully logged in, they will be directed to member’s area. Our member’s area will allow the authenticated user to logout.
The member view is rendered below:
Ionic App: A How-To Guide for a User System 