Angular 2 con javascript
Angular 2 con javascript
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

En este tutorial vamos a ver lo sencillo que es utilizar AngularJS en SailsJS, cómo ya sabemos, AngularJS nos ofrece la posibilidad de hacer todo lo que necesitemos en la parte del cliente, y SailsJS es un framework MVC muy potente basado en NodeJS.

Lo siguiente es todo lo que vamos a hacer en este tutorial:

  • Crear un proyecto básico con sails.
  • Configurar el directorio assets para trabajar con AngularJS.
  • Modificar los archivos layout.ejs y homepage.ejs para trabajar con AngularJS.
  • Crear rutas con el módulo ngRoute.
  • Crear una app con AngularJS encargada de la aplicación.
  • Crear dos controladores para poder movernos por la aplicación.
  • Crear una factoría con AngularJS que haga una petición a SailsJS.
  • Configurar mysql con SailsJS.
  • Crear la tabla posts desde código con SailsJS.
  • Obtener los posts utilizando SailsJS.

El ejemplo completo lo tienes disponible para descargar en mi repositorio de github.

Ahora que sabemos todo lo que vamos a hacer, debes crear tu proyecto con el siguiente comando y abrirlo con tu editor favorito, de paso instalamos mysql para sails.


Ahora abre el archivo config/connections.js y añade la siguiente conexión mysql, obviamente, debes modificar los datos por los de tu conexión.


Ahora abre el archivo config/models.js y reemplaza el contenido por el siguiente.


Ahora es momento de crear la api posts en SailsJS, así que ejecuta el siguiente comando desde tu terminal.


Esto habrá generado un archivo alojado en api/models llamado Posts.js, ábrelo y reemplaza el código por el siguiente.


Si tienes dudas con el proceso anterior te recomiendo que revises esta entrada donde está todo explicado.

Con todo lo anterior, sólo debemos levantar el servidor y nuestra tabla posts será creada automáticamente.

Obtener todos los posts con SailsJS

Para obtener todos los posts y poder solicitarlos después con AngularJS, abre el archivo PostsController.js alojado en api/controllers y reemplaza el código por el siguiente.

Configurar AngularJS con SailsJS

Ahora vamos a crear todos los archivos necesarios para llevar a cabo nuestro ejemplo, en este caso, para hacer funcionar AngularJS, abre el directorio assets y crea los siguientes archivos.

  • js/app.js
  • js/controllers.js
  • js/factories.js
  • partials/home.html
  • partials/profile.html

Con eso es suficiente, obviamente, debemos escribir el código necesario, pero esa estructura será suficiente, abre el archivo app.js y añade el siguiente código.


Haz lo mismo con el archivo controllers.js.


Y factories.js.

Si tienes dudas con el código anterior aquí tienes un curso completo de AngularJS

Ya que tenemos casi todo listo, vamos a añadir el html a los archivos home.html y profile.html respectivamente.


Ahora sólo nos quedan por modificar dos archivos y ambos están en el directorio views, y son layout.ejs y homepage.ejs, abre primero el layout y reemplaza el código por el siguiente.


Cómo puedes ver, sólo creamos una sencilla navegación con bootstrap y cargamos los css y js necesarios, lo interesante es la variable body, y eso simplemente imprime el contenido del archivo homepage.ejs, así que abre el archivo y añade lo siguiente.


Ahora sólo debes visitar la url http://localhost:1337/#/home y podrás ver cómo aparecen los posts.

El ejemplo completo lo tienes disponible para descargar en mi repositorio de github.