AngularJS en Ruby on Rails

rubyonrails

En este tutorial vamos a ver lo sencillo que es implementar AngularJS en Ruby on Rails, instalaremos la gema angularjs-rails la cuál nos ofrece todos los módulos necesarios para construir aplicaciones, ngRoute y $resource entre otros.

Para este ejemplo vamos a construir la aplicación utilizando foundation, si tienes dudas sobre la instalación puedes visitar este tutorial.

AngularJS es un poderoso framework javascript que nos permite hacer mucho con muy poco código, si quieres saber más de AngularJS aquí tienes un curso completo.

Instalar Angular en Ruby on Rails

Para instalar Angular en Ruby on Rails simplemente abre tu archivo de gemas y añade la siguiente.


Si te fijas, he comentado la gema coffee-rails, ya que vamos a escribir javascript y no coffee debemos comentarla a fin de que los archivos creados por cada controller tengan extensión .js en lugar de .coffee.

Ya puedes instalar la gema con el siguiente comando.


Ahora abre el archivo app/assets/javascripts/application.js y añade las dos siguientes lineas para añadir la AngularJS y el módulo angular-route a Ruby on Rails.

El modelo Monster

Ahora vamos a crear un nuevo modelo llamado monster que representará monstruos, así que ejecuta el siguiente comando.


Abre la migración que se ha generado, habilita los timestamps (si tienes dudas revisa tutoriales anteriores) y crea la tabla con el comando.


Vamos a añadir unos pocos monstruos, para ello abre el archivo de seeds y añade las siguientes líneas.


Para que esos datos sean grabados en nuestra tabla monsters ejecuta el siguiente comando.


Ahora debemos crear un nuevo controlador, lo llamaremos home y tendrá dos métodos, index y monsters, así que ejecuta el siguiente comando.


Establece home/index como la ruta principal de tu aplicación y modifica el método monsters del controlador home para que devuelva todos los monstruos en formato json.


Ahora vamos a configurar Ruby on Rails para que sepa que estamos trabajando bajo AngularJS, para ello, abre el archivo app/views/layouts/application.html.erb y haz una pequeña modificación.


Ya que hemos incluido un parcial ubicado en public/partials llamado nav.html, crea el directorio y el archivo y añade el siguiente código, el cuál sólo añade una sencilla navegación utilizando Foundation.


Ahora abre el archivo app/assets/javascripts/home.js y añade el siguiente código, el cuál añade toda la lógica de AngularJS.


Sólo nos queda crear el directorio public/templates y dentro dos archivos, el primero home.html con el siguiente contenido.


Y el segundo el monsters.html.


Si has seguido todos los pasos bien ya debes poder levantar el server y ver trabajando AngularJS en Ruby on Rails.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies