IONIC Section 5 - 5.4 Analyze the created project

Click here for more videos available on our youtube channel !

Hello everyone, as I mentioned, in this project we usually have a normal Angular project. If you explore the source folder, you will find the main files. As you can see, we run a normal Angular application, in the main.ts file you find absolutely nothing about from Ionic here is all the code you find in an Angular Normal web application. The "index.HTML" file also looks like a basic file, we can see the title indicating the correspondence with Ionic, but other than that it is a normal html file where we have our application root component. If you know how an Angular application starts, you should know that the "app-root" selector is selected by our intro module, which is the module we are bootstrapping, we are starting our application which can be found in the application folder, in particular with the “app.component.ts” file in which we find our selector among our components. Therefore, the content of our selector in our HTML file, so mount our Angular component "app-root", on the real DOM and any other components we include in our template and will therefore be part of our Angular application. Indeed, for this course, it is beneficial to have knowledge about this framework, however, I will try to explain to you in detail the features that we are going to have to use regarding Angular. Here is a novelty, it is the themes folder. Here we observe the extensions "SCSS" which is given to us by default for the style. This folder will be important, because if we take a closer look at this file, we see some pretty weird syntax which is actually a CSS feature heavily used by Ionic, properties custom CSS also known as CSS variables and ultimately this is not a brand new feature offered by Ionic, it is a standard CSS feature, which allows you to define your own variables that can contain all sorts of values ​​such as colors, but you can also store units, sizes, etc. You can store this you want then reuse those variables and assign them in your application. So much for the theme folder, the most interesting is of course how this app now interacts with Ionic and how is it connected? If we let's look at the "angular.json" file, we will see that if we scroll down a bit, we have a "build" configuration that is running when our application Angular build. And just below we can observe the import of "assets" and the first thing here is that we let's see that the "ion-icons" are included as assets. This is of course not the case in a standard Angular project, but Ionic has created a standard Angular project which is already configured to include these icons so that we can use them in our Angular app here. So that was the first interesting part, we also have this “ionic.config.json” file here which is very simple but it will allow you to define the application, for example we have "name" which will be the identifier of your application. In the “package.json” file we can observe many Angular imports, but we also have some Ionic imports and, what is particularly interesting is the Ionic/Angular import here. We will find that this package is used in our "app.module.ts" where we find Angular code with our "NgModule", with "bootstrap" as well. And what we're going to clear up in the next video is how Ionic and Angular are going to be able to work together?