Inside the children array we define the different possible routes with their path, and only use the loadChildren property so the pages use lazy loading directly! Note: There are also ways to use the old navigation system but I highly recommend to use this new system as it’s a lot closer to Angular core and will help you to switch over to Angular or build a web application more easily!įirst of all we create the structure for the tab bar, so open your pages/tabs/ and replace it with:Īt the top level we have our tab bar which is the the TabsPage with the view we implemented before. This process is a bit more tricky then with Ionic 3 but you’ll get used to the new routing system pretty soon. To get a tab bar we have to implement the general UI structure of it and then create the routing so all buttons open the right pages inside our app.
#Encore 5 button routing how to#
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 need to focus on our app again as we have destroyed the routing for now. That’s all we need in order for Angular to resolve a path and it results in faster loading times because the app is not loading every piece of code we have in the first file that is starting the app! Basically you tell your app at which routes (like in the address bar of your browser) should open which pages.Īdditionally we don’t have to import the real pages here because we use lazy loading and only import the path of the module file for a page.
This routing is the standard Angular routing system and what’s new since Ionic 4. Go ahead and run these commands one by one from your command line inside the folder of your app:
#Encore 5 button routing generator#
The command called generator (short “g”) can create different files inside our project, and the first type we use is page. We now use the Ionic CLI to generate new pages. 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 don’t have any specific hate about that page, but it’s not really following the best way to structure our pages and components, therefore simply remove that folder! Changing Our Project Structureįirst of all we want to get rid of the current app/home folder. 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. We want to change the appearance completely so we end up with a tab bar, a very typical pattern for all mobile apps. Today is all about navigation inside the app we started in the first lesson.