Welcome to the 2. lesson of the Ionic Crash Course!
Today is all about navigation inside the app we started in the first lesson. We want to change the appearance completely so we end up with a tab bar, a very typical pattern for all mobile apps.
To achieve this, we have to change a few parts and add new files to our project so we got a few more pages our users can navigate to!
1. Changing Our Project Structure
First of all we want to get rid of the current src/home folder. We don’t have any specific hate about that page, but it was created without a module file and is not working nicely with Ionic lazy loading, therefore simply remove that folder!
We also have to remove the reference to the HomePage from our module, therefore also open the src/app/app.module.ts and change it to:
Now our app won’t work anymore and you might get a few errors, but we are also not yet done with our restructuring process.
We now use the Ionic CLI to generate new pages. Yes, the CLI can handle this for us!
UPDATE: In fact starting with Ionic 3.5 the CLI is not creating the module file for us anymore at the moment. Hopefully this will be back soon as an additional flag.
The command called generator can create different files inside our project, and the first type we use is page.
Go ahead and run these commands one by one from your command line inside the folder of your app:
This will now create 5 new folders inside the pages folder.
If you don’t see a .module.ts file next to your SCSS, HTML and TS file in the folder of each page you need to create one now. This guide uses lazy loading (more on this in a second) and the current Ionic CLI might not generate these files for you, but it’s no problem to create them. They basically look like this for let’s say the src/pages/people/people.module.ts:
Basic Module file
Just the change the highlighted lines to the names of the other pages and create the module files for them as well in the folders of the pages. If you have any problems setting this up, just let me know!
All of those files are not yet connected to our app, so we have to tell Ionic which is now the first page (after we deleted the HomePage).
As you already know, the entry point for our app is inside the app folder, and especially the first file is referenced inside src/app/app.components.ts, therefore open this file and set the rootPage of our app to be 'TabsPage‘:
You might wonder why we set the rootPage to a string?
Well, this is Ionic lazy loading in action!
If we would use only the name like TabsPage we would also need to import the complete module of that page, and all of this would happen before we actually use the page!
But by using strings here, Ionic handles everything internally and only loads the TabsPage when it is needed by it’s name.
Quite cool, isn’t it?
This helps to decrease loading times, especially when starting our app. Of course there is a lot more to tell about lazy loading and how to improve the process, but for now we are good and can actually start our app again!
2. Creating a Tab Bar
Although we created a TabsPage and set it as our rootPage we have no tabs. What the?
Cmon, you didn’t expect it to be so easy, right?
But actually we are only 2 easy steps away from a working Tab Bar, so let’s change the HTML of our current first page which is inside src/pages/tabs/tabs.html.
We use the syntax for creating an Ionic Tab Bar, which consists of multiple tabs.For every single tab we have to specify a root page, and if we like to also stuff like a title or icon. Go ahead and change all of the contents of src/pages/tabs/tabs.htmlto this:
By using them we can easily style our app and directly get cool icons without adding anything else!
We have told the tabs which is their first page, but as we have used the brackets around the word root we know that this is referencing a variable inside our class! If you didn’t knew it, you now know it.
This means we have to also apply a few changes to the src/pages/tabs/tabs.ts, as we need to create the 3 variables we used inside the view.
Each of those will be set to one of our created pages – just like we did in the beginning where we referenced our TabsPage as first page!
Therefore open your src/pages/tabs/tabs.ts and change it to:
First, our openDetails uses the current navCtrl to push a new page. Again we use lazy loading and therefore only the name as a string!
Our second functions shows how we can also grab a reference to the current Tab Bar and manually navigate to for example the 3. tab by using select(2) (the counting starts at 0 like always).
If we now click the first button, we see a tiny animation that brings in the next view. And what we also see is that we automagically get a back arrow at the top!
This is done by Ionic internally, as we have pushed a page on the navigation stack. We can also change this behaviour or add a button on our own, but for now you can enjoy this comfort!
When you push a page, many times you go into details of something and therefore need a way to pass parameters to a next view. We can do this super easily, the only thing we need to add is an object to our call of push like this:
Now we also push a data object to that page and can extract it inside the next page. This value is stored inside the NavParams which can be injected in our constructor.
Also, we want to add a function which can move one step back in our view stack, so we change your src/pages/film-details/film-details.ts to: