Chapter 4 - Add Navigation/Routing

In the last chapter, we learned how to add a new page to our application. In this chapter, we will learn how to add navigation/routing.

1. Add route for new page

Open file “my-app\src\app\app-routing.module.ts”, you should be able t see something like:

1
2
3
4
5
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
  { path: 'my-page', loadChildren: './my-page/my-page.module#MyPagePageModule' },
];

Here is where you can add/remove/modify routes.

This line should be auto-generated when you create a new page using ionic generate page “my-page”: 

1
{ path: 'my-page', loadChildren: './my-page/my-page.module#MyPagePageModule' }

Read More

Chapter 2 - Create Ionic Application

In the last chapter, we learned how to install Ionic. In this chapter, we will learn how to create a new Ionic application.

1. Create new Ionic project

Open command prompt/terminal at the directory where you want to create the app, then run:

1
$ ionic start "my-app" blank

It is going to create a folder called “my-app” with essential files and then install all the essential packages. This process will take several minutes.

Read More