Share
In questa serie di tutorial, imparerai come iniziare a creare un'app mobile utilizzando il framework Ionic. Ionic utilizza Angular per scrivere i componenti e creare l'app mobile.
Nel corso di questa serie, creerai una semplice app mobile per task manager utilizzando il framework Ionic.
Dalla documentazione ufficiale:
Ionic è l'SDK mobile bello, gratuito e open source per lo sviluppo di applicazioni web native e progressive con facilità.
Iniziamo installando Ionic usando Node Package Manager (npm). Prima di installare Ionic, assicurati di averlo Node.js installato sul tuo sistema.
npm install -g cordova ionic
Una volta installato Ionic, creare un nuovo progetto Ionic vuoto usando il seguente comando:
vuoto ionico angolare-ionico
Testerai l'app Ionic nel browser fino al completamento. Una volta completato, testerai l'applicazione su un dispositivo Android.
Digitare il seguente comando per eseguire l'app dal browser.
servire ionico
Puntare il browser su http: // localhost: 8100 / e si dovrebbe avere il progetto Ionic in esecuzione.
Ecco come appare la struttura del progetto:
All'interno del progetto Ionic, hai una cartella chiamata src / app. Dentro il App cartella, troverai un file chiamato app.module.ts dove il modulo radice AppModule è definito.
Nel app.module.ts file all'interno del importazioni sezione, puoi vedere che il componente root è stato definito usando il seguente codice:
IonicModule.forRoot (MyApp)
MyApp è stato importato dal app.component dove ha impostato il rootPage come HomePage, che compare quando viene caricata l'app.
Creiamo la vista per elencare le attività aggiunte. Dentro il src / pagine cartella, creare un'altra cartella per il elenco componente chiamato elenco.
Dentro il elenco cartella, creare un file chiamato list.component.html quale sarebbe il modello di componente. Aggiungi il seguente codice al list.component.html file:
Elenco attività ioniche Attività 1 Attività 2 Attività 3
Come visto nel codice sopra, hai usato i tag specifici di Ionic per creare gli elementi. È possibile fare riferimento alla documentazione ufficiale di Ionic per ottenere un elenco di API di componenti ionici che è possibile utilizzare durante la creazione dei modelli.
Per controllare il modello creato sopra, avrai bisogno di una classe controller. Crea un file chiamato list.component.ts e definire il ListPage classe. Ecco come appare:
importare Component da '@ angular / core'; @Component (selector: 'page-list', templateUrl: 'list.component.html') export class ListPage costruttore ()
È stato definito il componente dell'elenco attività utilizzando il @Componente decoratore. Dentro il @Componente decoratore, hai definito il selettore usando il selettore chiave e il modello usando il TemplateURL chiave per il componente.
L'applicazione deve sapere che il componente creato sopra esiste e quindi è necessario importarlo nel modulo radice.
Importa il ListPage classe dentro il src / app / app.module.ts file e includilo nel file dichiarazioni e entryComponents elenco. Ecco come è stato modificato app.module.ts aspetto del file:
importare BrowserModule da '@ angular / platform-browser'; import ErrorHandler, NgModule da '@ angular / core'; import IonicApp, IonicErrorHandler, IonicModule da 'ionico-angolare'; import SplashScreen da '@ ionic-native / splash-screen'; import StatusBar da '@ ionic-native / status-bar'; import ListPage da '... /pages/list/list.component'; importare MyApp da './app.component'; import HomePage da '... / pages / home / home'; @NgModule (dichiarazioni: [MyApp, HomePage, ListPage], importa: [BrowserModule, IonicModule.forRoot (MyApp)], bootstrap: [IonicApp], entryComponents: [MyApp, HomePage, ListPage], provider: [StatusBar, SplashScreen, fornire: ErrorHandler, useClass: IonicErrorHandler]) export AppModule
Quando l'applicazione si carica, si desidera che venga visualizzato il componente Elenco appena creato anziché il HomePage. Quindi modifica il rootPage definito all'interno del app.component.ts file.
importare Component da '@ angular / core'; import Platform da 'ionico-angolare'; import StatusBar da '@ ionic-native / status-bar'; import SplashScreen da '@ ionic-native / splash-screen'; import HomePage da '... / pages / home / home'; import ListPage da '... /pages/list/list.component'; @Component (templateUrl: 'app.html') classe di esportazione MyApp rootPage: any = ListPage; costruttore (piattaforma: Platform, statusBar: StatusBar, splashScreen: SplashScreen) platform.ready (). then (() => statusBar.styleDefault (); splashScreen.hide (););
Come visto nel codice sopra, hai importato il ListPage dentro il app.component.ts file e cambiato il rootPage a ListPage invece di HomePage.
Salvare le modifiche precedenti e avviare il server Ionic utilizzando il seguente comando:
servire ionico
Dovresti avere l'app mobile in esecuzione su http: // localhost: 8100 /.
Dalla schermata di elenco, aggiungerai un collegamento per aggiungere elementi all'elenco. Mettiamo un'icona Aggiungi sul lato destro dello schermo. Dentro il list.component.html file, aggiungere quanto segue per aggiungere l'icona più.
Ecco come è stato modificato list.component.html aspetto del file:
Task Manager Ionico Attività 1 Attività 2 Attività 3
Salvare le modifiche precedenti e riavviare il server e verrà visualizzata l'icona più sullo schermo.
Quando l'utente fa clic sull'icona più, è necessario mostrare lo schermo per aggiungere nuove attività. Quindi creiamo un altro componente chiamato il Inserisci componente.
Crea una cartella chiamata Inserisci dentro il pagine cartella. Dentro il Inserisci cartella, creare un file chiamato add.component.html e aggiungi il seguente codice:
Task Manager Ionico Inserisci attività
Il codice sopra mostra lo schermo per aggiungere una nuova attività.
È necessario visualizzare la schermata sopra quando l'utente fa clic sull'icona più nella schermata dell'elenco. Quindi lo mostrerai come popup modale.
Crea un file chiamato add.component.ts e aggiungi il seguente codice:
importare Component da '@ angular / core'; @Component (selector: 'page-add', templateUrl: 'add.component.html') export class AddPage costruttore ()
Come visto nel codice sopra, hai appena creato il componente Aggiungi specificando il selettore e TemplateURL.
Registrare il componente importandolo nel app.module.ts file all'interno del src / app cartella. Ecco come è stato modificato app.module.ts aspetto del file:
importare BrowserModule da '@ angular / platform-browser'; import ErrorHandler, NgModule da '@ angular / core'; import IonicApp, IonicErrorHandler, IonicModule da 'ionico-angolare'; import SplashScreen da '@ ionic-native / splash-screen'; import StatusBar da '@ ionic-native / status-bar'; import ListPage da '... /pages/list/list.component'; importare AddPage da '... /pages/add/add.component'; importare MyApp da './app.component'; import HomePage da '... / pages / home / home'; @NgModule (dichiarazioni: [MyApp, HomePage, ListPage, AddPage], importa: [BrowserModule, IonicModule.forRoot (MyApp)], bootstrap: [IonicApp], entryComponents: [MyApp, HomePage, ListPage, AddPage], provider: [ StatusBar, SplashScreen, fornire: ErrorHandler, useClass: IonicErrorHandler]) export AppModule
Per mostrare il Aggiungi pagina componente in un popup modale, è necessario importare ModalController fornito da ionici angolare. Importare ModalController nel list.component.ts.
import ModalController da 'ionico-angolare';
Crea un metodo chiamato presentAddModal e creare una modale usando l'importato ModalController. Ecco come list.component.ts aspetto del file:
importare Component da '@ angular / core'; import ModalController da 'ionico-angolare'; importare AddPage da '... /add/add.component'; @Component (selector: 'page-list', templateUrl: 'list.component.html') export class ListPage costruttore (public modalCtrl: ModalController) presentAddModal () let addModal = this.modalCtrl.create (AddPage ); addModal.present ();
Registrare l'evento click sul pulsante Aggiungi in list.component.html.
Salvare le modifiche precedenti e riavviare il server Ionic. Fare clic sull'icona Aggiungi nella pagina di elenco e si avrà la pagina di attività di aggiunta.
Per il pulsante Indietro nella schermata Aggiungi attività, è necessario aggiungere un respingere metodo sul pulsante clic nel add.component.ts file.
Importa il ViewController modulo e chiama il respingere metodo per tornare alla schermata di elenco. Ecco come appare:
importare Component da '@ angular / core'; importare ViewController da 'ionic-angular'; @Component (selector: 'page-add', templateUrl: 'add.component.html') export class AddPage costruttore (public viewCtrl: ViewController) dismiss () this.viewCtrl.dismiss ();
In questo tutorial hai visto come iniziare a creare un'app mobile utilizzando il framework Ionic, che utilizza Angular. Hai creato la vista per un'app di gestione attività. Hai creato il componente Aggiungi e il componente Elenco.
Nella parte successiva di questa serie di tutorial, implementerai la funzionalità dell'app per la gestione delle attività per aggiungere ed elencare le attività.
Il codice sorgente di questo tutorial è disponibile su GitHub.
Fateci sapere i vostri suggerimenti nei commenti qui sotto.
Accentsconagua