Basic knowledge points of ionic 2 self-study

Keywords: angular Mobile Android iOS

Ionic (ionic framework) is close to native HTML5 Mobile App Development Framework.

IONIC is currently the most potential HTML5 mobile application development framework. Building applications through SASS provides many UI components to help developers develop powerful applications. Its use JavaScript MVVM framework and AngularJS To enhance the application. Provide two-way binding of data, and use it to become Web and Mobile development The common choice of the two. Ionic is a development framework that focuses on WEB development technology and creates native applications similar to mobile platform based on HTML5. The purpose of Ionic framework is to develop mobile phone applications from the perspective of web. The compiler platform based on PhoneGap can compile applications into various platforms.

Note: This is about the knowledge points of ionic 2. After all, it is quite different from ionic 1.0.

 

 

(1) Installation and operation of Ionic

 

1. Download and install Node.js The node v command can be used on the command line to view the version of node.js currently installed.

2. Ionic can be installed by using the npm install ionic-g command, but it should be noted that the version installed at this time is Ionic 1.0. You can use npm install ionic@beta-g to install beta versions, such as npm install ionic@2.0.0-beta.22 Install beta.22 version of _____________

3. After installing Ionic, an empty project can be initialized with ionic start ionicdemo-v2, and tabs template is used by default as the template of the initialization project. If other templates are needed, the corresponding template name can be added after the project name, such as: ionic start ionicdemo tutorial-v2; (v2 parameter specifies the use of version 2.0 to initialize the project)

4. Ionic server can run Ionic project.

5. Use ionic platform add Android Or ionic platform add iOS Commands can add deployment files for two mobile platforms (using ionic platform) The list command can view the current platform information.

6. The deployment files of two platforms are added to the project, which can be viewed through the platform folder. Accordingly, the ios deployment files can be imported in Xcode or the Android deployment files can be imported in Android studio to debug the corresponding real-time machine.

 

 

(2) Life Cycle of Ionic Pages

  1. //The function called after the page is loaded will not be reloaded when the page is switched because of the existence of cache.
  2. onPageLoaded() {  
  3.   console.log('page 1: page loaded.');  
  4. }  
  5.   
  6. //When the page is about to enter
  7. onPageWillEnter() {  
  8.   //Here are some things you can do to initialize pages.
  9.   console.log('page 1: page will enter.');  
  10. }  
  11.   
  12. //When the page has entered
  13. onPageDidEnter() {  
  14.   console.log('page 1: page did enter.');  
  15. }  
  16.   
  17. //When the page is about to leave.
  18. onPageWillLeave() {  
  19.   console.log('page 1: page will leave.');  
  20. }  
  21.   
  22. //When the page has left.
  23. onPageDidLeave() {  
  24.   console.log('page 1: page did leave.');  
  25. }  
  26.   
  27. //Lifecycle of execution when removed from DOM
  28. onPageWillUnload() {  
  29.   
  30. }  
  31.   
  32. //Remove execution completion from DOM
  33. onPageDidUnload() {  
  34.   
  35. }  

 

(3) Ionic components

1. Tab control

Icon: http://ionicframework.com/docs/v2/ionicons/ 

tabs.html

  1. <ion-tabs>  
  2.   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>  
  3.   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>  
  4.   <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>  
  5. </ion-tabs>  

 

 

  1. <ion-tabs>  
  2.   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>  
  3.   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>  
  4.   <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts" tabBadge="3"></ion-tab>  
  5. </ion-tabs>  


 

 

  1. <ion-tabs>  
  2.   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>  
  3.   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>  
  4.   <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts" tabBadge="3" tabBadgeStyle="danger"></ion-tab>  
  5. </ion-tabs>  


 

 

By default, you first go to the third tab page:

Html control

 

  1. <ion-tabs selectedIndex="2">  
  2.   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>  
  3.   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>  
  4.   <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts" tabBadge="3" tabBadgeStyle="danger"></ion-tab>  
  5. </ion-tabs>  

 

 

JS control

  1. <ion-tabs #mainTabs>  
  2.   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>  
  3.   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle" tabBadge="3" tabBadgeStyle="danger"></ion-tab>  
  4.   <ion-tab [root]="tab3Root" tabTitle="User center" tabIcon="person"></ion-tab>  
  5. </ion-tabs>  

 

  1. import {Component} from '@angular/core';  
  2. import {HomePage} from '../home/home';  
  3. import {AboutPage} from '../about/about';  
  4. import {ContactPage} from '../contact/contact';  
  5.   
  6. import {Tabs} from 'ionic-angular';  
  7. import {Injectable, ViewChild} from '@angular/core';  
  8.   
  9. @Component({  
  10.   templateUrl: 'build/pages/tabs/tabs.html'  
  11. })  
  12. export class TabsPage {  
  13.   @ViewChild('mainTabs') tabRef: Tabs;  
  14.   
  15.   private tab1Root: any;  
  16.   private tab2Root: any;  
  17.   private tab3Root: any;  
  18.   
  19.   constructor() {  
  20.     // this tells the tabs component which Pages  
  21.     // should be each tab's root Page  
  22.     this.tab1Root = HomePage;  
  23.     this.tab2Root = AboutPage;  
  24.     this.tab3Root = ContactPage;  
  25.   }  
  26.   
  27.   ionViewDidEnter() {  
  28.     this.tabRef.select(2);  
  29.   }  
  30. }  

 

2. Button control

  1. <button>Basic Button</button>  
  2. <button gray>Gray Button</button>  
  3. <button danger>Danger Button</button>  
  4. <button outline>Outline Button</button>  
  5. <button clear>Clear Button</button>  
  6. <button round>Round Button</button>  
  7. <button block>Block Button</button>  
  8. <button small>Small Button</button>  
  9. <button large>Large Button</button>  
  10. <button>  
  11.   <ion-icon name="home"></ion-icon>  
  12.   Button  
  13. </button>  
  14. <button>  
  15.   Button  
  16.   <ion-icon name="home"></ion-icon>  
  17. </button>  
  18. <button>  
  19.   <ion-icon name="home"></ion-icon>  
  20. </button>  

 

 

3. Input control

  1. <ion-list>  
  2.   <ion-item>  
  3.     <ion-label floating>User name</ion-label>  
  4.     <ion-input type="text" value="" [(ngModel)]="user.username"></ion-input>  
  5.   </ion-item>  
  6.   <ion-item>  
  7.     <ion-label stacked>Password</ion-label>  
  8.     <ion-input type="password" value="" [(ngModel)]="user.password"></ion-input>  
  9.   </ion-item>  
  10. </ion-list>  
  11. <button block (click)="showFill()">Sign in</button>  

 

  1. export class ContactPage {  
  2.   public user = {  
  3.     username: 'parry',  
  4.     password: ''  
  5.   };  
  6.   
  7.   constructor(private navCtrl: NavController) {  
  8.   
  9.   }  
  10.   
  11.   showFill() {  
  12.     alert(this.user.username);  
  13.     console.log(this.user.password);  
  14.   }  
  15. }  

 

4. Loading control, Alert control

  1. import {Component} from '@angular/core';  
  2. import {NavController, LoadingController, AlertController} from 'ionic-angular';  
  3.   
  4. @Component({  
  5.   templateUrl: 'build/pages/contact/contact.html'  
  6. })  
  7. export class ContactPage {  
  8.   public user = {  
  9.     username: 'parry',  
  10.     password: ''  
  11.   };  
  12.   
  13.   constructor(private navCtrl: NavController,  
  14.               private loadingCtrl: LoadingController,  
  15.               private alertCtrl: AlertController) {  
  16.     this.navCtrl = navCtrl;  
  17.   }  
  18.   
  19.   showFill() {  
  20.     alert(this.user.username);  
  21.     console.log(this.user.password);  
  22.   }  
  23.   
  24.   login() {  
  25.     /*// Create a loading window and simulate it for 3 seconds. The loading window disappears.
  26.     let loading = Loading.create({ 
  27.       content: 'Logging in...',
  28.       duration: 3000, //The unit is milliseconds.
  29.     }); 
  30.  
  31.     this.navCtrl.present(loading); 
  32.  
  33.     // The real logic should be: to request the API for login, to hide the loading window after returning the result.
  34.     setTimeout(() => { 
  35.       loading.dismiss(); 
  36.     }, 3000);*/  
  37.   
  38.     if(this.user.username == '' || this.user.username.length <= 3) {  
  39.       //alert alerts users to the correctness of user names
  40.       let alertUserNameError = this.alertCtrl.create({  
  41.         title: 'User center',  
  42.         subTitle: 'Input username format is incorrect!',  
  43.         buttons: ['OK']  
  44.       });  
  45.   
  46.       alertUserNameError.present();  
  47.     } else {  
  48.       let loading = this.loadingCtrl.create({  
  49.         content: 'Please wait...',  
  50.         spinner: 'dots',  
  51.         duration: 3000, //The unit is milliseconds.
  52.       });  
  53.   
  54.       loading.present();  
  55.   
  56.       setTimeout(() => {  
  57.         loading.dismiss();  
  58.       }, 3000);  
  59.     }  
  60.   
  61.   }  
  62.   
  63. }  

 

5. Toast control

  1. //2. Use Toast controls
  2. let toast = this.toastCtrl.create({  
  3.   message: 'Input username format is incorrect!',  
  4.   duration: 3000,  
  5. });  
  6. toast.present();  

 

6. Grid Layout

  1. <ion-row>  
  2.   <ion-col>  
  3.     <div class="textAlignRight marginTop10"><button clear>No account yet? Click registration</button></div>  
  4.   </ion-col>  
  5. </ion-row>  

 

7. modal control

  1. //Import the registration page
  2. import {Register} from '../contact/register';  

 

  1. //Open the registration page.
  2. openRegisterPage() {  
  3.   let modal = this.modalCtrl.create(Register);  
  4.   modal.present();  
  5. }  

 

  1. import {Component} from '@angular/core';  
  2.   
  3. @Component({  
  4.   templateUrl: 'build/pages/contact/register.html'  
  5. })  
  6. export class Register {  
  7.   
  8. }  

 

8. Toolbar control

  1. <ion-toolbar>  
  2.   <ion-title>User registration</ion-title>  
  3.   <ion-buttons end>  
  4.     <button (click)="dismiss()">  
  5.       <span showWhen="ios">cancel</span>  
  6.       <ion-icon name="md-close" showWhen="android,windows"></ion-icon>  
  7.     </button>  
  8.   </ion-buttons>  
  9. </ion-toolbar>  

 

Amendment:

  1. <ion-header>  
  2.   <ion-toolbar>  
  3.     <ion-title>User registration</ion-title>  
  4.     <ion-buttons end>  
  5.       <button (click)="dismiss()">  
  6.         <span showWhen="ios">cancel</span>  
  7.         <ion-icon name="md-close" showWhen="android,windows"></ion-icon>  
  8.       </button>  
  9.     </ion-buttons>  
  10.   </ion-toolbar>  
  11. </ion-header>  
  12.   
  13.   
  14. <ion-content padding>  
  15.     <h5>Parameters passed:</h5>  
  16. </ion-content>  

 

9. List control

  1. <ion-list>  
  2.   <ion-item>  
  3.     <ion-avatar item-left><img src="../images/1.jpg" alt="Head portrait"></ion-avatar>  
  4.     <h2>Ha-ha</h2>  
  5.     <p>(ˇˍˇ) think～</p>  
  6.   </ion-item>  
  7.   <ion-item>  
  8.     <ion-avatar item-left><img src="../images/2.jpg" alt="Head portrait"></ion-avatar>  
  9.     <h2>Beauty</h2>  
  10.     <p>(ˇˍˇ) think～</p>  
  11.   </ion-item>  
  12. </ion-list>  

 

Binding data sources:

Data Source Statement

  1. //Generally, data sources are obtained from api. Here we just simulate some data that have been retrieved.
  2. public contacts = [  
  3.   {'contactid': 1, 'contactname': 'Dream little white', 'contacttext': '18888888888'},  
  4.   {'contactid': 2, 'contactname': 'Dream little white 2', 'contacttext': '18888888888'},  
  5.   {'contactid': 3, 'contactname': 'Dream little white 3', 'contacttext': '18888888888'},  
  6.   {'contactid': 4, 'contactname': 'Dream little white 4', 'contacttext': '18888888888'},  
  7.   {'contactid': 5, 'contactname': 'Dream little white 5', 'contacttext': '18888888888'},  
  8.   {'contactid': 6, 'contactname': 'Dream little white 6', 'contacttext': '18888888888'},  
  9.   
  10.   {'contactid': 1, 'contactname': 'Dream little white 7', 'contacttext': '18888888888'},  
  11.   {'contactid': 2, 'contactname': 'Dream little white 8', 'contacttext': '18888888888'},  
  12.   {'contactid': 3, 'contactname': 'Dream little white 9', 'contacttext': '18888888888'},  
  13.   {'contactid': 4, 'contactname': 'Dream little white 10', 'contacttext': '18888888888'},  
  14.   {'contactid': 5, 'contactname': 'Dream little white 11', 'contacttext': '18888888888'},  
  15.   {'contactid': 6, 'contactname': 'Dream little white 12', 'contacttext': '18888888888'},  
  16. ];  

 

  1. <ion-list>  
  2.   <ion-item *ngFor="#contact of contacts" (click)="itemClick($event, contact)">  
  3.     <ion-avatar item-left><img src="../images/{{contact.contactid}}.jpg" alt="Head portrait"></ion-avatar>  
  4.     <h2>{{contact.contactname}}</h2>  
  5.     <p>{{contact.contacttext}}</p>  
  6.   </ion-item>  
  7. </ion-list>  

 

10. Card Layout

  1. <ion-card>  
  2.   <ion-item>  
  3.     <ion-avatar item-left>  
  4.       <img src="../images/6.jpg" alt="Head portrait">  
  5.     </ion-avatar>  
  6.     <h2>Elon Musk</h2>  
  7.     <p>Come from iPhone 6s</p>  
  8.   </ion-item>  
  9.   <img src="../images/c1.jpg" alt="picture">  
  10.   <ion-card-content>  
  11.     <p>I've released a new car. Who's going to give it away? Ha-ha</p>  
  12.   </ion-card-content>  
  13.   <ion-item>  
  14.     <button primary clear item-left><ion-icon name="thumbs-up"></ion-icon><div>888 Fabulous</div></button>  
  15.     <button primary clear item-left><ion-icon name="text"></ion-icon><div>600 comment</div></button>  
  16.     <ion-note item-right>  
  17.       1 Hours ago  
  18.     </ion-note>  
  19.   </ion-item>  
  20. </ion-card>  

 

11. navigation control

  1. itemClick(event, contact) {  
  2.   //console.log(event);  
  3.   //console.dirxml(contact);  
  4.   //alert(contact.contactname);  
  5.   
  6.   this.navCtrl.push(ContactDetails, {item: contact});  
  7. }  

 

Contact Details page

  1. /** 
  2.  * Created by Administrator on 2016/8/23 0023. 
  3.  */  
  4. import {Component} from '@angular/core';  
  5. import {NavParams} from 'ionic-angular';  
  6.   
  7. @Component({  
  8.   templateUrl: 'build/pages/about/contactdetails.html'  
  9. })  
  10. export class ContactDetails {  
  11.   private item = '';  
  12.   
  13.   constructor(public params: NavParams) {  
  14.     this.item = params.data.item;  
  15.   }  
  16. }  

 

  1. <ion-header>  
  2.   <ion-navbar>  
  3.     <ion-title>{{item.contactname}}</ion-title>  
  4.   </ion-navbar>  
  5. </ion-header>  
  6. <ion-content padding>  
  7.   {{item.contactname}} The mobile phone number is:{{item.contacttext}}  
  8. </ion-content>  



 

(4) Introduction of Cordova Components

1. Image Picker Component

 

2. Geolocation component

 

  1. //Obtaining location information
  2. Geolocation.getCurrentPosition().then((resp) => {  
  3.   console.log(resp.coords.latitude);  
  4.   console.log(resp.coords.longitude);  
  5. });  

 

 

3. Local Notifications components

  1. //Local reminder component
  2. LocalNotifications.schedule({  
  3.   text: 'Localization alert-You started. Ionic App',  
  4.   at: new Date(new Date().getTime() + 10000),  
  5.   sound: null  
  6. });  

 

(5) Project Practice

1. Quickly Generate App Icon and Start Page

MakeAppicon

Ios.hvims.com

Launcher Icon Generator

iconhandbook.co.uk/reference/chart/android

 

2. Storing status information using localStorage

localStorage.setItem(key, value)

localStorage.getItem(key)

 

Note: Closing Modal pages requires using the dismiss method in ViewController.

 

3. The Concept and Method of Parent Page after Modal Closed

 

4. Network Request in Ionic

Cross-domain request questions: http://enable-cors.org/ (Not in App, of course, but only in the process of browser debugging)

 

  1. //Here is the implementation of the request API. Note the cross-domain request problem. See http://enable-cors.org./
  2. this.http.get('http://xxx/account/Login?email=' + this.user.username + '&password=' + this.user.password)  
  3.   .subscribe(data => {  
  4.     let res = data.json();  
  5.     if(res.LoginStatus == 1) {  
  6.       localStorage.setItem('username', this.user.username);  
  7.       localStorage.setItem('logined', 'true');  
  8.       //Self-modal Hiding
  9.       this.viewCtrl.dismiss(this.user.username);  
  10.       loading.dismiss(); //Login progress hiding
  11.     } else {  
  12.       let toast = this.toastCtrl.create({  
  13.         message: 'Logon failed!',  
  14.         duration: 2000,  
  15.       });  
  16.       toast.present();  
  17.     }  
  18.   
  19.   }, err => {  
  20.     let toast = this.toastCtrl.create({  
  21.       message: 'Logon failed!',  
  22.       duration: 2000,  
  23.     });  
  24.     toast.present();  
  25.   
  26.   });  

 

 

5. Sliding Delete Data in List

  1. <ion-list>  
  2.   <ion-item-sliding *ngFor="#contact of contacts">  
  3.     <ion-item (click)="itemClick($event, contact)">  
  4.       <ion-avatar item-left><img src="images/{{contact.contactid}}.jpg" alt="Head portrait"></ion-avatar>  
  5.       <h2>{{contact.contactname}}</h2>  
  6.       <p>{{contact.contacttext}}</p>  
  7.     </ion-item>  
  8.     <ion-item-options>  
  9.       <button danger (click)="removeContact(contact)">  
  10.         <span padding><ion-icon name="trash"></ion-icon> delete</span>  
  11.       </button>  
  12.     </ion-item-options>  
  13.   </ion-item-sliding>  
  14. </ion-list>  

 

6. Integrated Aurora Push for Message Push

// Set the alias of the client for directional message delivery

window.plugins.jPushPlugin.setAlias('Client' + loginResult.UserId);

 

// Client (can only be a single value): A single device is bound to jPush, which corresponds to the ID number of the device. When pushed on the server side, it can only be pushed to the ID level.

 

var arrayObj = new Array('Tags' + loginResult.UserId);

window.plugins.jPushPlugin.setTags(arrayObj);

// Tags: Actually, it means grouping. Then, after this assignment, a group name is assigned to the user when the user logs in, and then the group can be pushed when the message is pushed. Application Scenario: If the user has multiple devices and the app can be logged in at the same time on these devices, then our push message should be pushed to these devices.

 

// Client - 1, but this device is notified.

// Tag-1, multiple devices are set to be called Tag-1.

 

7. iOS Packaging and AppStore Uploading

8. Packaging and Publishing Android


Reference learning:

https://babeljs.io

http://kangax.github.io/compat-table/es6/

https://github.com/driftyco

https://github.com/driftyco/ionic-preview-app/

http://www.typescriptlang.org/docs/

http://mhartington.io/post/ionic2-external-libraries/

Posted by digitalecartoon on Mon, 15 Apr 2019 11:00:33 -0700

Hot Keywords

©2024 Programmer Group