App Structure
This section describes the app structure and basic customization.
All the component uses SASS, which is CSS with superpowers. Each component has its dedicated sass files and partials well structured with independent variables so you can have maximum modularity, flexibility, and customizability.
There are three main folder structures in an Ionic 3 app:
- App: App has all the files needed to bootstrap the app and the main structure we will build the app upon.
- Pages: Here you can see all the app pages html, JS and CSS.
- Theme: This folder contains all the superpowers of Sass (variables, mixins, shared styles) that makes super easy to customize and extend the app.
- Assets:In this folder, you will find images, sample data JSON, and any other asset you may require in your app.
app.component.ts
It’s the main entry point of our app. It defines the basic structure and primary navigation of the app.
In our case, we have a combination of tabbed navigation and side menu navigation. In this file, we define which page would be the first one and the options and page navigation of the side menu. It’s also where we get notified when the platform is ready, and our plugins (Cordova, any native stuff) are available.
app.html
Here we define the navigation and its root. Also, as we have a side menu, here is the place we should place its layout.
app.module.ts
This file includes the main angular 2 module (ngModule) of our app. It’s also the place where we should declare the vast majority of our dependencies, such as pages, custom components, services.
app.scss
It is the main entry point for our app sass files/styles. Here you should include your app shared imports and global sass you may use and apply globally. Additionally, this file can also be used as an entry point to import other Sass files.
main.ts
These are ionic auto-generated files, and they take care of the bootstrapping of the app.
Each page has its folder and within that folder, you will find every related file for that page. It includes the HTML for the layout, sass for the customize layout on top of our styles.
Let’s get through the cart page.
cart.html
All the layout for the page. Everything we do is crafted using cutting-edge techniques and technologies, and we always code towards customizability and ease of use. We also make use of the awesome ionic 3 components.
cart.scss
This app structure makes it easy for you to know and centralize in one place where you should change stuff. For each layout, we create one there SCSS file that you can found like cart.css. If you looked to do changes on top of our design, you could write down of your code inside these files.
cart.module.ts
Each page has own modules and their library we need to use.
cart.ts
Here are all the functionality and interactions of the page and where the view logic should go.
Here you will find all the variables, mixins, shared styles. That makes this app template so customizable and extendable.
Maybe you don’t know Sass, in short, is a superset of CSS that will ease and speed your development cycles incredibly.
variables.scss
It is the predefined ionic file where you should include all the variables you may use in your app. In our case, we defined all the colors used within the app in easy to change variables so you can play around and try different color schemes.
$primary : #32cd32// You can add your own color.
You can also customize remaining variable as well and play around color combination.
Last modified 4yr ago