Ionic Multi-level Routing Example

This example is purely to demo multi-level routing of the Ionic Framework and Angular Router with Lazy Loading components/pages. In a real application guards would be used to load, activate & deactivate certain routes accordingly.

The about page Ionic Conference, alas...

This example is just to show off Ionic components and Angular's routing capabilities. The simple login page is just that, a mock up. It's purpose is to show off the multi-level routing.

Table of Contents

• Ionic Multi-level Routing Example
  • Table of Contents
  • Getting Started
  • App Preview
  • TypeScript Paths

Getting Started

• Download the installer for Node.js 6 or greater.

• Install the ionic CLI globally: npm install -g ionic

• Clone this repository: git clone https://github.com/Mac-DevOSYandex/ionic-multi-level-routing-example.git.

• Run npm install from the project root.

• Run ionic serve in a terminal from the project root.

• There you have it!

• Tip: See How to Prevent Permissions Errors if you are running into issues when trying to install packages globally._

App Preview

All app preview screenshots were taken by running ionic serve then using developer design mode on a retina display. NB. It has not been tested on a simulator.

• Welcome Page

  

• Login Page

  

• Register Page

  

• About Page

  

Note, the use of global background image and how it is applied in the local scss file...

TypeScript Paths

I strongly encourage the use of typescrypt paths in your projects, it will makes it easier to work out paths and minimise breaking changes when refeactoring