Share
En esta serie de tutoriales, veremos cómo crear un carrito de la compra sencillo utilizando AngularJS. Esta serie de tutoriales se centrará en el uso de las directivas de AngularJS. Las directivas AngularJS son la parte central de AngularJS e imparten un comportamiento especial al HTML. De los documentos oficiales:
En un nivel alto, las directivas son marcadores en un elemento DOM (como un atributo, nombre de elemento, comentario o clase CSS) que le dicen al compilador HTML de AngularJS ($ compilar) para adjuntar un comportamiento específico a ese elemento DOM o incluso transformar el elemento DOM y sus hijos.
Usaremos Bootstrap para diseñar nuestra página. Una vez que hayamos terminado con nuestra página diseñada de Bootstrap, la integraremos en nuestra aplicación AngularJS. Al diseñar la página, no entraremos en muchos detalles de Bootstrap, pero nos centraremos en algunos puntos críticos.
Crear una página llamada index.html. Descarga e incluye los archivos de Bootstrap para index.html.
Carro Bootstrap Shop
Dentro de .envase div, crea un .fila div.
En el index.html Página, tendremos dos columnas. Uno tendrá una lista de artículos con precios mostrados, y la otra columna tendrá la Total div. Así que vamos a crear las dos columnas.
Ahora, en la primera columna vamos a agregar algunos elementos y opciones.
Título del panel
Replique el código HTML anterior unas cuantas veces en la primera columna para tener algunos elementos más. En la segunda columna, agregue el siguiente código HTML para mostrar la suma del precio de los artículos seleccionados.
Total
Rs. 100
Revisa
Guarda los cambios y navega index.html. Debería verse como
Se ve bien. Pero una cosa que necesitamos arreglar es hacer el Total div arreglado, para que no se mueva cuando nos desplazamos por el navegador. Para solucionarlo, utilizaremos el componente de JavaScript Bootstrap, Affix.
Primero asegúrese de haber incluido el archivo JavaScript Bootstrap. Para agregar el comportamiento del afijo, simplemente agregue el data-spy = "afijo" atribuir a la Total div. Opcionalmente, también podemos especificar la posición que queremos que coloque, así que mantengámosla a una cierta altura desde la parte superior agregando data-offset-top = "20". Ahora, si navegas index.html e intenta desplazarte hacia abajo en el navegador, el total permanece en la parte superior y siempre visible.
Mientras creamos nuestra aplicación AngularJS, utilizaremos la directiva ngView para cambiar de vista. Así que tendremos que ejecutar la aplicación AngularJS usando un servidor. Por lo tanto usaremos un servidor Node.js.
Empecemos creando un directorio para nuestro proyecto llamado Carrito de compras. Dentro Carrito de compras crear un archivo llamado server.js. Usaremos Express, un marco de aplicación web de NodeJS, para renderizar las páginas. Entonces instala exprimir utilizando npm.
npm install express
Una vez que Express se haya instalado correctamente, abra server.js, requiera Express y cree una aplicación.
Accentsconagua
'use strict' var express = require ('express'); var app = express ();Mantendremos nuestros archivos AngularJS en una carpeta separada llamada público. Crea una carpeta llamada público. Dentro server.js definir el /público y / node_modules camino.
app.use ('/ public', express.static (__ dirname + '/ public')); app.use ('/ node_modules', express.static (__ dirname + '/ node_modules'));A continuación, enlace la aplicación a una dirección de puerto local.
app.listen ('3000', function () console.log ('Servidor que se ejecuta en http: // localhost: 3000 !!'))Ahora inicie el servidor Node.js y debería obtener el mensaje de servidor iniciado en el terminal.
nodo server.js
Pero si intenta navegar en http: // localhost: 3000, se mostrará el error. No puedo conseguirlo / Porque aún no hemos definido ninguna ruta..
Dentro de público directorio crear una página llamada main.html. Esto servirá como nuestro archivo de plantilla raíz. Simplemente copia el index.html página que hemos creado anteriormente en main.html. Desde main.html eliminar el contenido dentro del cuerpo.
Descarga AngularJS e inclúyelo en main.html. Agregue la directiva ngApp a la parte superior de la etiqueta HTML.
Dentro de main.html cuerpo, agregue un div con la directiva ngView. Después de hacer todos los cambios anteriores, aquí es cómo main.html miradas
Carro Bootstrap Shop
Ahora, definamos nuestra página predeterminada para procesar cuando se inicia el servidor de nodos. Abierto ShoppingCart / server.js y agregue la siguiente ruta de aplicación para redirigir al main.html página.
app.get ('/', function (req, res) res.sendFile ('main.html', 'root': __ dirname + '/ public');)Guarde los cambios y reinicie el servidor de nodo. Dirija su navegador a http: // localhost: 3000 y debería poder ver una página en blanco, a diferencia de la última vez que tuvimos un error en la misma ruta.
A continuación, integremos el diseño del carrito de compras en la aplicación AngularJS. Dentro de público directorio crear otra carpeta llamada carro. Dentro carro crear dos archivos, cart.html y cart.js. Desde nuestra página de diseño de Bootstrap llamada index.html, Copia el contenido dentro del cuerpo y pega en cart.html.
Estaremos requiriendo ngRuta, así que instálalo usando npm.
npm instalar ruta angular
Una vez instalado, añadir una referencia a ruta angular en main.html.
Abrir cart.js y definir el carro módulo.
angular.module ('cart', ['ngRoute'])Como se ve en el código anterior, hemos inyectado el ngRuta Módulo, que utilizaremos para definir las rutas..
.config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ cart', templateUrl: 'public / cart / cart.html', controller: 'CartCtrl');])Utilizando la ngRuta módulo, hemos definido el /carro Ruta con su respectiva plantilla y controlador. Además, define la CartCtrl controlador en el interior cart.js. Aquí es cómo cart.js miradas
'uso estricto'; angular.module ('cart', ['ngRoute']) .config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ cart', templateUrl: 'public / cart / cart.html ', controlador:' CartCtrl ');]) .controller (' CartCtrl ', [function () ]);También necesitaremos tener un archivo raíz para inyectar todos los módulos en nuestra aplicación AngularJS. Así que dentro de la público directorio crear un archivo llamado app.js. Este archivo servirá como archivo raíz para la aplicación AngularJS. Crea un nuevo módulo llamado carrito de compras dentro app.js e inyectar el módulo de carrito en él.
angular.module ('shoppingCart', ['ngRoute', 'cart']).Defina la ruta por defecto para la aplicación AngularJS /carro dentro app.js.
'uso estricto'; angular.module ('shoppingCart', ['ngRoute', 'cart']). config (['$ routeProvider', function ($ routeProvider) $ routeProvider.otherwise (redirectTo: '/ cart');]);Añadir una referencia a cart.js y app.js en el main.html página.
Guarde todos los cambios y reinicie el servidor. Dirija su navegador a http: // localhost: 3000 y debería mostrar la página del carrito.
Ahora, si se desplaza hacia abajo la página, la Total div no permanece fijo. Tome nota de este problema: lo arreglaremos más adelante en la serie.
Dentro del directorio público, cree una carpeta llamada revisa. Dentro de revisa carpeta, crea dos archivos llamados checkout.html y checkout.js. Abierto checkout.html y añada el siguiente código HTML:
Cotización
UPC Rs. 20000 Disco duro Rs. 5000 Total: Rs. 25000 Personalizar
Abierto checkout.js y crea el revisa módulo. Inyectar el ngRuta Módulo y definir la plantilla por defecto y su lógica de controlador. Aquí es cómo checkout.js finalmente mira:
'uso estricto'; angular.module ('checkout', ['ngRoute']) .config (['$ routeProvider', function ($ routeProvider) $ routeProvider.when ('/ checkout', templateUrl: 'public / checkout / checkout.html ', controller:' CheckoutCtrl ');]) .controller (' CheckoutCtrl ', [' $ scope ', function ($ scope) ]);Incluir una referencia a checkout.js en el main.html expediente.
Inyectar el modulo revisa en app.js de manera que la carrito de compras La aplicación AngularJS es consciente de este módulo..
angular.module ('shoppingCart', ['ngRoute', 'cart', 'checkout']).Guarde los cambios y reinicie el servidor. Dirija su navegador a http: // localhost: 3000 / # / checkout y debería poder ver la página de checkout.
En este tutorial, diseñamos e integramos el diseño simple de nuestro carrito de compras en una aplicación AngularJS. En la siguiente parte de esta serie, veremos cómo crear una directiva personalizada para implementar la funcionalidad requerida.
El código fuente de este tutorial está disponible en GitHub. Háganos saber sus opiniones, correcciones y sugerencias en el cuadro de comentarios a continuación.!
