Data Mining Social Media With AngularJS and Rails - Part 1
AngularJS has seen a steady rise in popularity over the past year, and for good reason. Many Angular devs like to use Node.js as the back-end to keep the stack all one language; however, there are plenty of Rails users that want to get in on the fun without changing their whole stack.
This series of posts will show you how to set up a simple data mining web app aimed at social media, using AngularJS on the front-end and Ruby on Rails for the back-end.
Why use AngularJS and Rails?
- it’s backed by Google, and as such has access to the immense vault of talent and resources that the tech behemoth has,
- it’s a top-tier MVC framework well-suited for single-page web applications based in HTML,
- it enables mass-scale parallel development,
- it helps easily manage the state of the application,
- just to name a few…for a more in-depth explanations of the benefits of using AngularJS, read this article.
Single page applications are becoming prevalent on the web and in the app stores, and Angular has shown to be one of the best front-end frameworks to get one up and running quickly and easily.
We’re going to use Ruby on Rails on the back-end to serve the data and perform the data-mining; Rails is well-established and there’s already tons of documentation on the web, so it should be easy to pick up for anyone who isn’t familiar. Rails is especially popular among start-ups and smaller companies in the software industry, so it’s useful to have that in your skill set. Not to mention, Rails makes it incredibly fast and easy to get a working application up and running.
While both Rails and Angular have plenty of documentation to accompany them, there isn’t much information on how to integrate the two pipelines. I’ll start off by showing you how to set up the two frameworks to seamlessly work together. This tutorial assumes that you have a basic knowledge of Rails.
First off, we’ll create our new project. From your working directory:
$ rails new socialminer --database=postgresql --skip-test-unit
After the project files are created, configure your Postgres database by editing the /config/database.yml file. If you’re migrating to Postgres from another type of database, this RailsCast may help.
Once the configuration is set, create the database:
$ bundle exec rake db:create
Run the server to check that everything is working.
Adding the AngularJS framework
Note: If you have Turbolinks enabled in your Rails app, disable it (delete all references to it). It will conflict with Angular.
Integrating AngularJS with your Rails app is pretty straight-forward and easy. Download the latest version of AngularJS from the website.
To provide a quick and powerful UI for us to work with, we’ll use Bootstrap; to do that, add the Bootstrap gem to your Gemfile, and include Bootstrap in the application.css file:
1 2 3
1 2 3 4 5 6 7
Head over to the
1 2 3 4 5 6 7
Update your gems to add Bootstrap to the pipeline:
$ bundle install
Now that we have all the UI components in place, we can create our main controller:
$ rails generate controller Main index
Add the root folder to the routes.rb file to redirect to the main controller:
1 2 3
Run the rails server and make sure everything is working smoothly.
Setting up Angular
In order to properly use the Angular framework, we have to create a simple directory structure for our Angular files to reside in. How this structure is implemented is up to you and depends on how complex your app will be; the directory structure is important for maintaining and managing your app as it grows.
In this tutorial, we’ll use the generally accepted structure of having folders for services, filters, controllers, and directives.
Your folder structure should look like this:
If you want to know more about how to structure your directory for app growth and scaling, as well as general styling guidelines for Angular, you can read this informative guide on github.
We can test out our folder structure by creating basic controller for the main view app:
1 2 3 4 5 6 7 8
I’m using some placeholder data for now while we get the app up and running. The view for this controller, which is also the main view, will look like this:
1 2 3 4 5 6 7
1 2 3 4 5 6 7
Our main application module is named ‘Miner’. Now we need to specift the
ng-app directive in our main application template:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
In addition to adding
ng-app to the html tag, add
Now that the Angular framework is set up, we can navigate to our main page at http://localhost:3000 to confirm that everything works. You should see the index page with the contents of the sample data we provided.
Conclusion So far, we’ve set up our Rails app, created our Angular module, and implemented a view and a controller for the main page. This will provide the base for our application.
In Part 2 of this series, we will implement routing in Angular and create an API for accessing social media.