2.1 Prerequisite skills (welcome to join the Q group to learn and discuss together 657185219)

2.1.1 TypeScript Tutorial

2.1.2 angular2 tutorial

2.1.3 sass tutorial

2.1.4 ionic2 tutorial

2.1.5 Basic knowledge

2.1.5.1Component

The control class of the view is the ctrl layer (the angular1 controller and the Directive are merged )

Contains 3 parts

//##########import dependencies##########
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

//##########Basic information settings##########
@Component({
  selector: 'page-contact',//Set the style
  templateUrl: 'contact.html'//Settings page
})
//##########Export configuration ContactPage for easy calling #########
export class ContactPage {
  constructor(public navCtrl: NavController) {
  }
}

2.1.5.2 providers service

2.1.5.3 NgModule module is similar to control

2.1.5.4 Pipe

2.2 Project structure

2.2.1 App entry (src/app)

2.2.1.1 app.module.ts entry file (can be viewed from main.ts)

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//Add the angularHTTP module, the required angular modules are uniformly declared here
import {  HttpModule} from '@angular/http';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

//All static pages corresponding to component.ts are imported here (you can also put Page into Module and introduce Module), and page jumps are based on the corresponding component.ts object
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import {PaipaiPage} from "../pages/paipai/paipai";
import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

//Your own service is declared here globally, others can be declared on the corresponding page
import {HttpService} from "../service/HttpService";
import {StorageService} from "../service/StorageService";

@NgModule ({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    PaipaiPage,
    TabsPage,
    LoginPage
  ],
  imports: [
    //Add the angularHTTP module, the required angular modules are uniformly declared here
    BrowserModule,HttpModule,
    //Set the startup home page
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  //Import all entry ts
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    PaipaiPage,
    TabsPage,
    LoginPage

  ],
  providers: [
    //Your own service is declared here globally, others can be declared on the corresponding page
    HttpService,
    StorageService,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

2.2.1.2 app.component.ts homepage control file

import { Component } from '@angular/core';//Component must be imported This is the basis
import { Platform } from 'ionic-angular';//Add ionic features
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

//Configure the home page
@Component({
  templateUrl: 'app.html'//Homepage path
})
//APP home page controller
export class MyApp {
  //Set 4 TabsPages on the home page
  rootPage:any = TabsPage;//corresponding to ../pages/tabs/tabs

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

The corresponding view ion-nav root attribute value rootPage(tabs), other ionic label attributes can refer to the ionic documentation

<ion-nav [root]="rootPage"></ion-nav>

ionic2 + cordova directory structure analysis