Background: I recently took over the Fuhong Hanlin project, so I need to remember what I am familiar with in the early stage for the convenience of later maintenance. Start the Angular+ Ionic project for the first time. Cheer yourself up! Come on! The article is a little long, need patience to read ~~

Let me show you a picture to soothe your eyes.

Location of packing address:

Both should be replaced with their corresponding addresses before packaging. IOS packaging requires a Mac computer.

Familiarize yourself with a simple personal Settings page:

The actual picture of the page is as follows:

Take a look at the directory structure of the page folder:



Setup.html: page setup.scss: CSS style setup.ts: processing logic setup.module.ts: model layer staff.service.ts: services layer

I found that in this project they put all the services together. The other projects I wrote earlier had their own service.... in each folder

Let’s look at thatPersonal SettingsHow this page is drawn:
First look at the page implementation HTML:

Let’s see how the code is written:

  • The first part is discovered<ion-header>‘<ion-title>’ tag. From the name of the understanding is to write the title tag. Found the four words of system setting as expected. Is the header position of the page.
  • The second part, the whole<ion-content>The tag is wrapped around the content of the page
  1. Further down, there it is<ion-icon>`<h2>Tags are used to display your avatar and name. with<div> ‘slightly adjusted the layout.
  2. Further down, there it is<ion-list>Label the contents of the package. Compare page to see.as expected haveChange Gesture Password.about.Customer service hotlineWait for each item. It is most appropriate to use a List tag for such items. No problem. I just use one insidedivPut the pictures and the text in a row. Then I set up a click method.
  3. So let’s keep going down here<ion-list>After the closing tag, one is writtendivThe tag used to draw the bottom of the pageThe cancellation of accountThe position of the. DIV breadbutton, and add a click event.
  • In this way, the layout of the whole page is clearly visible.
Setup. HTML content: <ion-header> <ion-navbar color="sky"> <ion-title> System Settings </ion-title> </ion-navbar> </ion-header> <ion-content class="gray-bg"> <div class="setting-top" padding-top> <ion-item tappable (tap)="toProfile()"> <ion-icon item-start> <img src="assets/icon/avatar_duel_126.png" width="50"> </ion-icon> <h2>{{currentStaff? .UserName}}</h2> <p></p> </ion-item> </div> <ion-list> <button ion-item (click)="changeGestureCode()"> <ion-icon Item-start > <img SRC ="assets/icon/pattern_yellow_58.png" width="30"> </ion-icon> <h3> </button> <button ion-item (click)="aboutPage()"> <ion-icon item-start> <img src="assets/icon/info_blue_58.png" width="30"> </ion-icon> <h3> about </h3> </button> <button ion-item (click)=" tocallNumber ()"> <ion-icon item-start> <img SRC ="assets/icon/phone_green_58.png" width="30"> </ion-icon> <h3> service line <span class="color-blue"> 400-xxx-0800 </span></h3> </button> </div> </div> </div> <div > <div > <div > <div > <div > <div > <div > <div > <div > <div > <div > <div > <div > </ion-content>
Now that you’ve looked at the HTML page, the next step is to look at what’s going on behind the click events.

Let’s first look at the processing of logical pages:

  • At the top are introduced the decorators required for the page. Components.serviceAnd so on.
  • @IonicPage()Empty decorator
  • @Component({ selector: 'page-setup',templateUrl: 'setup.html',})The public component and the HTML template file for that component.
  1. templateUrl:'setup.html'I won’t explain the name because it’s familiar. That’s the file name of the HTML page I just analyzed.
  2. selector: 'page-setup'Is a common component that can share styles, logic, and everything else within the component.
  • Look at the belowSetupPageWhat’s in the class.
  1. Define the variables required for the page:currentStaff: any;See the name of the understanding of the current personnel information, type isany
  2. Define the variables required for the page:selectedStaff: any;The name is understood as the selected person information, and the type isany
  3. constructorWhen the page is initialized, the dependency is injected. The dependency contains some methods that are used below.
  4. toProfile.changePasswordThe comments for the etc method are very clear. What is it used for? So here’s what it saysthis.navCtrl.pushPage jump means page jump. There are two parameters: one is the route of the page to jump and the other is the parameters with the past.this.navCtrlThat’s what we just injectedNavControllerRely on,this.navCtrl.pushthe.pushisNavControllerThe method inside.
  5. Change Gesture PasswordThere’s a method calledthis.modalCtrl.createModel is used to float a model on the top of the page. Parameter passing is also two parameters, one page routing one passing parameter.
  6. ionViewDidEnterMethod is inconstructorAfter the implementation of. It is equivalent to after the page initialization to get some personnel information for display.
Setup.ts content: import {Component} from '@angular/core'; import {IonicPage, ModalController, NavController, NavParams, Platform} from 'ionic-angular'; import {AlertService} from ".. /.. /.. /providers/util/alert.service"; import {StaffService} from ".. /.. /.. /services/staff.service"; import {JPush} from '@jiguang-ionic/jpush'; @IonicPage() @Component({ selector: 'page-setup', templateUrl: 'setup.html', }) export class SetupPage { currentStaff: any; selectedStaff: any; constructor(public navCtrl: NavController, public navParams: NavParams, public staffService: StaffService, public jPush: JPush, public platform: Platform, public alertService: AlertService, public modalCtrl: ToProfile () {this.navCtrl.push('StaffProfilePage', {}); } // Change password changePassword() {this.navCtrl.push(' changePasswordPage ', {}); } // aboutPage() {this.navCtrl.push(' aboutPage ', {}); } /*** * call the customer service hotline */ tocallNumber = () => {document.location.href = "tel: 400-XXX-0800 "}; /** */ ChangeModal = () => {let modal = this.modalCtrl.create(" gesturePage ", {type: "modify", cssClass: 'gesture-modal'}); modal.present(); }; / get the current user information * * * * / getStaffInfo = () = > enclosing staffService. GetStaffInfo (). Then ((info) = > {enclosing currentStaff = info; }); / * * * cancel * / logout () = = > this. AlertService. PresentAlertWithCallback (" please confirm ", Then (() => {this.selectedStaff = null; if (status) {this.selectedStaff = null; localStorage.clear(); if (this.platform.is('cordova')) { this.jPush.deleteAlias({sequence: 1}); }}); / / jump to the login / / this. After 403 staffService. GetStaffMobileIndexModel (). Then (() = > enclosing navCtrl. SetRoot (" LoginPage ")}}); ionViewDidEnter() { this.getStaffInfo() } }
Setup. SCSS content: page-setup{.scroll content {-webkit-overflow-scrolling: auto; setup. SCSS content: page-setup{.scroll content {-webkit-overflow-scrolling: auto; } .setting-top { background: url(".. /assets/imgs/settings_bg.png") center no-repeat; height: 20vh; width: 100%; background-size: 100% 100%; .item-md, .item-ios { background-color: transparent; ion-icon[item-start] + .item-inner { margin-left: 12px; } &.item-block { .item-inner { border-bottom: none; color: #fff; p { color: #fff; } } } } } .header-ios .toolbar-background-ios { border-color: $color-nav; }}
Now that we’re done with the method, let’s introduce the model of the page
  • @NgModuleIs the root module of Angular, called metadata. This has the logical page needs to use modules, pipes and other content.
  • importsThe inside of theIonicPageModule.forChild(SetupPage)Is used to link to your logical (SetupPage) page. You can look back. Yourssetup.tsThe class name ofSetupPage.
Setup.module. ts content: import {ngModule} from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { SetupPage } from './setup'; import {SharedModule} from ".. /.. /.. /app/shared.module"; @NgModule({ declarations: [], imports: [ IonicPageModule.forChild(SetupPage), SharedModule ], }) export class SetupPageModule {}
Now look at the final service layer:
  • serviceThe layer is used to connect the return values of the backend interface.
  • insetup.tsThe logical file can be seen at the topimport {StaffService} from ".. /.. /.. /services/staff.service";This can be used after importthis.staffService.GetStaffInfo().then((info) => {... });To get the current user information returned by the back end.
Import {Injectable} from '@angular/core'; import {Injectable} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {Observable} from "rxjs"; @Injectable() export class StaffService { constructor(public http: HttpClient) {} /** * getStaffInfo = (constructor */ StaffInfo = () = new Promise((resolve,));} /** * getStaffInfo = (); reject) => this.http.get('api/Staff/GetCurrentStaffInfo') .subscribe(res => { resolve(res); }, (err) => { //reject(err); })); . }

conclusion

Today I met the realization of my page of the complex macro Hanlin. From HTML-SCSS-Model-Serivce. Page to Style to Logic to Interface return value a simple understanding. You have a general idea of how the page is implemented. Ionic3: Ionic3: Ionic3: Ionic3: Ionic3: Ionic3: Ionic3: Ionic3: Ionic3: Ionic3: Ionic3