Share
În această serie de tutori, veți afla cum să începeți să creați o aplicație mobilă utilizând cadrul ionic. Ionic foloseste Angular pentru scrierea componentelor si crearea aplicatiei mobile.
De-a lungul acestei serii, veți crea o aplicație mobilă pentru administratorii de sarcini simple, utilizând cadrul ionic.
Din documentația oficială:
Ionic este SDK-ul mobil frumos, gratuit și open source pentru dezvoltarea ușoară a aplicațiilor web native și progresive.
Să începem prin instalarea de ioni folosind Node Package Manager (npm). Înainte de a instala ionic, asigurați-vă că aveți Node.js instalat pe sistemul dvs..
npm instalați -g cordova ionic
Odată instalat Ionic, creați un nou proiect Ionic blank folosind următoarea comandă:
pornire ionică unghiular-ionică de pornire
Veți testa aplicația Ionic în browser până când va fi terminată. După finalizare, veți testa aplicația pe un dispozitiv Android.
Introduceți următoarea comandă pentru a rula aplicația din browser.
ionice
Punctați browser-ul dvs. la http: // localhost: 8100 / și ar trebui să aveți proiectul ionic rulând.
Iată cum arată structura proiectului:
În interiorul proiectului ionic, aveți un dosar numit src / app. În interiorul aplicaţia folder, veți găsi un fișier numit app.module.ts în cazul în care modulul rădăcină AppModule este definit.
În app.module.ts fișier în interiorul importuri , puteți vedea că componenta rădăcină a fost definită utilizând următorul cod:
IonicModule.forRoot (AplicațiaMea)
AplicațiaMea a fost importat din app.component unde a setat rootPage la fel de Pagina principala, care apare când se încarcă aplicația.
Să creați vizualizarea pentru listarea sarcinilor adăugate. În interiorul src / pagini folder, creați un alt dosar pentru listă componentă numită listă.
În interiorul listă folder, creați un fișier numit list.component.html care ar fi șablonul de componentă. Adăugați următorul cod la list.component.html fişier:
Listă de sarcini ionice Sarcina 1 Sarcina 2 Sarcina 3
După cum se vede în codul de mai sus, ați utilizat etichete specifice ionice pentru crearea elementelor. Puteți consulta documentația oficială ionică pentru a obține o listă a API-urilor componente ionice pe care le puteți utiliza în timpul creării șabloanelor.
Pentru a controla șablonul creat mai sus, veți avea nevoie de o clasă de controlor. Creați un fișier numit list.component.ts și să definească ListPage clasă. Iată cum arată:
import Component de la '@ angular / core'; @Component (selector: 'page-list', templateUrl: 'list.component.html') clasa de export ListPage constructor ()
Ați definit componenta listei sarcini utilizând @Component decorator. În interiorul @Component decorator, ați definit selectorul folosind selector cheie și șablon folosind templateUrl cheie pentru componentă.
Aplicația trebuie să știe că componenta de mai sus există și de aceea trebuie să o importați în modulul rădăcină.
Importați ListPage clasa în interiorul src / app / app.module.ts fișier și includeți-l în declaraţii și entryComponents listă. Iată cum a fost modificat app.module.ts file looks:
import BrowserModule din '@ unghiular / platform-browser'; import ErrorHandler, NgModule de la '@ angular / core'; import IonicApp, IonicErrorHandler, IonicModule de la "ionic-unghiular"; import SplashScreen de la '@ ionic-native / splash-screen'; importați StatusBar din "@ ionic-native / status-bar"; import ListPage din "... /pages/list/list.component"; import MyApp din "./app.component"; importați HomePage din "... / pages / home / home"; @NgModule (declarații: [MyApp, HomePage, ListPage], import: [BrowserModule, IonicModule.forRoot (MyApp)], bootstrap: [IonicApp], entryComponents: [StatusBar, furnizați: ErrorHandler, useClass: IonicErrorHandler]) clasa de export AppModule
Când aplicația se încarcă, doriți ca noua componentă a listei să fie afișată în loc de Pagina principala. Deci, modificați rootPage definite în interiorul app.component.ts fişier.
import Component de la '@ angular / core'; import Platform de la "ionic-unghiular"; importați StatusBar din "@ ionic-native / status-bar"; import SplashScreen de la '@ ionic-native / splash-screen'; importați HomePage din "... / pages / home / home"; import ListPage din "... /pages/list/list.component"; @Component (templateUrl: 'app.html') clasa de export MyApp rootPage: any = ListPage; constructor (platformă: Platformă, statusBar: StatusBar, splashScreen: SplashScreen) platform.ready (), apoi (() => statusBar.styleDefault ();
După cum se vede în codul de mai sus, ați importat ListPage în interiorul app.component.ts fișier și modificat rootPage la ListPage in loc de Pagina principala.
Salvați modificările de mai sus și porniți serverul Ionic utilizând următoarea comandă:
ionice
Ar trebui să aveți aplicația mobilă care rulează la http: // localhost: 8100 /.
Din ecranul de afișare, veți adăuga un link pentru a adăuga elemente în listă. Să plasăm o pictogramă de adăugare în partea dreaptă a ecranului. În interiorul list.component.html fișier, adăugați următoarele pentru a adăuga pictograma plus.
Iată cum a fost modificat list.component.html file looks:
Ionic Task Manager Sarcina 1 Sarcina 2 Sarcina 3
Salvați modificările de mai sus și reporniți serverul și veți avea pictograma plus afișată pe ecran.
Când utilizatorul face clic pe pictograma plus, trebuie să afișați ecranul pentru a adăuga noi sarcini. Deci, să creăm o altă componentă numită Adăuga component.
Creați un dosar numit adăuga în interiorul pagini pliant. În interiorul adăuga folder, creați un fișier numit add.component.html și adăugați următorul cod:
Ionic Task Manager Introduceți sarcina
Codul de mai sus afișează ecranul pentru a adăuga o nouă sarcină.
Trebuie să afișați ecranul de mai sus când utilizatorul face clic pe pictograma plus din ecranul de listă. Deci o să-i arăți ca un pop-up modal.
Creați un fișier numit add.component.ts și adăugați următorul cod:
import Component de la '@ angular / core'; @Component (selector: 'page-add', templateUrl: 'add.component.html') clasa de export AddPage constructor ()
După cum se vede în codul de mai sus, tocmai ați creat componenta Adăugați specificând selector și templateUrl.
Înregistrați componenta importând-o în app.module.ts fișier în interiorul src / app pliant. Iată cum a fost modificat app.module.ts file looks:
import BrowserModule din '@ unghiular / platform-browser'; import ErrorHandler, NgModule de la '@ angular / core'; import IonicApp, IonicErrorHandler, IonicModule de la "ionic-unghiular"; import SplashScreen de la '@ ionic-native / splash-screen'; importați StatusBar din "@ ionic-native / status-bar"; import ListPage din "... /pages/list/list.component"; importați AddPage din "... /pages/add/add.component"; import MyApp din "./app.component"; importați HomePage din "... / pages / home / home"; @NgModule (declarații: [MyApp, HomePage, ListPage, AddPage], importurile: [BrowserModule, IonicModule.forRoot (MyApp)], bootstrap: [IonicApp], entryComponents: [MyApp, HomePage, ListPage, AddPage] StatusBar, SplashScreen, furnizați: ErrorHandler, useClass: IonicErrorHandler]) clasa de export AppModule
Pentru a afișa Adauga pagina componentă într-un pop-up modal, trebuie să importați ModalController furnizat de ionic unghiular. Import ModalController în list.component.ts.
import ModalController de la "ionic-unghiular";
Creați o metodă numită presentAddModal și de a crea un modal folosind importate ModalController. Iată cum list.component.ts file looks:
import Component de la '@ angular / core'; import ModalController de la "ionic-unghiular"; importați AddPage din "... /add/add.component"; @Component (selector: 'page-list', templateUrl: 'list.component.html') clasa de export ListPage constructor (public modalCtrl: ModalController) presentAddModal () addModal = this.modalCtrl.create ); addModal.present ();
Înregistrați evenimentul clic pe butonul de adăugare în list.component.html.
Salvați modificările de mai sus și reporniți serverul Ionic. Faceți clic pe pictograma de adăugare din pagina de listă și veți avea pagina de adăugare a unei sarcini.
Pentru butonul din spate de pe ecranul de sarcini adăugați, trebuie să adăugați o destitui metoda de pe buton faceți clic pe add.component.ts fişier.
Importați ViewController și apelați destitui pentru a reveni la ecranul de afișare. Iată cum arată:
import Component de la '@ angular / core'; import ViewController de la "ionic-unghiular"; @Component (selector: 'page-add', templateUrl: 'add.component.html') clasa de export AddPage constructor (public viewCtrl: ViewController) dismiss () this.viewCtrl.dismiss ();
În acest tutorial, ați văzut cum să începeți să creați o aplicație mobilă utilizând cadrul Ionic, care utilizează unghiular. Ați creat vizualizarea pentru o aplicație de manager de activități. Ați creat componenta Adăugați componente și Listă.
În următoarea parte a acestei serii de tutorial, veți implementa funcționalitatea aplicației manager de activități pentru a adăuga și a lista sarcinile.
Codul sursă din acest tutorial este disponibil pe GitHub.
Spuneți-ne sugestiile dvs. în comentariile de mai jos.
Accentsconagua