After installing Ionic 2, let start coding with it. Ionic 2 project creation is not much different form ionic 1. it uses the same CLI. so, lets issue the command to create the project
ionic start ItsMyCodeShare --v2
so, this creates a blank ionic 2 project. to see it, run the same serve command after going to the project folder:
ionic serve
this will open your project normally with this URL: http://localhost:8100/ with 3 tabs.
let us understand how ionic 2 project structure and how is it rendering your page on to the WebView.
after creating the blank project your folder structure will look like this:
config.xml, src, www are important for development. forget the rest for now.
config.xml contains all the spec, preferences, plugins for each platform.
src contains the source code that we are going to develop.
www contains the transpiled code.
src contains below folders based on what all will be used:
app
pages
providers
components
pipes
initially it contains only pages folder as the other were not yet created.
app: is the key folder where the app will be initialised. it contains
app.components.ts - this is the file where app starts (after index.html upto my understanding)
app.html - contains the root nav i.e. a placeholder for all navigation of the app
app.module.ts - all the app components, pages, providers to be declared soon after generating them.
app.scss - contains the style for app.html
main.ts
app.html has <ion-nav [root]="rootPage"></ion-nav>. this ion-nav is the holder for all of the app. the root is loaded when a component is assigned to variable rootPage
if you observe the app.components.ts, the rootPage will be assigned with the component TabsPage.
When the rootPage was assigned, it looks for TabsPage, it is imported in the .ts file at the top.
import { TabsPage } from '../pages/tabs/tabs';
it was being imported from ../pages/tabs/tabs means, from pages->tabs folder it looks for tabs.ts file.
@Component is decorator which contains meta info like it view, providers etc.,
templateUrl tell what to load for tabsPage. so, tabs.html is loaded.
let us observe, tabs.html:
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
ion-tabs is the directive which is the holder for tabs. it contains 3 ion-tabs which holds respective pages. [root] sets the root page for each of the tab.
so now 3 more pages will be loaded based on their paths mentioned in .ts files.
so i guess you got the crux of it. after app initialization, all the things works based on the .ts typescript files and respective html will be loaded from the templateUrl and styles are taken from respective .scss files.
that's it. to understand flow, i would suggest to keep console.log(); and serve.
