Mobile Angular UI - Configurazione del progetto

Questo capitolo lavorerà sulla configurazione del progetto. Utilizzeremo questa configurazione per lavorare con gli esempi nel resto dei capitoli.

La configurazione del progetto verrà eseguita utilizzando npm, poiché è facile installare tutti i pacchetti richiesti.

Apri il prompt dei comandi e crea una directory chiamata uiformobile / e accedi alla directory utilizzando il comando cd.

Ora esegui il seguente comando:

npm init

Il comando npm init inizializzerà il progetto -

Creerà package.json come mostrato di seguito -

{
   "name": "uiformobile",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
}

Ora esegui il seguente comando per installare l'interfaccia utente angolare mobile.

npm install --save mobile-angular-ui

Per lavorare con la Mobile Angular UI, abbiamo bisogno di AngularJS. Installiamolo usando il seguente comando:

npm install --save-dev angular

Abbiamo anche bisogno del percorso angolare per lavorare con il routing. Per installarlo il comando è -

npm install --save-dev angular-route

Avremmo bisogno di un server che eseguirà la nostra app nel browser. Faremo uso di express.

Il comando per installare Express è -

npm install --save-dev express

Crea un file server.js all'interno della cartella principale. Questo file avrà il comando rapido per avviare il server.

Ecco i dettagli di server.js -

const express=require('express')
const app=express();
const port=3000;
var path=require("path");
app.use("/node_modules", express.static("D:/uiformobile/node_modules"));
app.use("/src", express.static("D:/uiformobile/src/"));
app.use("/src/js", express.static("D:/uiformobile/src/js"));
app.all("/*", function (req, res, next) {
   res.sendFile("index.html", { root: "D:/uiformobile/" });
});
app.listen(port, () => console.log('Starting your Mobile Angular App on port ${port}!'))

Per avviare il server, utilizzare il seguente comando:

node server.js.

Il server verrà avviato dalla porta 3000. È possibile utilizzare http://localhost:3000/ per vedere l'interfaccia utente nel tuo browser.

La struttura della cartella finale è come mostrato di seguito:

La cartella node_modules / contiene tutti i pacchetti installati per mobile_angular_ui, angularjs e angular-route.

Il src/cartella conterrà i file HTML e js necessari per lo sviluppo dell'interfaccia utente. Index.html è il punto iniziale che verrà visualizzato quando colpiscihttp://localhost:3000/.

Ora i pacchetti richiesti sono installati. Parliamo ora degli importanti file css e js di cui abbiamo bisogno. Sebbene il framework sia pensato per l'applicazione mobile, può essere utilizzato anche per le app desktop.

Di seguito sono riportati i file CSS importanti che è obbligatorio includere nei file .html.

Suor n	Descrizione del file
1	mobile-angular-ui-base.css Questo file css è pensato per dispositivi mobili e tablet.
2	mobile-angular-ui-desktop.css File CSS reattivo pensato per essere utilizzato su desktop e dispositivi mobili.
3	mobile-angular-ui-hover.css Questo ha regole CSS per il passaggio del mouse.
4	angular.min.js File AngularJS di cui abbiamo bisogno per iniziare con il progetto.
5	mobile-angular-ui.min.js Questo è il file js dell'interfaccia utente angolare mobile che dobbiamo utilizzare nel modulo delle dipendenze nel modulo AngularJS. Questo è il modulo principale.
6	angular-route.min.js Questo è un file di route AngularJS utilizzato per il routing.

Tutti i file di cui sopra sono presenti all'interno node_modules/. Abbiamo finito con la configurazione del progetto, ora utilizzeremo questo progetto nel prossimo capitolo per sviluppare la nostra prima app.