Added Part 4 of the tutorial.

README.md

@@ -8,4 +8,6 @@ This continues to be a work in progress.  The parts completed thus far are:
 
 - [Part 2](http://asanderson.org/posts/2013/06/23/bootstrapping-angular-rails-part-2.html) - Modularizing the AngularJS side of the app, setting up AngularJS routing, and using Angular routing to manage multiple controllers and templates.
 
-- [Part 3](http://asanderson.org/posts/2013/08/19/bootstrapping-angular-rails-part-3.html) - Building a simple Rails API to serve blog post data to the main Angular controller.
+- [Part 3](http://asanderson.org/posts/2013/08/19/bootstrapping-angular-rails-part-3.html) - Building a simple Rails API to serve blog post data to the main Angular controller.
+
+- [Part 4](http://asanderson.org/posts/2013/09/15/bootstrapping-angular-rails-part-4.html) - Building a shared AngularJS service to access our Rails API.

part-4/.gitignore

@@ -0,0 +1,21 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+#
+# If you find yourself ignoring temporary files generated by your text editor
+# or operating system, you probably want to add a global ignore instead:
+#   git config --global core.excludesfile '~/.gitignore_global'
+
+# Ignore bundler config.
+/.bundle
+
+# Ignore the default SQLite database.
+/db/*.sqlite3
+/db/*.sqlite3-journal
+
+# Ignore all logfiles and tempfiles.
+/log/*.log
+/tmp
+
+# Ignore other unneeded files
+*.DS_store
+*.sublime-project
+*.sublime-workspace

part-4/Gemfile

@@ -0,0 +1,39 @@
+source 'https://rubygems.org'
+
+# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
+gem 'rails', '4.0.0'
+
+gem 'pg'
+
+# Gems used only for assets and not required
+# in production environments by default.
+group :assets do
+  gem 'sass-rails',   '~> 4.0.0.rc2'
+  gem 'coffee-rails', '~> 4.0.0.rc2'
+  gem 'bootstrap-sass', '~> 2.3.1.0'
+
+  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
+  # gem 'therubyracer', platforms: :ruby
+
+  gem 'uglifier', '>= 1.0.3'
+end
+
+gem 'jquery-rails'
+
+# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
+gem 'turbolinks'
+
+# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
+gem 'jbuilder', '~> 1.0.1'
+
+# To use ActiveModel has_secure_password
+# gem 'bcrypt-ruby', '~> 3.0.0'
+
+# Use unicorn as the app server
+# gem 'unicorn'
+
+# Deploy with Capistrano
+# gem 'capistrano', group: :development
+
+# To use debugger
+# gem 'debugger'

part-4/Gemfile.lock

@@ -0,0 +1,115 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    actionmailer (4.0.0)
+      actionpack (= 4.0.0)
+      mail (~> 2.5.3)
+    actionpack (4.0.0)
+      activesupport (= 4.0.0)
+      builder (~> 3.1.0)
+      erubis (~> 2.7.0)
+      rack (~> 1.5.2)
+      rack-test (~> 0.6.2)
+    activemodel (4.0.0)
+      activesupport (= 4.0.0)
+      builder (~> 3.1.0)
+    activerecord (4.0.0)
+      activemodel (= 4.0.0)
+      activerecord-deprecated_finders (~> 1.0.2)
+      activesupport (= 4.0.0)
+      arel (~> 4.0.0)
+    activerecord-deprecated_finders (1.0.3)
+    activesupport (4.0.0)
+      i18n (~> 0.6, >= 0.6.4)
+      minitest (~> 4.2)
+      multi_json (~> 1.3)
+      thread_safe (~> 0.1)
+      tzinfo (~> 0.3.37)
+    arel (4.0.0)
+    atomic (1.1.12)
+    bootstrap-sass (2.3.1.0)
+      sass (~> 3.2)
+    builder (3.1.4)
+    coffee-rails (4.0.0)
+      coffee-script (>= 2.2.0)
+      railties (>= 4.0.0.beta, < 5.0)
+    coffee-script (2.2.0)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.6.2)
+    erubis (2.7.0)
+    execjs (1.4.0)
+      multi_json (~> 1.0)
+    hike (1.2.3)
+    i18n (0.6.4)
+    jbuilder (1.0.2)
+      activesupport (>= 3.0.0)
+    jquery-rails (2.2.1)
+      railties (>= 3.0, < 5.0)
+      thor (>= 0.14, < 2.0)
+    mail (2.5.4)
+      mime-types (~> 1.16)
+      treetop (~> 1.4.8)
+    mime-types (1.23)
+    minitest (4.7.5)
+    multi_json (1.7.7)
+    pg (0.15.1)
+    polyglot (0.3.3)
+    rack (1.5.2)
+    rack-test (0.6.2)
+      rack (>= 1.0)
+    rails (4.0.0)
+      actionmailer (= 4.0.0)
+      actionpack (= 4.0.0)
+      activerecord (= 4.0.0)
+      activesupport (= 4.0.0)
+      bundler (>= 1.3.0, < 2.0)
+      railties (= 4.0.0)
+      sprockets-rails (~> 2.0.0)
+    railties (4.0.0)
+      actionpack (= 4.0.0)
+      activesupport (= 4.0.0)
+      rake (>= 0.8.7)
+      thor (>= 0.18.1, < 2.0)
+    rake (10.1.0)
+    sass (3.2.8)
+    sass-rails (4.0.0.rc2)
+      railties (>= 4.0.0.beta, < 5.0)
+      sass (>= 3.1.10)
+      sprockets-rails (~> 2.0.0)
+    sprockets (2.10.0)
+      hike (~> 1.2)
+      multi_json (~> 1.0)
+      rack (~> 1.0)
+      tilt (~> 1.1, != 1.3.0)
+    sprockets-rails (2.0.0)
+      actionpack (>= 3.0)
+      activesupport (>= 3.0)
+      sprockets (~> 2.8)
+    thor (0.18.1)
+    thread_safe (0.1.2)
+      atomic
+    tilt (1.4.1)
+    treetop (1.4.14)
+      polyglot
+      polyglot (>= 0.3.1)
+    turbolinks (1.1.1)
+      coffee-rails
+    tzinfo (0.3.37)
+    uglifier (2.0.1)
+      execjs (>= 0.3.0)
+      multi_json (~> 1.0, >= 1.0.2)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  bootstrap-sass (~> 2.3.1.0)
+  coffee-rails (~> 4.0.0.rc2)
+  jbuilder (~> 1.0.1)
+  jquery-rails
+  pg
+  rails (= 4.0.0)
+  sass-rails (~> 4.0.0.rc2)
+  turbolinks
+  uglifier (>= 1.0.3)

part-4/README.rdoc

@@ -0,0 +1,28 @@
+== README
+
+This README would normally document whatever steps are necessary to get the
+application up and running.
+
+Things you may want to cover:
+
+* Ruby version
+
+* System dependencies
+
+* Configuration
+
+* Database creation
+
+* Database initialization
+
+* How to run the test suite
+
+* Services (job queues, cache servers, search engines, etc.)
+
+* Deployment instructions
+
+* ...
+
+
+Please feel free to use a different markup language if you do not plan to run
+<tt>rake doc:app</tt>.

part-4/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require File.expand_path('../config/application', __FILE__)
+
+Blog::Application.load_tasks

part-4/app/assets/javascripts/Controllers/main/mainIndexCtrl.js.coffee

@@ -0,0 +1,10 @@
+@IndexCtrl = ($scope, $location, $http, postData) ->
+
+  $scope.data = postData.data
+
+  postData.loadPosts()
+
+  $scope.viewPost = (postId) ->
+    $location.url('/post/'+postId)
+
+@PostCtrl.$inject = ['$scope', '$location', '$http', 'postData']

part-4/app/assets/javascripts/Controllers/main/mainPostCtrl.js.coffee

@@ -0,0 +1,10 @@
+@PostCtrl = ($scope, $routeParams, postData) ->
+
+  $scope.data =
+    postData: postData.data
+
+  postData.loadPosts()
+
+  $scope.data.postId = $routeParams.postId
+
+@PostCtrl.$inject = ['$scope', '$routeParams', 'postData']

part-4/app/assets/javascripts/Services/main/postData.js.coffee

@@ -0,0 +1,20 @@
+angular.module('Blog').factory('postData', ['$http', ($http) ->
+
+  postData =
+    data:
+      posts: [{title: 'Loading', contents: ''}]
+    isLoaded: false
+
+  postData.loadPosts = ->
+    if !postData.isLoaded
+      $http.get('./posts.json').success( (data) ->
+        postData.data.posts = data
+        postData.isLoaded = true
+        console.log('Successfully loaded posts.')
+      ).error( ->
+        console.error('Failed to load posts.')
+      )
+
+  return postData
+
+])

part-4/app/assets/javascripts/application.js

@@ -0,0 +1,17 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require jquery
+//= require jquery_ujs
+//= require underscore
+//= require bootstrap
+//= require angular

part-4/app/assets/javascripts/main.js.coffee

@@ -0,0 +1,22 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/
+
+#= require_self
+#= require_tree ./Controllers/main
+#= require_tree ./Directives/main
+#= require_tree ./Filters/main
+#= require_tree ./Services/main
+
+# Creates new Angular module called 'Blog'
+Blog = angular.module('Blog', [])
+
+# Sets up routing
+Blog.config(['$routeProvider', ($routeProvider) ->
+  # Route for '/post'
+  $routeProvider.when('/post/:postId', { templateUrl: '../assets/mainPost.html', controller: 'PostCtrl' } )
+
+  # Default
+  $routeProvider.otherwise({ templateUrl: '../assets/mainIndex.html', controller: 'IndexCtrl' } )
+
+])

part-4/app/assets/stylesheets/application.css

@@ -0,0 +1,13 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require_tree .
+ */

part-4/app/assets/stylesheets/main.css.scss

@@ -0,0 +1,5 @@
+// Place all the styles related to the Main controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+@import "bootstrap";

part-4/app/assets/templates/mainIndex.html

@@ -0,0 +1,5 @@
+<h1 class="text-center">My blog</h1>
+<div class="row" ng-repeat="post in data.posts">
+    <h2><a ng-click="viewPost($index)">{{post.title}}</a></h2>
+    <p>{{post.contents}}</p>
+</div>

part-4/app/assets/templates/mainPost.html

@@ -0,0 +1,4 @@
+<h1 class="text-center">{{data.postId}} - {{data.postData.posts[data.postId].title}}</h1>
+<div class="row">
+    <p>{{data.postData.posts[data.postId].contents}}</p>
+</div>

part-4/app/controllers/application_controller.rb

@@ -0,0 +1,5 @@
+class ApplicationController < ActionController::Base
+  # Prevent CSRF attacks by raising an exception.
+  # For APIs, you may want to use :null_session instead.
+  protect_from_forgery with: :exception
+end

part-4/app/controllers/main_controller.rb

@@ -0,0 +1,4 @@
+class MainController < ApplicationController
+  def index
+  end
+end

part-4/app/controllers/posts_controller.rb

@@ -0,0 +1,16 @@
+class PostsController < ApplicationController
+  respond_to :json
+
+  def index
+
+    # Gather all post data
+    posts = Post.all
+
+    # Respond to request with post data in json format
+    respond_with(posts) do |format|
+      format.json { render :json => posts.as_json }
+    end
+
+  end
+
+end

part-4/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

part-4/app/helpers/main_helper.rb

@@ -0,0 +1,2 @@
+module MainHelper
+end

part-4/app/models/post.rb

@@ -0,0 +1,2 @@
+class Post < ActiveRecord::Base
+end

part-4/app/views/layouts/application.html.erb

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html ng-app="Blog">
+<head>
+  <title>Blog</title>
+  <%= stylesheet_link_tag    "application", media: "all" %>
+  <%= javascript_include_tag "application", controller_name %>
+  <%= csrf_meta_tags %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>