File and Folder Structure

Radiant Training
A free video tutorial from Radiant Training
Professional online trainers
4.5 instructor rating • 1 course • 5,742 students

Lecture description

In this lecture, we will learn how a typical Ionic app looks like. We will learn what each file does for a project and roles of most important pieces of an App. We will learn what each folder in an app contains and where we will be focussing for the rest of the course.

Learn more from the full course

Ionic Basics

Learn to build mobile apps for Android and iOS using Web Technologies.

02:28:49 of on-demand video • Updated June 2018

  • Build apps with Ionic Framework and Angular
  • Use Ionic Components and Features to build UI
  • Build and deploy apps on Android and iOS
  • Build competely cross platform apps for Android and iOS
  • Use commands to create a build for release
  • Release the apps to the Google Play Store
English [Auto] In this lecture we'll have a look at the folders and files that the ionic Selye created for us in the last lecture. Here we have our project open vs code. And on the left we have the whole directory structure available to us. The first folder that we want to take a look at is the S or C folder. This is the folder that contains all the source code of our irenic app. And this is the place where we will be working most of the time while building an iconic app inside the S or C folder. We have a number of folders and files. The app folder contains the entry points for our app and these files load up important components and modules to make an iconic app work. We are not going to go into the details for now but the nitty gritty of the app folder is that the files here specify some of the most important configuration of our eye on a gap. Next we have the assets folder which is used to put in the static assets for our app like images fonts etc.. Then we have the pages folder that contains one folder for each page in our application. As you can see we have a folder called home which contains the mail. SPSS and ts files that together create a page for our app as we create new pages in the app. We will be creating new folders here. Lastly the theme folder contains a file called variables dot SPSS which basically specifies the styling or colors of our ionic out. Then inside the SIRC folder we have an index that DML file that is loaded first just like a web app. Some other files here are all useful when we deploy our iconic app as a progressive Web app and the w w w folder lives the code that is generated when we compile an ironic app the code in the C folder is transpired to the generated code in the w w w folder which can also be deployed as a web app. This code is used while packaging our app using Cordova. We will learn more about this and later lectures. Generally I don't care what's inside the BW folder we only care about the code in the S or C folder. And the other important file we have here is can think that X-amount which contains important information about the app it contains information like package name app name description and a lot of other vital information. Then we have an iconic doc and figure out Jaison file that contains information about your ionic app. When you connect it to the ionic cloud we're not going to worry about that for now. Finally like any other no JSA project we have a package that based on file that specifies the dependencies that the project depends on. This file is responsible for creating the node underscore modules folder which contains all the modules that we need to make the ionic at work the resources folder contains the icon and SWI screen images for the app. Understand this is too much information at once. For now just remember that all we care about is the SIRC folder because that is where we will be working for the rest of the course.