Puoi sviluppare applicazioni ioniche su qualsiasi sistema operativo che preferisci. Ionic è stato sviluppato più volte su Mac OS X, Linux e Windows . Come sviluppare applicazioni mobili con Ionic Framework?
Innanzitutto, dobbiamo iniziare con una nota sui requisiti minimi per creare l’applicazione con l’attuale versione di Ionic. Puntare su dispositivi iPhone e Android (attualmente). Supporta fino a iOS 7+ e Android 4.1+.
Tuttavia, in questo momento dovrai utilizzare la riga di comando per seguire questa guida e devi avere OS X per sviluppare e distribuire applicazioni iPhone, quindi OS X è raccomandato se possibile.
Eseguirai i comandi in questa guida nelle finestre Git Bash o Console2 . Innanzitutto, installeremo l’ultima versione di Apache Cordova .
Ciò richiederà la nostra applicazione e la raggrupperà in un contenitore nativo per renderla un’applicazione nativa tradizionale.
Come sviluppare applicazioni mobili con Ionic Framework?
Per installare Cordova, assicurati di aver installato Node.js
$ sudo npm installa -g cordova
Installa Ionic
Ionic viene fornito con una comoda utility da riga di comando per avviare, creare e impacchettare applicazioni Ionic. Per installarlo, esegui semplicemente:
$ sudo npm installa -g ionico
Crea il progetto
Ora, dobbiamo creare un nuovo progetto Cordova da qualche parte sul computer per il codice della nostra applicazione:
$ ionic avvia tutto vuoto - tipo ionico2
Ciò creerà una cartella chiamata tutto nella directory in cui è stato eseguito il comando. Successivamente, entreremo in quella directory ed elencheremo i contenuti.
Ecco come sarà la struttura esterna del tuo progetto ionico:
$ cd all && ls ├── bower.json // dipendenze del bower ├── config.xml // configurazione cordova ├── gulpfile.js // gulp task ├── hook // hook cordova personalizzati da eseguire su comandi specifici ├── ionic.project // configurazione ionica ├── package.json // dipendenze del nodo ├── Le piattaforme // Le build specifiche per iOS / Android risiederanno qui ├── plugins // dove verranno installati i plug-in cordova / ionici ├── scss // codice scss, che verrà trasmesso su www / css / └── www // application - codice JS e librerie, CSS, immagini, ecc.
Configura piattaforme
Ora, dobbiamo dire a ionic che vogliamo abilitare le piattaforme iOS e Android:
La piattaforma $ ionic cordova aggiunge iOS La piattaforma $ ionic cordova aggiunge Android
Provalo
Solo per assicurarsi che il progetto predefinito abbia funzionato, prova a compilare ed eseguire il progetto ( sostituisci invece iOS con Android per compilare con Android ):
$ ionic cordova build ios $ ionic cordova emulate ios
Avvio dell’applicazione
Ora che abbiamo tutto installato e creato un nuovo progetto Cordova , iniziamo a creare una vera applicazione.
Poiché ogni applicazione ionica è fondamentalmente una pagina Web, è necessario disporre di un file index.html nella nostra applicazione che definisca la prima pagina caricata nell’applicazione.
Creiamo www / index.html e inizializziamo con questo:
<! DOCTYPE html> <Html> <Head> <meta charset = "utf-8"> <title> Tutto </title> <meta name = "viewport" content = "initial-scale = 1, maximum-scale = 1, user scalable = no, width = device-width"> <link href = "lib / ionic / css / ionic.css" rel = "stylesheet"> <script src = "lib / ionic / js / ionic.bundle.js"> </script> <! - Necessario per Cordova / PhoneGap (sarà un 404 durante lo sviluppo) -> <script src = "cordova.js"> </script> </ Head> <Body> </ Body> </ Html>
Nella shell precedente, abbiamo incluso Ionic CSS e sia Ionic JS core che Ionic AngularJS nel file ionic.bundle.js.
Ionic viene fornito con ngAnimate e ngSanitize inclusi, ma per utilizzare altri moduli angolari è necessario includerli dalla directory lib / js / angular.
Per creare menu laterali in Ionico, possiamo usare i menu lato ionico. Sentiti libero di leggerlo, ma la marcatura necessaria è semplice. Modifica il file index.html e cambia il contenuto di <body> in questo modo:
<Body> <Ion-side-menù> <Ion-side-menu-content> </ Ion-side-menu-content> <ion-side-menu side = "left"> </ Ion-side-menù> </ Ion-side-menù> </ Body>
Nel codice precedente, abbiamo aggiunto il nostro controller <ion-side-menus> che controllerà il trascinamento e l’esposizione del menu laterale.
All’interno del controller abbiamo un <ion-side-menu-content> che è l’area del contenuto centrale dell’applicazione, e un <side-side-side side = “left”> che è un menu del lato sinistro, inizialmente nascosto.
Inizializzazione dell’applicazione
Innanzitutto, dobbiamo creare un nuovo modulo AngularJS e dire ad Angular di inizializzarlo. Creiamo un nuovo file che si trova in www / js / app.js . Inserisci questo codice nel file:
angular.module ('todo', ['ionic'])Questo è il modo angolare di creare un’applicazione e stiamo dicendo ad Angular di includere il modulo ionico che include tutto il codice ionico che elaborerà le etichette precedenti e renderà viva la nostra applicazione.
Ora, torna a index.html e poco prima della riga <script src = “cordova.js”> </script> , aggiungi:
<script src = "js / app.js"> </script>
Questo include lo script che abbiamo appena creato.
E per far funzionare la nostra nuova applicazione, dobbiamo aggiungere l’attributo ng-app al tag body:
<body ng-app = "everything">
Test della tua applicazione
Esistono quattro modi per testare l’applicazione durante lo sviluppo: in un browser WebKit desktop, nel simulatore iOS o Android , in un browser mobile sul telefono o come applicazione nativa sul telefono.
