Directory structure and modularity

Previously in Ionic 1x, we didn't have the best directory or project structure. Slowly as Ionic and Angular evolved, developers tended to move towards the modular approach for organizing their files and folders. There were many different ways to manage your files and folders in Ionic 1x. Usually the default structure you will see in the Ionic 1x build can be used in many small projects where we don't have to deal with many files and for small projects; mainly two structures are followed for Ionic 1x based projects: byFolderType and byFeatureType. With Ionic 3, one of the best things is that we have the project structure set up in a modular way where you will have pages, providers, pipes, theme folders, and respective subsequent folders in them. Let's go through some important files inside Ionic 3 projects:

    ./src

In this folder we have our entire application code base and it is the most important:

    ./node_modules 

Here we have all our dependencies and NPM packages that are required to run the application:

    ./platforms

Here we have specific platform-based folder entries, which our app is using. When we run the ionic platform add command, you will see a specific folder created inside the platform folder:

    ./plugins

All the plugins used in our application are hosted here:

    ./resources

An entire set of icons and splash screens are inside this folder, organized according to various platforms and devices:

    
./www

Here is our index.html file, and after compilation of the code base in the src folder bundle, files, images, and SASS compiled css files are placed inside www:

    ./www/index.html

This is the entry point to our application or we can say every hybrid application. We mainly have scripts and style sheets declared in this file to run the application. As in Ionic 1 we use ng-app, here in Ionic 3 we check for <ion-app></ion-app> inside your index.html file:

    ./package.json

This defines the project metadata and dependencies that will be added to the node_modules folder. It also has information about the Cordova platform and plugins used in the application:

    
./ionic.config.json

This file contains project-specific settings such as names, IDs, proxies, and other information:

    
./src/app/main.ts 

This is where we start towards the code base and also we bootstrap our application inside this file:

    ./src/app/app.module.ts

In this file we declare the pages, directives, and providers used inside our application:

    ./src/app/app.component.ts

We set the root page here and root-component is called first, which controls the application, similar to what the app.js file does in Ionic 1. However, this component is not different from other components in our application; it is just declared in the app folder. As we start to build applications in upcoming chapters, we will get to know more closely how we work around all these files and code bases.