Introduction and Project Goal
Hello everyone, my name is Paulo Alves and on this video we are gonna continue the development of the project we started on the previous videos using the Ionic framework. And here our goal is to create two pages: the login page and the registration page, so let's start.
So I am here in the main folder of the project and we can see the Ionic code that was created with the sidemenu template. If you don't know what I'm talking about, up here you can see a link where you'll be able to see the video where I have created all this structure here. So let's go to the browser to remember how the project is for now. It's just a home page with a sidemenu, nothing else.
Generating a New Page with Ionic CLI
Okay, still in this video I'm going to remove this template code here, but first let's create a new page using the Ionic CLI to replace that template page later. To create a new page I come to the command line and type ionic generate page and then I will choose where I'll create a page and what will be the name of that page. I like to create those pages in a folder that is only for them, so let's create the page in the pages folder and the page I'm going to create is like the loading page of the application.
In the mobile world could be that splash screen that appears when you open a new application, but we have to remember that this code here it can be also executed in the web world. The web world will not have that splash screen page, right? This page that I'm going to create now will be the splash screen of the web world and in this case I'm going to name this page as loader. I press enter and a few seconds later the page is created.
Viewing and Modifying the Page's HTML
Let's now take a look at this page in the browser. Then to do this I have to replace this /folder/inbox by loader, which is the name of the page I just created. Here it is. It's nothing much for now. We only have one header here with the name loader and an empty content.
If we go back to the console we can see that six files were created for that page, what we are going to do now is to go through each one of them and explain how they work. Let's start here at loader.page.html. This file here contains everything that will be shown in my new page. For now it has only one header which has the title loader and has an empty content. I'll put here splash screen in the content so we can see the changes that will show up in the browser.
Alright, so here we go... splash screen. I'll save it, go back to the browser and then the splash screen appears here in the content.
Using an Ionic UI Component (ion-spinner)
But what I want to happen here is that this page shows a loading icon here in the middle of it and I'm gonna need only that for this page, so I'm going to remove this header here that I don't need. And let's see how it looks on the browser. Okay without the header, just the splash screen text.
Well to create the structure of my page the Ionic provides a series of components that I can use to set up my screen. You can see here on this page all the components that the Ionic has. The component that I'm interested in is here in the session progress indicators and it's this component called ion-spinner. Here on the right side you can see an example with a working component and here below we can see some code showing how to make it work and also some other instructions for using that component.
So the component I like the most here in the loader is this crescent here, so what I'm going to do is to find it here in the example and I'll copy and paste it on my page. Let's go now to the browser screen and see how it is. Cool, we are now showing an icon up here but it's black. As my application is a recycling app I think it will be much better if it has a green color, right. We can come here at the Ionic component page and see what colors Ionic has to offer to us, which are these ones here, the bottom colors.
I have the normal color of the Ionic which is blue, it has a secondary color, it has a green color, it has a yellow alert color, it has a red error color or something like that. So in order to put the color of my component as green I just need to put here color equals to success. And then we come to the page and see that our loading icon really turned green.
Centering Content with CSS Flexbox and SCSS
But it is kind of weird that the icon is up here right at the beginning. What I want to do is to put it here in the middle of the screen and to do this we have to modify our next file of interest, which is the file called loader.page.scss file. This is where the page style should be, like placements and colors and sizes and everything else. So what I want to do is to align the icon right in the middle of the content. To do that I will use a style technique called flex.
First I have to come here on the page and create a container for this component that I just created. I can create this component with a div and I'll call this container, I'll say that it has the class flex-center because I'm using the flex technique and I want to put it centralized. Now I'm going to come back here to our scss file and let's add the property of this container that I just created. First I will identify that html container here in my scss as .flex-center. Okay this dot allows me to identify a class of a component. The .flex-center would identify this class.
Okay, what I'm going to do now is to inform that the display of this class is of the type flex. We can go back here in the browser and see that nothing has changed. Now here in my scss class I want to inform that I will justify the content to the center of the screen. Okay I'll save it and let's see what happens in the browser... now the icon is here in the horizontal center of the screen now. You only need to put it in the vertical center also. To do this I have to go back to my scss class and inform that I want to align the items to the center. I will save it and now we'll see in the browser that it is aligned to the center.
It may not look like it but yeah it is aligned with the vertical center of that container. The problem is that the container I just created doesn't fill the entire space of the screen. We can see this by coming here in the container tag on the html, placing the mouse on top of it and seeing that it occupies only part of the screen, 28 pixels to be more precise. So what I have to do here for it to be in the center of the page is to make this container to have a height of 100 percent. I'll save it and in the browser now we have the icon aligned in the middle of the screen.
Understanding Ionic's Routing Module
And now I will raise a question for you: how did I know that in order to get into this loader page I had to remove the /folder/inbox and put here loader? Well this thing we can identify using three files: the first of them is the app-routing.module.ts and this file contains all the macro roots of our application. The first line here informs me that when the url path is empty I will redirect it to the folder/inbox path. The next line tells me that when the path is folder/:id I will load the folder module. These two dots are a url parameter that can actually receive anything.
For example if I have a page that shows the details of an item and I have three items, instead of programming it like this and saying that item/one loads the item one's module, item/two loads the item two's modle and item/three loads the item three's module, I can just change this number here with an id with the two dots here and in this case I'm saying that when the url is item/something I'm going to load this module for that item.
In this case we are doing this with the folder: when I have folders/something I load the folder module. And the next line is from the page we just have created. It identifies that the loader page is going to show the loader module. Okay now let's go to the file that represents the loader module which is the file loader.module.ts. This file identifies that the module of our loader page needs other four modules to work: CommonModule, FormsModule, the IonicModule and the LoaderPageRoutingModule and right here I'm saying that this module depends on the LoaderPage, which is where the code of the loader page will be.
Page-Specific Routing Configuration
But as for now we are talking about routes let's enter the loader-page-routing.module file. Here you have a very similar structure to the one we saw on the app-routing.module.ts, right, but here I have a single empty route that loads the LoaderPage component. So by joining the route that we saw here on the app routing module, which is loader, with the route that we saw here in the loader routing module, which is empty, we get to the url of our page which is /loader. And if I want to change the route from empty to test, for example, then we'll see that our page won't load anymore because it's just loader and I will need to put here loader/test and then our page will load again. But let's undo that because I don't want it to be loader/test, it will be just loader empty.
Exploring the Page's TypeScript File
Now let's enter in the loader.page.ts file. This file will contain all the actions of our page. You can see here that our LoaderPage has a selector which is app-loader. This selector is used to tell me that if I want to use this loader in some other page I can just reuse it this way in the html. As an example I'll get the folder page selector, which is this one here: app-folder. I'm going to copy and paste it here and I'll make this call on our loader page to put that folder page inside the loader page and to be able to reuse this code of the folder I just need to do that.
I'll save it and on the folder page you'll see this change... actually it did not appear because I have to declare that our loader page is using the folder page. I'll save it and that will appear here at the bottom part of the page can you see the menu here from that folder page? So now it's showing up here the rest of the page is not showing up because this code has not been configured to be used like this. Okay so now that we understood the selectors, I'm going to undo the code changes and let's keep talking about the loader page file.
This file here after the selector property, I have the templateUrl property. This template url informs you that the html file for this page is the loader.page.html. And after that I have the styleUrls that informs us that the styles file of that page is loader.page.scss. Here in the code of the page we have a constructor and we also have the ngOnInit function. This function is always called when the page loads for the first time, so to show this to you I'll write here console.log('hello here'). I'll save it and what this will do is to show on the console the text hello when the page loads.
Cleaning Up the Default Template Project
What we just did here was to create the first page of our project and explain each of the files that make this page work. What we are going to do now is to clean up our code and to remove the unnecessary things that come in the creation of the project with the ionic template.
To do this I'm going to remove that initial page just to remind you the folders page. To do that I just come here in the app folder I can see the folders folder which is the screen that was created with the template and I'm just going to delete that folder. What happens now is that we will have some errors in the application, so let's remove those errors. First here in the app-routing.module.ts file we can see that this error is happening because the folder module is no longer being found and it's no longer being found because I just deleted it. So I'm going to remove this line. There will be no more errors and I'll also change the initial path for it to be redirected to our loader page. After doing this I'll save the changes and we'll be able to see that our page initially loaded is our loader page. Alright this was the only place where there was an error in the application.
Customizing the Main App Component & Side Menu
Now we are going to remove other codes that are unnecessary. As an example one of the codes is here in the app.component.ts file. This file is the first file that's loaded by the application it is here in this file where we can put the codes that launch the application, for example the code that gets the data from the user that's logged in or any other code required to launch the app. This file has some properties that are no longer necessary for example. This appPages here before it identified all the pages that existed in the app, but now as they don't exist anymore I can just remove them, but before I remove let's see how it works.
Now they show up here in the menu right, all the folder pages. Now I'll make this array empty and in the menu those pages will no longer be there. Now we are going to remove this part of labels that are not necessary anymore and for that I will simply remove this labels line of code. I'll save it and we will see that it will no longer be there anymore. Okay I just have the text labels now. Let's get this text out of here as it's not necessary anymore also I have to go in the html code of this folder and to know which html code it is I only need to see which html it references which is the app.component.html. We can see that labels part is down here inside of a list, so as I don't need this list I'm just going to remove it. Save that and now we come here in the app and see that the labels are no longer there, but here on this page you can see an inbox text and an email. I will change the text here to Reciclica as the title and here as the note I'm going to put recycling app. Let's see how it is now. Good Reciclica, recycling app.
Creating a Second Page (Login)
What we are going to do now is to create our login page and we do it in the same way we did to create our loader page. We go to the command line and type ionic g, notice that last time I wrote generate here and this time I'm writing only g, the two options are possible so let's keep going. I will create a page in the pages folder and that page will be called login. I press enter and here we can see that the login page structure has been created and also the app-routing.module file already has the instruction for the login page. If i come back to the browser and put the login route in the url it will show us our login page and that exactly what happened.
