Book Image

Ionic Cookbook

By : Hoc Phan
Book Image

Ionic Cookbook

By: Hoc Phan

Overview of this book

Table of Contents (18 chapters)
Ionic Cookbook
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Creating a tab interface with nested views


This recipe will explain how to work with the Ionic tab interface and expand it for other use cases. For example, it's possible to have additional views (that is, children) within each tab. Since each tab has its own view and state, you can also watch the tab change event. The following is the screenshot of the app:

In this app, you will learn the following:

  • How to create nested views and states

  • How to create a custom title per view

  • How to watch for state changes and inject your own conditions depending on the new state

You will also use $ionicLoading, which is a very useful directive if you need to temporarily show some content on the screen (that is, a loading indicator).

Getting ready

Since AngularJS UI-Router comes with the Ionic bundle, there is no need to download an external library. You can test this in a web browser as well.

How to do it...

Here are the steps to create a tab interface with nested views:

  1. Create a new app using the blank template and...