fully integrated into the asset pipeline

.gitignore

@@ -4,4 +4,4 @@ log/*.log
 log/
 tmp/
 .DS_Store
-public/system
+public/images/photos

README.md

@@ -39,30 +39,36 @@ Because Rails makes it so easy to run Jasmine unit specs and RSpec (or Cucumber)
 * include the angular.min.js and agular-ie-compat.js files—which you can get from https://github.com/angular/angular-seed/tree/master/app/lib/angular — in vendor/assets/javascripts
 * update src_files—in spec/javascripts/support/jasmine.yml—to list angular in the vendor assets and the application javascript files in app/assets
 
-All of the application-specific javascript files are in app/assets/javascript. The html partials are in public/partials.
+All of the application-specific javascript files are in app/assets/javascripts. The html partials are in app/assets/templates.
 
-Note the following changes to config/environments/production.rb:
+In order for controllers.js to use the html templates from the asset pipeline, we insert the asset names into variables in the document header, and then access those in the route declarations of controllers.js:
 
-  # angular.js change: we need to serve up the templates in public/partials
-  config.serve_static_assets = true
-
-  # angular.js change: don't uglify because the HTML templates need to know the names of variables
-  # and methods in controller.js
-  config.assets.js_compressor = Sprockets::LazyCompressor.new { Uglifier.new(:mangle => false) }
-
-The first one poses a problem I have not yet figured out how to solve. controllers.js defines templates within routes like so:
+In app/views/layouts/dynamic.html.erb:
+
+    <script type="text/javascript">
+      var photographers_template = "<%= asset_path('photographers.html') %>";
+      var galleries_template = "<%= asset_path('galleries.html') %>";
+      var photos_template = "<%= asset_path('photos.html') %>";
+    </script>
 
+In app/assets/javascripts/controllers.js:
 
-    $route.when('/photographers',
-        {template: 'partials/photographers.html', controller: PhotographersCtrl});
+    function PhotoGalleryCtrl($route, $xhr) {
+      ...
+      $route.when('/photographers',
+          {template: photographers_template, controller: PhotographersCtrl});
+      
+      $route.when('/photographers/:photographer_id/galleries',
+          {template: galleries_template, controller: GalleriesCtrl});
+      
+      $route.when('/photographers/:photographer_id/galleries/:gallery_id/photos',
+          {template: photos_template, controller: PhotosCtrl});
 
-    $route.when('/photographers/:photographer_id/galleries',
-        {template: 'partials/galleries.html', controller: GalleriesCtrl});
+Note the following change to config/environments/production.rb:
 
-    $route.when('/photographers/:photographer_id/galleries/:gallery_id/photos',
-        {template: 'partials/photos.html', controller: PhotosCtrl});
-
-Note that the template paths are hard-coded. I don't see how to adjust these to match Rails' precompiled hash names, so I've left the partials in public/partials instead of moving them to app/assets. This is what necessitates the 'config.serve_static_assets = true' configuration. Unfortunately, this pulls the partials out of the asset pipeline, forcing one to manage file version numbers manually (eg: template: 'partials/photographers.html?3').
+  # angular.js change: don't uglify because the HTML templates need to know the names of variables
+  # and methods in controller.js
+  config.assets.js_compressor = Sprockets::LazyCompressor.new { Uglifier.new(:mangle => false) }
 
 
 Wrap Params

app/assets/javascripts/controllers.js

@@ -36,13 +36,13 @@ function PhotoGalleryCtrl($route, $xhr) {
 
 
   $route.when('/photographers',
-      {template: 'partials/photographers.html', controller: PhotographersCtrl});
+      {template: photographers_template, controller: PhotographersCtrl});
 
   $route.when('/photographers/:photographer_id/galleries',
-      {template: 'partials/galleries.html', controller: GalleriesCtrl});
+      {template: galleries_template, controller: GalleriesCtrl});
 
   $route.when('/photographers/:photographer_id/galleries/:gallery_id/photos',
-      {template: 'partials/photos.html', controller: PhotosCtrl});
+      {template: photos_template, controller: PhotosCtrl});
 
   $route.otherwise({redirectTo: '/photographers'});
 

app/models/photo.rb

@@ -1,8 +1,10 @@
 class Photo < ActiveRecord::Base
 
   has_attached_file :image,
-                    :styles => { :large   => "640x480>",
-                    :gallery => "200x200#" }
+                    :styles => { :large   => ["640x480>", :jpg],
+                                 :gallery => ["200x200#", :jpg] },
+                    :url => '/images/photos/:style/:id.:extension',
+                    :path => ':rails_root/public/images/photos/:style/:id.:extension'
 
   belongs_to :gallery
 

app/views/layouts/dynamic.html.erb

@@ -5,6 +5,11 @@
   <title>Angular Rails Demo</title>
   <%= stylesheet_link_tag "application" %>
   <%= csrf_meta_tag %>
+  <script type="text/javascript">
+    var photographers_template = "<%= asset_path('photographers.html') %>";
+    var galleries_template = "<%= asset_path('galleries.html') %>";
+    var photos_template = "<%= asset_path('photos.html') %>";
+  </script>
 </head>
 <body ng:controller="PhotoGalleryCtrl">
 

config/environments/production.rb

@@ -9,9 +9,7 @@
   config.action_controller.perform_caching = true
 
   # Disable Rails's static asset server (Apache or nginx will already do this)
-  # config.serve_static_assets = false
-  # angular.js change: we need to serve up the templates in public/partials
-  config.serve_static_assets = true
+  config.serve_static_assets = false
 
   # Compress JavaScripts and CSS
   config.assets.compress = true

public/assets/galleries-2f858fc225585649a7e343f555be7189.html

@@ -0,0 +1,6 @@
+<h1>Galleries of {{photographer.name}}</h1>
+<ul id="galleries">
+  <li class="gallery" ng:repeat="gallery in galleries">
+    <a href="#/photographers/{{this.photographer.id}}/galleries/{{gallery.id}}/photos">{{gallery.title}}</a>
+  </li>
+</ul>

public/assets/manifest.yml

@@ -1,9 +1,12 @@
 ---
 rails.png: rails-bd9ad5a560b5a3a7be0808c5cd76a798.png
 version.txt: version-bb56fde4d7fb80915b376614cbb6b1c3.txt
+galleries.html: galleries-2f858fc225585649a7e343f555be7189.html
+photographers.html: photographers-b7518de1283a043101402347306500d0.html
+photos.html: photos-ae54e62e85cc883d1f4684c04e5d6572.html
 angular.min.js: angular-a9d09911e8bdf68a9a5fe18c502ff95e.min.js
 jquery.cycle.js: jquery-5c5f90ee142dc52c37000f9a4a6bbb7e.cycle.js
 jquery-ui.min.js: jquery-ui-dec28445aa24cc0f56d487fa46521692.min.js
 jquery.min.js: jquery-4c708b53ec6222aec832392c2e2cfd4d.min.js
-application.js: application-c7c4ad1aeb2061970f92d1c167a34ccb.js
+application.js: application-7d6370eabffcb8599e3573e9cd6dc0c2.js
 application.css: application-3597a8525f7eb488b1becb03bac7dccf.css

public/assets/photographers-b7518de1283a043101402347306500d0.html

@@ -0,0 +1,6 @@
+<h1>Photographers</h1>
+<ul id="photographers">
+  <li class="photographer" ng:repeat="photographer in photographers">
+    <a href="#/photographers/{{photographer.id}}/galleries">{{photographer.name}}</a>
+  </li>
+</ul>

public/assets/photos-ae54e62e85cc883d1f4684c04e5d6572.html

@@ -0,0 +1,27 @@
+<h1>The {{gallery.title}} Gallery of {{photographer.name}}</h1>
+
+<div id="selected_frame">
+  <div id="selected_photos">
+    <div class="selected_photo" id="selected_photo_{{selected_photo.id}}" ng:repeat="selected_photo in selected_photos">
+      <img ng:src="{{selected_photo.image_gallery_url}}" alt="{{selected_photo.title}}" />
+      <span class="delete" ng:click="deleteSelectedPhoto(selected_photo)">✕</span>
+      <form ng:submit="saveSelectedPhoto(selected_photo)">
+        <input name="selected_photo.title" value="{{selected_photo.title}}" />
+      </form>
+    </div>
+  </div>
+</div>
+
+<div id="outer_picture_frame">
+  <div id="picture_frame">
+    <div id="prev">&lsaquo;</div>
+    <div id="photos">
+      <div class="photo" id="photo_{{photo.id}}" ng:click="clickPhoto(photo)" ng:repeat="photo in photos">
+        <img ng:src="{{photo.image_large_url}}" alt="{{photo.title}}" />
+        <span class="title">{{photo.title}}</span>
+      </div>
+    </div>
+    <div id="next">&rsaquo;</div>
+    <span class="caption">Click a photo to add it to your collection</span>
+  </div>
+</div>