Share
In deze zelfstudiereeks leert u hoe u aan de slag kunt met het maken van een mobiele app met behulp van het Ionische framework. Ionic gebruikt Angular voor het schrijven van de componenten en het maken van de mobiele app.
In de loop van deze reeks maakt u een eenvoudige mobiele app voor taakbeheer met behulp van het Ionische framework.
Van de officiële documentatie:
Ionic is de prachtige, gratis en open source mobiele SDK voor het met gemak ontwikkelen van native en progressieve web-apps.
Laten we beginnen door Ionic te installeren met behulp van Node Package Manager (npm). Voordat u Ionic installeert, moet u ervoor zorgen dat u dit hebt gedaan Node.js geïnstalleerd op uw systeem.
npm install -g cordova ionic
Nadat Ionic is geïnstalleerd, maakt u een nieuw Ionic-leeg project met behulp van de volgende opdracht:
ionische start angulair-ionische blanco
U test de Ionic-app in de browser totdat deze is voltooid. Eenmaal voltooid, test u de applicatie op een Android-apparaat.
Typ de volgende opdracht om de app vanuit de browser uit te voeren.
ionische serveren
Richt uw browser op http: // localhost: 8100 / en u moet het Ionic-project laten draaien.
Hier ziet u hoe de projectstructuur er uitziet:
Binnen het Ionic-project heb je een map genaamd src / app. Binnen in de app map, vindt u een bestand met de naam app.module.ts waar de root-module AppModule is gedefinieerd.
In de app.module.ts bestand in de invoer sectie, kunt u zien dat de root-component is gedefinieerd met behulp van de volgende code:
IonicModule.forRoot (MyApp)
MijnToep is geïmporteerd uit de app.component waar het de rootPage zoals Startpagina, die verschijnt wanneer de app wordt geladen.
Laten we de weergave maken voor het weergeven van de toegevoegde taken. Binnen in de src / pages map, maak een andere map voor de lijst component genoemd lijst.
Binnen in de lijst map, maak een bestand aan met de naam list.component.html wat de componentsjabloon zou zijn. Voeg de volgende code toe aan de list.component.html het dossier:
Ionische takenlijst Taak 1 Taak 2 Taak 3
Zoals te zien in de bovenstaande code, hebt u Ionic-specifieke tags gebruikt voor het maken van de elementen. U kunt de Ionische officiële documentatie raadplegen om een lijst met Ionic-component-API's te krijgen die u kunt gebruiken bij het maken van uw sjablonen.
Om de hierboven gemaakte sjabloon te beheren, hebt u een controllerklasse nodig. Maak een bestand met de naam list.component.ts en definieer de ListPage klasse. Hier is hoe het eruit ziet:
Component importeren vanuit '@ angular / core'; @Component (selector: 'page-list', templateUrl: 'list.component.html') export class ListPage constructor ()
U hebt de taaklijstcomponent gedefinieerd met behulp van de @Component decorateur. Binnen in de @Component decorateur, hebt u de selector gedefinieerd met behulp van de keuzeschakelaar sleutel en de sjabloon met behulp van de templateUrl sleutel voor het onderdeel.
De toepassing moet weten dat de hierboven aangemaakte component bestaat, en daarom moet u deze in de basismodule importeren.
Importeer de ListPage klasse binnen de src / app / app.module.ts bestand en neem het op in de declaraties en entryComponents lijst. Hier is hoe de gemodificeerde app.module.ts bestand ziet er:
import BrowserModule vanuit '@ angular / platform-browser'; importeer ErrorHandler, NgModule vanuit '@ angular / core'; import IonicApp, IonicErrorHandler, IonicModule van 'ionic-angular'; importeer SplashScreen vanuit '@ ionic-native / splash-screen'; importeer StatusBar van '@ ionic-native / status-bar'; importeer ListPage van '... /pages/list/list.component'; importeer MyApp van './app.component'; importeer HomePage van '... / pages / home / home'; @NgModule (aangiften: [MyApp, HomePage, ListPage], import: [BrowserModule, IonicModule.forRoot (MyApp)], bootstrap: [IonicApp], entryComponents: [MyApp, HomePage, ListPage], providers: [StatusBar, SplashScreen, provide: ErrorHandler, useClass: IonicErrorHandler]) export class AppModule
Wanneer de toepassing wordt geladen, wilt u dat de nieuw gemaakte component List wordt weergegeven in plaats van de Startpagina. Dus wijzig het rootPage gedefinieerd in de app.component.ts het dossier.
Component importeren vanuit '@ angular / core'; importeer Platform van 'ionic-angular'; importeer StatusBar van '@ ionic-native / status-bar'; importeer SplashScreen vanuit '@ ionic-native / splash-screen'; importeer HomePage van '... / pages / home / home'; importeer ListPage van '... /pages/list/list.component'; @Component (templateUrl: 'app.html') exportklasse MyApp rootPage: any = ListPage; constructor (platform: Platform, statusbalk: StatusBar, splashScreen: SplashScreen) platform.ready (). then (() => statusBar.styleDefault (); splashScreen.hide (););
Zoals te zien in de bovenstaande code, hebt u de ListPage binnen in de app.component.ts bestand en de rootPage naar ListPage in plaats van Startpagina.
Sla de bovenstaande wijzigingen op en start de Ionic-server met behulp van de volgende opdracht:
ionische serveren
De mobiele app moet worden uitgevoerd op http: // localhost: 8100 /.
Vanuit het lijstscherm voeg je een link toe om items toe te voegen aan de lijst. Laten we een pictogram toevoegen aan de rechterkant van het scherm. Binnen in de list.component.html bestand, voeg het volgende toe om het plus-pictogram toe te voegen.
Hier is hoe de gemodificeerde list.component.html bestand ziet er:
Ionic Task Manager Taak 1 Taak 2 Taak 3
Sla de bovenstaande wijzigingen op en start de server opnieuw op, waarna het pluspictogram op het scherm wordt weergegeven.
Wanneer de gebruiker op het pluspictogram klikt, moet u het scherm tonen om nieuwe taken toe te voegen. Laten we dus een ander onderdeel maken, genaamd de Toevoegen bestanddeel.
Maak een map met de naam toevoegen binnen in de pagina's map. Binnen in de toevoegen map, maak een bestand aan met de naam add.component.html en voeg de volgende code toe:
Ionic Task Manager Voer taak in
De bovenstaande code geeft het scherm weer om een nieuwe taak toe te voegen.
U moet het bovenstaande scherm weergeven wanneer de gebruiker op het plusteken op het lijstscherm klikt. Dus je laat het zien als een modale pop-up.
Maak een bestand met de naam add.component.ts en voeg de volgende code toe:
Component importeren vanuit '@ angular / core'; @Component (selector: 'page-add', templateUrl: 'add.component.html') exporteer klasse AddPage constructor ()
Zoals te zien is in de bovenstaande code, hebt u zojuist het component Toevoegen gemaakt door de keuzeschakelaar en templateUrl.
Registreer het onderdeel door het te importeren in de app.module.ts bestand in de src / app map. Hier is hoe de gemodificeerde app.module.ts bestand ziet er:
import BrowserModule vanuit '@ angular / platform-browser'; importeer ErrorHandler, NgModule vanuit '@ angular / core'; import IonicApp, IonicErrorHandler, IonicModule van 'ionic-angular'; importeer SplashScreen vanuit '@ ionic-native / splash-screen'; importeer StatusBar van '@ ionic-native / status-bar'; importeer ListPage van '... /pages/list/list.component'; importeer AddPage van '... /pages/add/add.component'; importeer MyApp van './app.component'; importeer HomePage van '... / pages / home / home'; @NgModule (aangiften: [MyApp, HomePage, ListPage, AddPage], import: [BrowserModule, IonicModule.forRoot (MyApp)], bootstrap: [IonicApp], entryComponents: [MyApp, HomePage, ListPage, AddPage], providers: [ StatusBar, SplashScreen, provide: ErrorHandler, useClass: IonicErrorHandler]) exportklasse AppModule
Om het te tonen Pagina toevoegen component in een modale pop-up, moet u importeren ModalController geleverd door ionische hoekige. Importeren ModalController in list.component.ts.
import ModalController van 'ionic-angular';
Maak een methode genaamd presentAddModal en maak een modaal met behulp van de geïmporteerde ModalController. Hier is hoe het list.component.ts bestand ziet er:
Component importeren vanuit '@ angular / core'; import ModalController van 'ionic-angular'; importeer AddPage uit '... /add/add.component'; @Component (selector: 'page-list', templateUrl: 'list.component.html') exportklasse ListPage constructor (public modalCtrl: ModalController) presentAddModal () let addModal = this.modalCtrl.create (AddPage ); addModal.present ();
Registreer de klikgebeurtenis op de knop Toevoegen in list.component.html.
Sla de bovenstaande wijzigingen op en start de Ionic-server opnieuw op. Klik op het pictogram toevoegen in de lijstpagina en u krijgt de taakpagina toevoegen.
Voor de terugknop op het taakscherm voor toevoegen, moet u een toevoegen ontslaan methode op de knop klik in de add.component.ts het dossier.
Importeer de ViewController module en bel de ontslaan methode om terug te gaan naar het lijstscherm. Hier is hoe het eruit ziet:
Component importeren vanuit '@ angular / core'; import ViewController van 'ionic-angular'; @Component (selector: 'page-add', templateUrl: 'add.component.html') exporteer klasse AddPage constructor (public viewCtrl: ViewController) dismiss () this.viewCtrl.dismiss ();
In deze zelfstudie zag u hoe u aan de slag kunt gaan met het maken van een mobiele app met behulp van het Ionic-framework, dat gebruik maakt van Angular. U hebt de weergave gemaakt voor een Taakbeheer-app. U hebt het component Toevoegen en het lijstonderdeel gemaakt.
In het volgende deel van deze tutorialserie implementeert u de functionaliteit voor de task manager-app om taken toe te voegen en op te sommen.
Broncode van deze tutorial is beschikbaar op GitHub.
Laat ons uw suggesties weten in de opmerkingen hieronder.
Accentsconagua