Exercise (Video): Getting Started with your Ionic App

Now that we have examined how Ionic and Angular come together to provide

an excellent environment for us to configure and build our Ionic application,

it's time to move on to start our work on

building our own great application in this course.

If you have taken the previous two courses on Angular and Bootstrap 4,

you'd have realized that we have been working on the conFusion app,

which is for a restaurant.

So, in this exercise,

we're gonna add in a few new pages to our Ionic app and build out

the basic structure for our Ionic app for our conFusion restaurant.

Now that you have seen the structure of our Ionic app in the previous lecture,

let's now start off by adding a few new pages to our Ionic app.

This is where we use the generate facility provided by

our Ionic CLI to generate a few pages and add it to our Ionic app.

So, let's start out by adding a few new pages.

So, we'll say ionic g for generate – you can

type out the entire generate if you want – and then say page,

and we'll add an About page to our application.

Then, we'll add a page named Menu

and a page named Contact.

So once we complete generating these three pages,

you will see that Ionic would have added the three pages to our Ionic application.

Going to the Ionic application in Visual Studio,

you see now that we have three new pages added into our Ionic application.

In the pages folder,

you will see that there are three folders created: about, contact and menu.

Now, in this application,

we no longer need the list page,

so I'm gonna simply go and delete the list page and remove it from our application.

We will build our Ionic application around these four pages: About,

Contact, Home, and Menu.

Let us now start integrating our pages into our Ionic application.

To do that, we will first go into the app.component.ts file.

And then, first thing that we will do is remove

the list page because we no longer need that, and also similarly,

remove the list page from the set of pages

here because we no longer need the list page and we have deleted the page.

Now, we're gonna add in the three new pages that we have added in.

So I'm just going to copy this and paste this in and then edit them.

So we will add the AboutPage from the about folder,

then we will add the MenuPage

from the menu folder,

and also we will add in the ContactPage from

our contact folder in the pages folder of our application.

So, now, our application has four pages.

So, once we do that,

we need to configure the list of pages here.

So we see that this particular variable here is

an array that contains information about the list of all the pages in our application.

We already have the HomePage,

so I'm gonna copy that and then add in three more pages there and edit them out.

About, then Menu, and Contact.

We'll say About Us,

Menu and Contact Us.

So that's the titles we'll give to that four pages,

so the corresponding pages would be AboutPage,

then this would be MenuPage,

and this would be the ContactPage.

We will soon go into these pages and start editing the code for these pages in order to

build up the various pages and their corresponding views in our Ionic application.

Not only these, I am also going to add in Ionic icons to these pages so that each of

these pages in my menu will also have an icon right next to

the name of the page in the side menu for our Ionic application.

So to do that, I'm gonna fix up this pages' description here,

and then add in a new variable here called as icon,

which would be able to type string.

Pretty soon, you will see how we make use of Ionicons,

which is the Ionic's set of icon support that we can

use within our Ionic application, so Ionicons.

And then, obviously, you see the red squiggle there saying that this is not correct,

so I need to add in the corresponding icons for this.

The icon for Home would be, obviously, named home.

The icon for About Us

would be named information-circle.

Now, you would see that these icon names that I give here,

I obtained them from consulting the Ionicons documentation,

which is part of the Ionic documentation,

and link to which is provided in the resources for this particular lesson here.

And for the Menu,

I will choose the icon as list-box.

You'll pretty soon see what these icons look like when we build up our application.

For the Contact, I will use the icon as contact icon here.

So, with this, my

app.component.ts file is all fixed up to integrate the four pages.

Not only this, we now need to go to

the app module and then import these pages into the app module.

Only then, these pages will become available to use within our Ionic application.

So, what I will do is I will copy these three

because I'm going to import exactly these three pages into my app module.

So let's go to the app module,

and then you'll see that we have the HomePage and the ListPage.

Since we no longer need the ListPage,

I'm gonna replace that with the three new pages

that we have included into our application: the About,

Menu, and Contact page.

Once we do that,

we also need to add them to the declaration,

so I will go in here and say AboutPage,

MenuPage, and ContactPage here.

Similarly, going into the entryComponents property,

I will add in the AboutPage,

MenuPage, and ContactPage to the entryComponents here.

With this, my root module,

the app module is also fixed up to include all the pages.

Wonderful.

Next step that I would like to do is to go into the theme

and then fix up a few color variables there so that I can theme my Ionic application.

So when you saw the Ionic application in the browser,

you saw that the Ionic application was very bland and it had no colors in it.

So I'm gonna now start modifying it to add in a few colors to my Ionic application.

So, going into the variables.scss file here,

you see now that from your knowledge of Sass,

you see some things being declared here – we're

importing some CSS code or SCSS code from here,

and then also included a font path in there as a variable.

And then, as you scroll down,

you'll see that there are a bunch of colors already defined here.

And you can add in more variables to your application as you go along,

and then also the fonts and so on,

so this is a well-organized structure.

And also, you see that we are importing the Ionicons here into the variables.scss file,

and that's why we're able to directly include the Ionicicons into

our application as we did in the app.component.ts file.

So, coming down to the colors,

let me edit the colors.

Now, these colors I have chosen by consulting

the Material Design Color Swatches documentation;

and so I came up with this list of colors here.

For the primary color,

I will choose 673AB7.

This belongs to the deep purple group of colors,

so this is one color of purple.

I will also add another color called primary-dark.

So we can even add our own colors if you want.

And this one would be 512DA8.

This is a darker shade of the same purple.

Then – sorry.

Then, we'll have a primary-light color

which would be 9575CD.

Again, these I have chosen by, as I said,

consulting the Color Swatches for Material Design.

Primary-pale, which I would designate as D1C4E9,

and then the accent color,

FFC107, which is an amber kind of color.

This color scheme is exactly what I used even in the Angular course.

Then we used the deep purple prim in the Angular course for the Material Design .

So, that's the same theme colors that I have used also for my Ionic application.

Now that we have edited the colors,

going back to the app component,

something that I would like you to pay attention to

is when you scroll down to the bottom of the app component,

you see this method called openPage here.

So, this openPage method is gonna be called when you

click on any of the buttons in the side menu of our application,

and the corresponding page information is gonna be sent in as a parameter to this.

And then this is where we will use this.nav.setRoot,

and then we'll say page.component.

So, this page.component, the component is what exactly we

use as the value here when we specify the pages.

And also, the setRoot method basically sets this

as the root of our navigation stack that we use.

So, when we use the side menu,

each of the pages that are listed in the side menu will act as

the root of the navigation stack that we're gonna build up.

We'll learn about the navigation stack more in the next lesson of this module,

but I would like you to just pay attention to this particular usage

here and remember this and then we'll come back to find out more about this.

The use of the nav, as we saw,

the nav is a parameter that we have here,

which is set equal to the Nav,

which is imported here from the ionic-angular here.

So, this is what sets up

the navigation support that Ionic has built in into its framework.

Now, we will go into the app.html file and then fix

this up with the colors that we want to add to this page here.

So in here, for the ion-toolbar,

the way we add colors to any elements in

our templates is simply say color and then add the color.

So, for the toolbar,

I will add the primary-dark color for the toolbar.

And then I will change the title to the name of the restaurant.

And then we'll come down to the ion-content, and in here,

for each of the buttons,

I'm going to add in their color value as primary-pale color.

And also, at this point,

we may want to take a look at the definition of

this button here – so you see that we are using it as an ion-item,

and then here you see slash ngFor "let p of pages".

You already have seen the pages variable in the app.component.ts file.

So we are iterating over the list of pages there,

and the note how the click is configured here.

So when you click on this,

then it will pass the corresponding page as the parameter to the openPage method,

whereby that particular page will be set as the root of

the navigation stack that we're gonna use within our application.

And also, the use of p.title there,

so we have set up the page titles in the array that we have in the app.component.ts file.

So I want you to pay attention to these little details that we have here.

And also, for each one of these items,

I am also going to add in the icon for each ion-content.

So this is where we will use the ion-icon directive here,

and then the ion-icon will take the name

as the parameter and then we will supply the p.icon.

Recall that we had set up the icon property for the page JavaScript object there.

And then I will position this in the left side here and then close off the ion-icon.

So, if you would want to add the Ionic icons,

this is how you will add Ionic icons.

The item-left means that the icon will position to

the left side for this particular button.

You can say item-right to position it to the right side,

and then the Ionicon takes the value of the icon like this here.

So this is what specifies the string that gives

the name of the specific icon that I want to use in my template here.

So with this, we have fixed up the app.html page.

Let's now go and fix up all the pages so that they

start using the brand colors for our restaurant.

So we had already set up the colors in the variables.scss file.

To continue, we will go into each of

these pages and then we will work on the templates for each of these pages.

So, when you open the about.html for the About page that has been added,

you will automatically notice that there is an ion-header in here,

and then there is an ion-content in here.

So the ion-header helps us to define the navbar or the toolbar at the top for our page,

and in the ion-content is where you will enclose the content

that you will use within this particular page,

the view of this page in our Ionic application.

So, going in here,

I will add in – so, recall,

that each one of these is set as the root of the navigation stack here,

so each one of them I will need to add in

a menu icon to the toolbar so that the menu icon will be displayed at the top.

If you look back at the Ionic application in the browser,

you see that the Home and the List had this menu icon to the left edge in the toolbar.

I want to add the same thing to these pages also.

So, to do that, I will go into the home.html,

and then I will see that we have here this button that-that has been added in here.

So I'm just gonna copy this button from the home.html page and then go to the about.html

page and then add that same button configuration also in front of the ion-title,

the title for this page.

What does this button do? See here,

this is button ion-button menuToggle.

So, menuToggle, this is the one that will toggle

the side menu – it'll show and hide the side menu when you click on this button.

And the note, the use of the icon here.

So, ion-icon name="menu" ion-icon here.

So that is the button that we are using.

And for the About page,

we will set the title as About Us.

Let me go to the contact.html page and do exactly the same thing in contact.html.

Again, add the menu button,

and then we'll change this to Contact Us;

and go to the menu page and then add in the button,

and then change this to say Menu.

With this, we have completed all the updates to our application.

Let's save all the changes,

and then let's go and take a look at our Ionic application in the browser.

One last thing that I forgot is to add in the colors for these navbars,

so let me add in the color as primary for all the navbars in all the four pages.

So, let me add in the color primary for the About page,

for the Contact page, for the Home page,

and for the Menu page.

We are adding the color to the navbar here,

and then save all the changes.

Going to our browser, walla!

You see our Ionic application coming out alive with all its bright colors and framing.

So, here, we have the Home page.

Then, when you click on the link,

you see the Menu here.

You also see the icons for each of the menu items included into the Menu.

You see the color of the header in the side menu.

And also, same thing in the Android view of the same application,

so you can notice the slight differences in the way the icons are rendered on the two.

So this is the Ionic's adaptation to the two native platforms.

Going to the About page,

you can see that the About page is also configured.

You see the menu button there.

Again, clicking on the menu button,

you can go to the Menu page,

and then you can also go to the Contact Us page.

Same thing in the iOS version of our app.

So, it's all been built up very well to get us on

our way to develop our wonderful Ionic application.

With this, we completed this exercise.

In this exercise, we have added in pages by using

the Ionic CLI's generate approach for adding in new pages to our Ionic application.

We have integrated the pages into our Ionic application.

And also, we have themed our Ionic application using

colors that we set up in the variable.scss file.

With this, we completed this exercise.

This is a good time for you to do a git commit with the message "getting started."

In case you forgot,

you need to have the Ionic serve --lab always

running so that when you make changes to your Ionic application,

it'll be automatically be compiled and then rendered into your browser.

Explore Related Videos

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

Conoce a los instructores

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.