angular.md

Rails 4.2 environment with AngularJS and Foundation 5

New rails project

rails new my_app -T -d postgresql

Update the Gemfile

Add:

gem 'angular-rails-templates'                                                                   
gem 'bower-rails'
# 'rails_serve_static_assets' is only for staging on Heroku, omit otherwise
gem 'rails_serve_static_assets', group: [:production]
gem 'angular-rails-templates'
gem 'bower-rails'

Install bower

rails g bower_rails:initialize

Update the Bowerfile

asset 'angular'
asset 'foundation'
asset 'fontawesome'

Install front-end dependencies

bundle exec rake bower:install

Create the Angular directories

cd app/assets/javascripts/
mkdir -p angular/{templates,modules,filters,directives,models,services,controllers}/

Add Angular, the template helper, and the Angular app file structure

//= require jquery
//= require jquery_ujs
//= require angular
//= require foundation
//= require angular-rails-templates
//= require angular/app
//= require_tree ./angular/templates
//= require_tree ./angular/modules
//= require_tree ./angular/filters
//= require_tree ./angular/directives
//= require_tree ./angular/models
//= require_tree ./angular/services
//= require_tree ./angular/controllers

Create app.js

touch app/assets/javascripts/angular/app.js

Create an initial app module

var app = angular.module('app', ['templates']);                                                

app.config([
  '$httpProvider', function($httpProvider) {
      return $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
  }
]);

app.run(function() {
  return console.log('angular app running');
});

Create a controller

rails g controller example home

Add ng-app directive to home.html.erb view

<div ng-app="app"></div>

Set the root route

root 'example#home'

Remove turbolinks from application layout

'data-turbolinks-track' => true

Create a local Procfile

touch local.proc

postgresql: postgres -D /usr/local/var/postgres                                                 
rails: bundle exec rails s

Start the rails server and postgresql

foreman start -f local.proc

Create a database

rake db:create

Open in browser

http://localhost:3000

Check the console

"angular app running"

Add foundation and font-awesome to application.scss

@import "foundation/scss/foundation";
@import "fontawesome/scss/font-awesome";

@font-face {
  font-family: 'FontAwesome';
  src: font-url('fontawesome/fonts/fontawesome-webfont.eot');
  src: font-url('fontawesome/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
  font-url('fontawesome/fonts/fontawesome-webfont.woff') format('woff'),
  font-url('fontawesome/fonts/fontawesome-webfont.ttf') format('truetype'),
  font-url('fontawesome/fonts/fontawesome-webfont.svg?#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
} 

Add path to application.rb

config.assets.paths << Rails.root.join("vendor","assets","bower_components")
config.assets.paths << Rails.root.join("vendor","assets","bower_components","fontawesome","fonts")

config.assets.precompile << %r(.*.(?:eot|svg|ttf|woff)$)
config.angular_templates.ignore_prefix  = %w(angular/templates/)

Restart the server

control + c
foreman start -f local.proc