Ionic3 Getting Started "1" Creating ionic projects and basic configuration _ionic

Make Basic configuration of mobile phone app

To create a ionic project, you need to install the latest version of the CLI and Cordova. NPM install-g Ionic Cordova
When you are done, create your first Ionic application:
Ionic start Myionicproject tabs|sidemenu|blank|super|tutorial
Start tells the CLI to create a new application.
Myionicproject will be the directory name and application name in your project.
Tabs: A simple 3 tab layout
Sidemenu: The layout of the side has a sliding menu
Blank: A simple initial page
Super: More than 14 starter projects ready to use page design
Tutorial: Boot Startup Project

To view an application in a browser:
CD myionicproject/----CD into the created folder
Ionic serve----test the application in the browser


Project structure:
Node_modules----node various dependency packs
Resources----Android/ios (replace icon and start animation)
SRC----Development working directory, pages, styles, scripts, and pictures are placed in this directory
App----Application root directory
Assets----Resource Directory (static file (picture, JS frame ...) ）
Pages----page files, placing written page files, including: Html,scss,ts
Theme----Theme file, which has a scss file and sets subject information.
Index.html----Entry File
Manifest.json
Service-worker.js
www----static files
Config.xml----Configuration file
Ionic.config.json
Ionic.starter.json
Package.json----Node Installation module
Package-lock.json
Tsconfig.json----The root directory of the Typescript project, specifying the root file and compilation options used to compile this project
Tslint.json----formatting and validation typescript


Add iOS Project:
Ionic Cordova Platform Add iOS
Sync the contents of SRC into the iOS project (described later in SRC)
Ionic Cordova Build iOS
Running the iOS project is equivalent to pressing command+r inside the Xcode
Ionic Cordova emulate iOS
Add Android Project
Ionic Cordova Platform Add Android
Ionic Cordova Build Android
Ionic Cordova emulate Android


Modify the Tabs to make the directory structure clear----
1. Modify Src/pages/tabs/tabs.html

<ion-tabs>
  <ion-tab *ngfor= "Let tabroot of Tabroots" [root]=] tabroot.root "tabtitle=" {{Tabroot.tabtitle } ' tabicon= ' {{Tabroot.tabicon}}} ' ></ion-tab>
</ion-tabs>

2. Open Tabs.ts and modify it to the following code:
-------Content-----

Import {Component} from ' @angular/core ';

Import {aboutpage} from ' ... /about/about ';
Import {contactpage} from ' ... /contact/contact ';
Import {homepage} from ' ... /home/home ';

@Component ({
  templateurl: ' tabs.html '
})
Export class Tabspage {
  tabroots:object[];

  Constructor () {
    this.tabroots = [
      {
        root:homepage,
        tabtitle: ' Home ',
        tabicon: ' Home '
      },
      {
        root:contactpage,
        tabtitle: ' Contact ',
        tabicon: ' Notifications '
      },
      {
        Root:aboutpage,
        tabtitle: ' About ',
        tabicon: ' Document '
      }
    ];
  }

------------