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>
2.2.1.3 The above is basically the APP startup and loading home page and configuration, let's learn the writing of specific page code