Interfaz de usuario angular móvil: configuración del proyecto

Este capítulo trabajará en la configuración del proyecto. Vamos a hacer uso de esta configuración para trabajar con ejemplos en el resto de los capítulos.

La configuración del proyecto se realizará mediante npm, ya que es fácil instalar los paquetes necesarios.

Abra su símbolo del sistema y cree un directorio llamado uiformobile / e ingrese el directorio usando el comando cd.

Ahora ejecute el siguiente comando:

npm init

El comando npm init inicializará el proyecto -

Creará package.json como se muestra a continuación:

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

Ahora ejecute el siguiente comando para instalar la interfaz de usuario angular móvil.

npm install --save mobile-angular-ui

Para trabajar con la interfaz de usuario angular móvil, necesitamos AngularJS. Instalemos eso usando el siguiente comando:

npm install --save-dev angular

También necesitamos la ruta angular para trabajar con el enrutamiento. Para instalarlo, el comando es:

npm install --save-dev angular-route

Necesitaríamos un servidor que ejecute nuestra aplicación en el navegador. Haremos uso de express.

El comando para instalar express es:

npm install --save-dev express

Cree un archivo server.js dentro de la carpeta raíz. Este archivo tendrá el comando expreso para iniciar el servidor.

Aquí están los detalles de 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}!'))

Para iniciar el servidor, use el siguiente comando:

node server.js.

El servidor se iniciará en el puerto 3000. Puede utilizar http://localhost:3000/ para ver la interfaz de usuario en su navegador.

La estructura de carpetas final es la que se muestra a continuación:

La carpeta node_modules / tiene todos los paquetes instalados para mobile_angular_ui, angularjs y angular-route.

los src/La carpeta tendrá los archivos HTML y js necesarios para el desarrollo de la interfaz de usuario. El index.html es el punto de inicio que se verá cuando presionehttp://localhost:3000/.

Ahora se instalan los paquetes necesarios. Hablemos ahora de los archivos CSS y JS importantes que necesitamos. Aunque el marco está diseñado para aplicaciones móviles, también se puede utilizar para aplicaciones de escritorio.

A continuación se muestran los archivos CSS importantes que es obligatorio incluir en sus archivos .html.

No Señor	Descripción del archivo
1	mobile-angular-ui-base.css Este archivo css está destinado a dispositivos móviles y tabletas.
2	mobile-angular-ui-desktop.css Archivo css receptivo diseñado para ser utilizado en dispositivos móviles y de escritorio.
3	mobile-angular-ui-hover.css Esto tiene reglas CSS para hover.
4	angular.min.js Archivo AngularJS que necesitamos para comenzar con el proyecto.
5	mobile-angular-ui.min.js Este es el archivo js de UI angular móvil que debemos usar en el módulo de dependencia en el módulo AngularJS. Este es el módulo principal.
6	angular-route.min.js Este es un archivo de ruta AngularJS utilizado para enrutamiento.

Todos los archivos anteriores están presentes dentro node_modules/. Hemos terminado con la configuración del proyecto, ahora vamos a hacer uso de este proyecto en el próximo capítulo para desarrollar nuestra primera aplicación.

↰ Previous page Next page ↱