AngularJS & The Basics

AngularJS or Angular JavaScript is a JavaScript framework which extends the capabilities of HTML (Hypertext Markup Language). As a framework it accomplishes this by providing a set of attributes, called Directives, and allowing you to develop/define your own as well. Created by Google, AngularJS was developed following the MVC (Model View Controller) model, and was designed to make front end development easier while maintaining all the power we have come to expect from JavaScript. In the following, I will describe step by step how to go about installing AngularJS and implementing it into a simple Ruby on Rails application.

Setting Up

The first step in this process after creating a new application is to download the AngularJS framework from https://angularjs.org/.

Once you reach that website you just want to click on the ‘DOWNLOAD ANGULARJS’ link and select the following from the window that opens below before clicking download.

Within the downloads folder on your computer should be the following file.

We then copy this file, or move it into our Rails application by placing it into our application’s vendor folder as shown below:

Next: Framework & The Asset Pipeline

Once we are done placing the framework in place, we next have to tell Rails how to recognize the framework, by placing it into the asset pipeline. We accomplish this by doing the following.

Within application.js we remove turbolinks and tell Rails to require angular. We do this, since turbolinks and angular tend not to play nicely with one another. It is also important to make sure that this require angular statement comes before require_tree. The require_tree directive tells the asset pipeline to include all the files in the specified directory.

Next: Defining The Module

Now that we have the app foundation built, the next step is to create a app.js file within our app’s javascript folder as shown below.

In the app.js file, with the lines of code shown above, we are defining an angular module called “app” and telling it to use strict mode (“use strict”). Strict mode forces us as developers to write more secure JavaScript. By using Strict mode we are telling the application to not accept “bad syntax” and instead return real errors. In doing so we are making it easier on ourselves to write more secure JavaScript by taking care of errors rather than ignoring them.

One such example of this, is that Javascript will create a new global variable instead of blowing up with an name error, when a developer mistypes a variable name. Strict mode prevents this by making the application throw a name error and in doing so, prevents the developer from accidentally creating a new global variable.

Next: To the Asset Pipeline Once More:

Before we can continue onto our controller we must make sure to place our newly created “app” module into the asset pipeline. We accomplish this by returning to the application.js folder and typing require app before require_tree directive and after require angular as shown below:

We place it after requiring angular, since it relies on angular being loaded first to define the module.

Next: Defining The Controller

Since we are using Rails which also follows the MVC model, it is important for us to build a controller to serve as the middle ground of our application for our front end and back end. First we must create a new javascript or .js file within the javascripts folder. For this example purpose, I have named it example_controller.js since it will serve as the controller for this app. We then type the following lines of code as shown below:

By writing these lines of code, we are defining the new “example_controller” within the “app” module so it can access the angular framework. Now you may be wondering what purpose the $scope variable within the controller function serves. In angular, $scope is the application’s object and it is used to store application variables and functions. Using this application object we then define an application variable called “message” and set it equal to the string, “Hello World”.

Finally: Putting It All In Motion

Before we can display the message “Hello World” from our AngularJS controller, we must first build the route, view, and controller for the Rails application. A simple example of each of these is shown below:

The Route:

The Controller:

The View:

In the view code above we must first tell the app to use two AngularJS Directives, ng-app and ng-controller. These two Directives are implemented by incorporating them/defining them in our HTML tags. By setting ng-app equal to our AngularJS “app” module, we are telling the module to initiate and use the <div> we have attached it to as the root element for the application. After doing so, we then tell our application that within the second <div>, we are defining/adding our controller by setting the ng-controller Directive equal to our controller defined earlier, example_controller. Finally within these <div> tags we make a call back to the controller by writing {{ }} around our variable, message. These braces tell our application that the text inside of them should be treated like runnable code. In doing so, the app will retrieve the variable, message, we defined earlier in our controller and display it on the index or view page as shown below:

There you have it, we now have a basic functioning AngularJS application which displays “Hello World” to our index page.