Adding AngularJS to a Rails App

Hello again! My next blog post will get away from Ruby and deal with a new language and framework I’ve been learning. That language is JavaScript and the framework is AngularJS. AngularJS is a very powerful tool which extends HTML and can be used to make pages more dynamic. It is a library written in JavaScript.

Of course, the first thing we must do is add AngularJS to our Rails app so we can take advantage of all it has to offer. Follow the steps below to get AngularJS up and running:

1.) Go to the AngularJS website: https://angularjs.org/ and download the uncompressed angular.js file.

2.) Within your Rails app, copy that file into the vendor/assets/javascripts folder.

3.) To the app/assets/javascripts/application.js file (also known as the asset pipeline), add the line //= require angular on the line above //= require_tree.

4.) In the same file, remove the //= require turbolinks line. I don’t know much about Turbolinks at this point, but I’ve been advised it can cause problems down the road.

5.) Create a new file inside app/assets/javascripts folder called app.js.

6.) To that file, add the following code:

function() { 
"use strict";
  angular.module("app", []); 
}());

The “use strict” enables a JavaScript “strict mode” which detects more errors in your code and helps to prevent unsafe actions.

7.) Go back into the app/assets/javascripts/application.js file and add the line //= require app BELOW the //=require angular line. It must go in this position because it is dependent on Angular being loaded first.

There you have it! You are now ready to start working with AngularJS on your HTML pages.

Now, let’s do something very simple with Angular to test that it is working properly and to get a bit of a feel for how it works. First let’s create an Angular controller which will communicate back and forth with the HTML pages in our app. To do this, we must first create a file within the app/assets/javascripts folder. The name of the file is up to you, but it should be something logical that pertains to how it will function. For example, if it will be used in conjunction with an HTML page about products, we could call it product_ctrl.js

Once this file has been created, place the following code in the file:

function() { 
"use strict";
}());

Again, this enables a JavaScript “strict mode” and all our code will be written within this function.

Next, we must initiate our controller by adding code to the above:

function() { 
"use strict";
  angular.module("app").controller("productCtrl", function($scope) {
  });
}());

The name of our controller is productCtrl. The name is up to you, but it makes sense to have it relate to the file name. Also, note the convention used in the name: lower camel case. The $scope is a part of AngularJS. It is an object with available properties and methods which can be used in both the view (HTML page) and the controller.

Now inside the controller, let’s do something simple. We can add code such as the following:

function() { 
"use strict";
  angular.module("app").controller("productCtrl", function($scope) {
@scope.product = "television";
});
}());

This will assign “television” to the variable product and associate it with the scope. Now, we can use the variable product in our view. In the view, we can write the following:

<div ng-app="app">
<div ng-controller="productCtrl">
<p>{{ product }}</p>
</div>
</div>

The <div ng-app=”app”> initiates AngularJS and <div ng-controller=”productCtrl”> initiates our controller. The <p>{{ product }}</p> will display the variable product (in this case, “television”). The double curly braces {{}} denote an Angular variable within HTML. So, the above code would display the word “television” on our view page.

Congratulations! You are now on your way to developing dynamic apps with JavaScript and AngularJS!

Like what you read? Give John Messina a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.