Basic on Rails and AngularJS

Tram Ho

I. Introduction

AngularJS is an extremely popular javascript library, allowing you to quickly and easily create rich websites and web applications. In this article I will show you how to integrate AngularJS into your Rails application. I will build a simple AngularJS application called VisitorsCenter. VisitorsCenter allows users to track visitors to and from a building like an office building. Let’s get started.

II. Environment settings in rails application

Before our area starts, we have to add a few libraries into Gemfile. Gem angularJs-rails integrates AngularJS library into rails application. Gem bootstrap-sass only adds support for bootstrap so we can focus on the code rather than the interface of the application. Add these gems to the Gemfile file

And then run bundle install to install the gems. Next, we need to create a model called Visitor in the application. This model will represent visitors to the office. Run the following command to create the Visitor model:

Great, now let’s create VisitorsController to interact with the Visitor model. VisitorsController will have 3 actions in this example. The first action, the index will return the page listing the number of visitors. The second action, create is responsible for creating a Visitor. The third action, destroy will delete 1 Visitor. Run the following command to create VisitorsController:

Now edit the routes.rb file to set the path and root url for the application.

The defaults: {format: :json} tells Rails that we want to return the default json for controller actions. We do this because most of the interactions in our application are via JSON. By default, AngularJS knows nothing about CSRF in our application. We need a way to tell Angular how to interact with Rails through CSRF protection. Fortunately we have a way to do that. Open ApplicationController and add the following code:

The above code will create a cookie called XSRF-TOKEN that will contain form_authenticity_token. Whenever the request is made, AngularJS will prepare the token in the HTTP header for the request. Now edit VisitorsController to access the Visitor model

The code above is typical of Rails, with the exception that we will return JSON. Since our application will communicate primarily via AJAX, we do not need other HTML for the index action, but will return html or json as required. Next we need to add support for both AngularJS and Bootstrap to the application.js file. Open the application.js file and modify it as follows:

In the above code, we have added AngularJS support as well as Boostrap for the application. We need another support called angular-resource which allows us to easily manipulate Rails. Now let’s add css to bootstrap. Create a new file named bootstrap_config.scss and fix it as follows:

The next thing we need to do is create the AngularJS application. AngularJS applications often include Javascript combined with HTML. To start doing this, the first thing we need to do is rename the file visitor.js.coffee to visitor.js and modify it to look like below. You can also rewrite in CoffeeScript, but I will use JavaScript for people who don’t know about CoffeeScript.

There is a lot to learn in the above code, so I’ll break them up into sections and explain them, the first line:

Define an AngularJS module. AngularJS modules can be considered individual components in your application. You will notice I include ngResource as an argument. ngResource for easy access to RESTful resources like the Rails application. The next line:

Define a service, in this case, it binds to the previously mentioned ng-Resource service and tells AngularJS how to communicate with our application. The next line:

Define a controller. The controller tells AngularJS how to interact with our Rails application similar to the Rails controller used to tell rails how views are interacted with models. Now that we have written the Javascript application, we need to create a view so everything can work together. Open the index view for VisitorController and fix it as follows:

The code snippet as below:

The outer div on the first line has an attribute called ng-app. The ng-app attribute tells Angular that this is part of our AngularJS application. In this case, we define the name of the module AngularJS, VisitorCenter.

The next line div contains an attribute called ng-controller. This attribute tells AngularJS that we want to use VisitorsController as controller for this part of the application

The ng-submit property on our form tells Angular that we want to use the addVisitor () method on our controller to handle the form’s request. Each input contains an attribute of ng-model. This attribute maps the input elements to our model.

The ng-show attribute above the first row tells AngularJS that we only want to display this row if the condition mentioned is appropriate. In this case there is no visitor access

The ng-repeat property is a loop. This loop tells AngularJS that we want to repeat each visitor.

The text contained in {{…}} is a method of AngularJS. In this case we are telling AngularJS to display the fields mentioned in that expression.

The ng-click button for AngularJS runs into the function in the specified controller when the html tag is clicked. In this case we run the code to delete the specified visitor. This is an introduction to AngularJS and Rails. Thanks for reading.

Share the news now

Source : Viblo