[MUSIC] As I have mentioned in the previous lecture, Ionic makes use of Angular for developing the Ionic application. Let's spend a little bit of time to understand how Ionic leverages Angular for developing an Ionic application next. To understand how Ionic and Angular retract, an Ionic application is basically an Angular single page application. We have already learned about Angular single page applications in the previous course. So all the Angular features that we leveraged in the previous course for developing our Angular application, are also available as part of your Ionic application. Now Ionic users, as I said, Angular for developing the Single-page Application, in Ionic's case, we have pages that are used for developing our Ionic application. A page in terms of Ionic is equivalent to an Angular component. So you would see that Ionic uses the Angular component to support the various pages that form part of our Ionic application. Ionic also supports page navigation using a Stack like behavior just like the way the native applications, developed in native platforms like iOS or Android support navigation. So, we will learn more about the navigation supporting Ionic in one of the later lectures in this module. So when you look at an Ionic application, you will see that Ionic adds its own set of components that we can leverage in developing an Ionic application. And also, its own set of services and directives that can be used while you're designing your Ionic application. The component APIs include classes like Checkbox, Toggle, Item and so on that we will make use of when we double up the templates for our Ionic application. You will see Ionic playing a similar role to what we have seen with the Angular material module that we used in the Angular course. And also, Ionic has its own service APIs that are classes like the menu controller, the config or the platform that we will see that leverage in our Ionic application as we develop through in our rest of the course. So these are services that are provided by Ionic that can be injected into the components that we develop in our Ionic application. And also, you will see me using Ionic directives things like ion-view, ion-content, ion-list, ion-tabs, and many more. When we develop the templates for our pages in our ionic application. So you would, having experienced the use of Angular material in the previous course, you will begin to see similar patterns when we develop our Ionic application in terms of how the templates are designed. When we used Angular material, we used the Angular material directives when we developed the templates for our Angular components. Similarly, we will use the Ionic directives when we develop the templates for the Ionic pages, within our Ionic application. Now that we have scaffolded out a simple application using the Ionic CLI, let's pay a quick visit to understand the structure of our Ionic application. Taking a look at our Ionic application in an editor. So here, I have my Ionic application project open in Visual Studio Code, and I'm going to quickly take you through a tool of all the set of files that have been scaffolded out by Ionic CLI on our behalf. And you would notice that, all the basic structure for our Ionic application, and all the setup for preparing and serving up our Ionic application and even packaging it using the Cordova, are all set up for us by the ionic CLI. So taking a quick tour through this, you will see, let me start by looking at the package.json file. So as you would expect, since this is an application double up using that node modules, the package.json file contains typically all the information about the structure of this application, so you will see a bunch of scripts given here, the dependencies for this application. So here you will see that our ionic application is dependent on Angular ,so it is importing a bunch of Angular library is here. And then also the Ionics specific libraries also are imported here, and also the development dependencies. So you see the app scripts the CLI plugins and so on that are imported here, and also TypeScript. Because our Ionic application is developed using Angular so we are using TypeScript also for writing the code for our Ionic application. And in addition to that, you will see an ionic.config.json file where you will set up a few things that our Ionic application requires. And then you will have a config.xml file again. We will not spend too much time in this at this moment. But whenever we require to know the details of these will pay a visit to these specific files to understand what is being declared in these files. Similarly, you have a gitignore set up there,so that when you do a Git repository check in, you will not check in those files that are not needed to be stored in your Git repository. And then, you have a www folder. This is where your Ionic application will be built first before being packaged into your Cordova. We will see those details later on as we proceed further in this course. The major full that were all your ionic application related content that we will be, actively working on is in the source folder. So you recall from your Angular course that we had the source folder in our Angular course where our app related files where all stored. So similarly in the ionic application, the source folder is where we will store all the files that are required by our Ionic application, and we'll be working with these files here. And also, you will see the node modules folder here. This you would expect in any node base application resources where you will have specific resources that require by our Ionic application when it is being packaged for the two platforms, the iOS and Android. We will look at these in a bit more detail in one of the later exercises in another module to see what is required here. But you will see some .png files there initially being stored there. The main action for us would be in that source folder. So inside the source folder you will see that, you'll start with the index.html file, so as you expect in Angular application to start with an index.html file. So that is where your action for your Ionic application also takes place. And you will see that we have imported a bunch of Files in here through the meta, and then also some scripts here that are required by Ionic application. Again, going into the assets folder, this is where you will store whatever assets in terms of files or images, for example, that you will need for your Ionic application. As we develop our application, we'll add in more into this particular folder. app folder is where your Angular part of your Ionic application is configured. So we'll pay a quick visit to these files in a short while. The pages, as I told you about our Ionic application, are all stored in this pages folder. Currently, you will see two subfolders here called home and list. We will learn why we have these pages in there. Similarly, in the theme subfolder, you will have the files that are required for theming your Ionic application. In the exercise that follows this lecture, we will be working with this theme to set up a few colors for our Ionic application here. So we'll pay a visit to this and understand some details in this variables.ses folder. As I mentioned, Ionic uses Saas for its styling, so that's why you will see the scss code inside this variables.scss file here. Now let's begin our journey into the actual structure of our Ionic application. In the app folder here, the main.ts file is the starting point. So if you look back at your experience with your Angular application, you also had a main.ts file there. This serves exactly the same purpose in the Ionic application. And then you have any global scss code that you want to share among all the components of your application stored in the app.scss file. The app.module.ts file serves the same purpose as the app module in an Angular application. So here you will see me importing a whole bunch of modules from the Angular libraries, and also your pages which are nothing but Angular components. So all these need to be imported into your app module so that you can configure them within your app module. And inside the NgModule from your experience with Angular, you'll see that we have the declarations. And inside the the declarations, you have all the pages that you develop in your Ionic application being included here, because they are Angular components. Also inside this entryComponents property of the NgModule decorator, you will see me also importing these pages here. And then you are importing all the modules that you require for your application. So you see the BrowserModule being imported here just like the Angular application. And then you have an IonicModule being imported here, and that is what enables you to bootstrap your Ionic application. And then you have a bunch of providers that will be required. And these are some of the providers or services that Ionic provides for us. So we will use the SplashScreen. We'll look at that in a little more detail later and a few other things then. If you develop your own providers in your Ionic application, you will also need to include them here. And then, of course, this exports the class AppModule. So this is the starting point, the root module for your Angular application, which is nothing but your Ionic application in this case. Then the app.html file is where the initial template for our Ionic application is developed here. So paying a visit to that, you would immediately see the use of various Ionic directives here. So you see an ion-menu here, an ion-header here, an ion-content here. What do these all mean? So you see that in this particular Ionic application that we have scaffolded, we have scaffolded out an application that has a side menu and the main view of our Ionic application. The side menu itself in your Ionic application is defined inside this ion-menu here. And inside this ion-menu, this is where you'll structure our side menu, which contains the menu for our Ionic application and it has a header. So you will see that all Ionic templates would typically have an ion-header and ion-content. The header defines the toolbar or the header for our ionic page that we will use in all our ion application. And then the ion-content is where we will have the rest of the content that forms the part of the view of the page for our Ionic application. So inside here, in the ionic-header, we have an ion-toolbar set up here. This ion toolbar helps me to define the toolbar or the header bar for our Ionic application. And inside there, you see me using an ion-title with the name Menu here. We're going to leave it as such for the moment. In the next exercise, we're going to come back and then modify this a little bit to set up our side menu for our Ionic application that we will develop in this particular course. And then down below here, you have the ion-content. And inside the ion-content, you will see me using the ion-list Ionic component. As you would expect, this is nothing but a list of items. And inside this list, you will see me using a button here. And inside the button here, so button is just like the button you used in your Angular module and in your bootstrap course. Similar purpose here, so this is nothing but the standard HTML5 button here. And then you will see me using a bunch of other things here. So you have an attribute here called menuClose, which helps us to close the menu. And you see the use of that ion-item, and ion-item defines an item in an ion list. It can be either used as its own HTML-like element, or can be added as a attribute to a button as you see here, *ngFor. Knowing your Angular knowledge, you know what it is doing already. And then this click. Obviously, you expect to know what it is supposed to be doing here. And then we are defining something in here, saying p.title. We'll look at the code for this app.html [INAUDIBLE] skip code, but understand what does ps and how we are deriving this title. So we see that we are constructing the side menu for our ion-content application using this structure here. In addition to the menu for my side menu, it also contains this other element here called ion-nav. The ion-nav is the one that supports navigation for your Ionic application. You will see me using ion-nav in many of the templates as we go along. The ion-nav is the one that supports navigation, but Ionic supports. Navigation through the pages and so on. We'll examine that in a bit more detail in one more later lectures. And you see the use of root so you see the attribute being specified here and the rootPage from your Angular knowledge you understand exactly what this is doing here. And then also a few other attributes for the ion-nav being specified here. So your root view that you be see in our ionic application is going to be attached here as a rootPage. Now let's pay a visit to the corresponding TypeScript file to understand what does a rootPage which should be a variable in our TypeScript code, and how this is made use of within our ion-nav here. So paying your visit to the app.component.ts file here, this is a standard Angular file here. So you see me importing a bunch of things here. In particular let me draw your attention to the import of the component from the angular core. So this is an angular component that we are setting up here. In addition, we are importing something called Nav and Platform from Ionic Angular, so the Ionic Angular library. You are importing a StatusBar from Ionic Native status bar, and the SplashScreen from the Ionic Native splash screen. We will look at the ionic, native support in one of the later modules to understand why we are making use of this. And then you are importing the pages of your ionic application here. You are importing a home page and a list page. Recall how the icon application looks in the browser were we use the ionic serve--lab to serve up our page. And then, look at the structure of the code here, and you will start seeing the correlation between the two. And then, the component itself, you see the template URL being defined here, the app.html, so that is what we just examined in the previous step. And so that is where the app template for our component is being defined here. So this is the root component for our angular application as well as our ionic application. You will see me using something called the ViewChild(Nav) and so on, so we'll come to examine that when we look at navigation. The rootPage currently is of any type which is set to the HomePage. HomePage that we have just imported earlier which is the component, angular component, and also you see me declaring another variable called pages here. Which is an array of a JavaScript object type here containing two things a title and a component. And also later on here you will see me setting up the pages with two things here. With two JavaScript objects here. You're setting up those pages as an array here. And then look at the constructor here, in the constructor we are supplying the platform, and then the status bar here, and the splash screen here. As you know, as we recall these were configured as providers in the app module. We'll come to look at what they are doing in one of the later exercises, and then we'll say this.initializeApp. So this is what initializes here, Ionic app. So this is Ionic way of doing things. Fortunately Ionic has already scaffolded on all this code for you. And then when you initialize your app, we are seeing this.platform.ready. This has something to do with Cordoba, so when we discuss about Cordoba we'll understand why we are calling this platform ready method here, and the inside where, and then you're seeing a then. So you see the use of an Angular promise here. And the inside of then, you're saying this.statusBar.styleDefault and splashScreen.hide. So again, you are executing something here when this happens. We'll leave it at that point and then we'll come back to examine this in one of the later exercises. But I will draw your attention to how you are configuring the pages of your ionic application here. These pages are being configured here. In the next exercise we're going to include a few more pages into our ionic application, and then reconfigure our Ionic application to start developing our own Ionic application as part of this particular course here. So that is a quick tour through your Ionic application that we have scaffolded out in the previous exercise. And also looking at how Ionic is making use of Angular within our Ionic application. Now it is time for us to proceed on to the next exercise. We are going to double up our Ionic applications step by step. First by adding in a few new pages for our Ionic application in our next exercise, and then configuring our Ionic application to make use of those new pages. So, without further ado, let's move on to the next exercise. [MUSIC]
