Now that we have the basic front-end for our Flapper News coded up with Angular, we're going to start work on our backend. Because Angular is able to handle the templating and rendering, our backend server will mainly serve as a communication layer with our database. Over the next few sections, we are going to focus on modeling our data needs and creating a REST API that our Angular app can use to interact with this data.
If you haven't already done so, make sure you have
installed on your system. At the time of writing, Rails is currently on version
Generating a new Rails app
This will create a folder
flapper-news with our Rails application. If we go
into the folder and run
rails s you should be able to see the our Rails app
The Anatomy of a Rails Project
Here's a quick overview of what each folder/file in our Rails project is:
app/- This folder is where most of your application-specific code will go into.
bin/- This folder contains executable scripts for your rails project. These are the files that get executed when you run
rakefrom the command line.
config/- This is for your application's configuration files. The
environmentfolder contains environment-specific (development, production, test) configuration, and all files in the
initializersfolder will be run when your application boots.
db/- This folder contains files for managing your database. Generated migrations will be put into the
migratefolder, and a master copy of your application's database schema is contained in
schema.rb, which is automatically updated when you run migrations.
lib/- This folder contains code that doesn't belong in the
lib/taskswill be made available to the
log/- This is where you will find logs produced by your Rails project.
public/- This folder is where static files will go. It is recommended to use the
app/assetsfolder to serve assets via the asset pipeline.
test/- This folder is for testing related files.
tmp/- This folder contains temporary files used by your Rails project.
vendor/- This folder is for third-party code. Any code included in the project that isn't managed by you (e.g. code from bower or locally bundled gems) should be put in this folder, and you should avoid editing vendored files.
.gitignore- A manifest of files to be ignored by git
Gemfile- Contains the RubyGems required by this project.
Gemfile.lock- Contains the specific version of all gems and their dependencies used in this project in order to assure the same version is installed on all systems. This file gets updated automatically when you run the
README.rdoc- The README file for your project. Should include instructions on how to get your application up and running.
Rakefile- The Rakefile for running tasks for your project.
config.ru- The rackup file for your project. Rails is a Rack based framework, and uses this file to boot your web server.
Importing our Angular project
Since we created the rails project with the
have noticed that our project doesn't have a
our project). Let's go ahead and create the
along with a file
//= require_tree . to restore the
default behavior of the
from the Angular app we created earlier into the
it'll be included in
//= require_tree .to
app.jsto something else if it bothers you that there's an
app.jsin the same folder, but we'll keep referring to it as
<head>section of our layout, add
app/views/layouts/application.html.erb, let's go ahead and copy over the rest of our head and entire body section from our angular project. Notice that we're replacing the yield statement, this is because we'll be rendering the same layout for our angular app. The resulting layout file should look like:
Now that our application layout is set up, we need to make sure Rails is
serving our AngularJS application instead of the default Rails landing page.
We can do this by creating an action in
ApplicationController which will
only render the layout, and then route requests to the root of our Rails app to
Generally you want to avoid adding actions to
ApplicationController, as all controllers on our backend will inherit from
ApplicationController. An alternative option would be to create another
controller with a single action instead.
ApplicationControllerthat renders the layout:
def angular render 'layouts/application' end end
root to: 'application#angular'