An important thing to understand is that an Ionic application is really just an Angular application with a few extra features and some minor modifications. Although it does serve some other purposes as well, Ionic primarily adds mobile-centric UI controls to an Angular application. Things like lists, buttons, toolbars, modals, side menus, tab bars, and so on. Ionic makes building mobile apps in Angular easier.

When we are looking at the anatomy of the project we just created, what we are looking at is an Angular application. However, Ionic does create a slightly different application than what you would get if you just created a standard Angular application using the Angular CLI.

In this lesson, we are going to discuss some of the Ionic-specific aspects of the project we just created, but we will be leaving most of the discussion of how the project works as a whole to the Basic Angular Concepts and Syntax module.

Project Structure

Your newly generated Ionic project should look something like this:

At first glance, there is an intimidating amount of stuff there - but you don’t need to know what everything does. We are going to talk through the files and folders that you will be using most frequently, and what they are responsible for. At this point, we just want to get a basic sense of the role of the different files and folders and we will discuss them in more depth later.

---

src

Perhaps the most important folder in your project is the src folder. This folder contains most of the files and folders that you will actually be working on to create your application. There are other files and folders outside of this, but you generally won’t need to touch those (much).

app

You will find the app folder inside of the src folder, and this folder holds a similar level of importance. Most of the code for your application will live inside of this app folder. As the application grows, we will add additional feature folders inside of the app folder - for example to hold features like the home page, detail page, checkout page, and so on. The default blank template we generated includes a home feature by default.

As well as these folders that will contain various parts of your application, you will also find several app files in the root of this app folder. This includes:

• app.module.ts
• app.component.ts
• app.component.html

These define the default root component and module for your application, which is sort of like the entry point for your application. This one root component will contain your entire application, and all the other features we create will be added inside of it. We are going to talk more about this in the Angular concepts module, but if you take a quick peek at app.component.html you will see:

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

The <ion-router-outlet> is what controls what component is displayed to the user based on the current route (i.e. the address in the URL bar). This is the template for our root component, and from within our root component we will want to display other components. If the user is on the /home route, then we probably want to display our HomePage component. The <ion-router-outlet> will handle detecting the current route, and then handle displaying the HomePage component. This is not exactly what it would look like in the DOM, but the general idea is that the template for our root component would now become something like this:

<ion-app>
  <ion-router-outlet>
    <app-home-page></app-home-page>
  </ion-router-outlet>
</ion-app>

If we then navigated to a different route, like /shop then the <ion-router-outlet> would handle removing the HomePage component and displaying the ShopPage component instead:

<ion-app>
  <ion-router-outlet>
    <app-shop-page></app-shop-page>
  </ion-router-outlet>
</ion-app>

Again, we are going to discuss this in a lot more detail later.

assets

This folder is used to store any static assets for your application. This typically means images that you want to bundle with your application, but you can include any kind of static asset you like in here.

environments

This is not immediately important to us, but this folder contains files that allow you to change configuration details based on whether you are using a production build of your application or not. For example, in development, you might want to have your application communicate with a test/development API, but in production, you might want to use the real API. These files allow you to automatically configure that.

theme

The theme folder holds the variables.scss file for your application, which is where you can define CSS variables to modify the theme of your Ionic application (more on this later).

www

This folder will only exist after you perform a build of your application. Go ahead and try it (make sure to run this inside of your project):

ionic build

You won’t ever need to touch this folder, but it is important that you understand what it does. The code we write for our application is compiled into code that is understood by browsers. We are using TypeScript and Angular to create our application, but this code is not natively understood by the browser. When we build our application, it will generate standard JavaScript code that the browser can understand.

The www folder contains the output of the build process for the application, and the code contained in this folder is the code that is actually run when a user uses the application. It is important not to make changes to the code in this folder, because it will be overwritten every time a new build is created.

If you were deploying your application to the web, it is the code in this folder that would be uploaded to the server hosting the application. If you are deploying your application to iOS or Android with Capacitor, it is the code in this folder that Capacitor will wrap up into the native shell.

Review

As I mentioned, what we have discussed here is not all of the files/folders in your project, but these are the key ones that you will need to worry about. In the Angular concepts module, we will discuss in more depth how the application actually works.