项目作者: hhzl

项目描述 :
learning app draft in ionic4; as repository ionic4-start-a2 but uses a service.
高级语言: TypeScript
项目地址: git://github.com/hhzl/ionic4-start-a3.git
创建时间: 2019-12-09T10:54:47Z
项目社区:https://github.com/hhzl/ionic4-start-a3

开源协议:MIT License

下载


INSTALLATION OF TOOLS

Make sure the Node.js and npm are installed.

  1. npm install -g ionic
  2. npm install -g cordova

This repository was developed with the following versions:

  1. ionic info
  2. Ionic:
  3. Ionic CLI : 5.2.0 (/usr/lib/node_modules/ionic)
  4. Ionic Framework : @ionic/angular 4.11.5
  5. @angular-devkit/build-angular : 0.801.3
  6. @angular-devkit/schematics : 8.1.3
  7. @angular/cli : 8.1.3
  8. @ionic/angular-toolkit : 2.1.1
  9. Utility:
  10. cordova-res : not installed
  11. native-run : 0.2.9
  12. System:
  13. NodeJS : v10.17.0 (/usr/bin/node)
  14. npm : 6.11.3
  15. OS : Linux 4.15

SETUP

  1. git clone https://github.com/hhzl/ionic4-start-a3.git
  2. cd ionic4-start-a3
  3. npm install

SCAFFOLDING

The scaffolding of the code in the repository was done with

  1. ionic start ionic4-start-a3 blank --type=angular
  2. cd ionic4-start-a3
  3. ionic generate service services/wordsData
  4. ionic generate page pages/choose-mode
  5. ionic generate page pages/learn-mode
  6. ionic generate page pages/practice-mode
  7. ionic generate page pages/wordlist
  8. ionic generate page pages/settings
  9. ionic generate page pages/about

The genereated code is in the src directory and had to be configured. Such as for example changeing the header of the pages files (home page excluded) to

  1. <ion-header>
  2. <ion-toolbar color="primary">
  3. <ion-title>...</ion-title>
  4. <ion-buttons slot="start">
  5. <ion-back-button></ion-back-button>
  6. </ion-buttons>
  7. </ion-toolbar>
  8. </ion-header>

The header of the page home.page.html is

  1. <ion-header>
  2. <ion-toolbar color="primary">
  3. <ion-buttons slot="end">
  4. <ion-button routerLink="/about">
  5. <ion-icon name="information-circle"></ion-icon>
  6. </ion-button>
  7. </ion-buttons>
  8. <ion-title>Ionic 4 start a3</ion-title>
  9. </ion-toolbar>
  10. </ion-header>

RUN THE APP IN THE BROWSER

  1. ionic serve

RUN THE APP ON THE DEVICE

Android

Android environment setup: https://ionicframework.com/docs/installation/android, available for Windows, macOS and Linux.

Build apk file with

  1. ionic cordova run android