Part 4 directive structure of ionic project

Understanding Tabs In Ionic Framework

The ion-tabs directive is made up of a few parts. First, the main directive that wraps everything related to the tabbed interface.

<ion-tabs> </ion-tabs>

On this main tag, we can control the look and style by assigning CSS classes. For example, to use the positive color scheme and have tabs with only icons, we can assign the tabs-positive class and the tabs-icon-onlyclass

./src/index.html

src/index.html is the main entry point for the app, though its purpose is to set up script and CSS includes and bootstrap, or start running, our app. We won’t spend much of our time in this file.

For your app to function, Ionic looks for the <ion-app> tag in your HTML. In this example we have:

<ion-app></ion-app>

And the following scripts near the bottom:

<script src="cordova.js"></script> <script src="build/main.js"></script>

./src/

Inside of the src directory we find our raw, uncompiled code. This is where most of the work for an Ionic app will take place. When we run ionic serve, our code inside of src/ is transpiled into the correct Javascript version that the browser understands (currently, ES5). That means we can work at a higher level using TypeScript, but compile down to the older form of Javascript the browser needs.

src/app/app.module.ts is the entry point for our app.

Near the top of the file, we should see this: