Updated angularJS from 1.0.8 to 1.2.6

From version 1.2 onward, ng-bind-html-unsafe (which feedbunch used to bind feed titles, entry summaries and the like into the view) has disappeared. The ng-bind-html directive is to be used instead. This requires marking the strings we want to bind as html-safe, which is burdensome code, or making the angular-sanitize module available to our angularjs module (if none of those things is done, errors appear in the js console and the "unsafe" and "unsanitized" strings are rejected, which means lots of strings missing from hte view). Including angular-sanitize in the app is the easiest migration path.

For more details about this change see angularjs release notes for version 1.2.0:

  https://github.com/angular/angular.js/blob/master/CHANGELOG.md

Sanitizing these strings is a bit redundant because they are alredy sanitized by the rails models before saving them in the db, but for now the performance hit seems to be imperceptible.

app/assets/javascripts/ng-modules/ng-app.js.coffee

@@ -2,7 +2,7 @@
 # AngularJS main application file
 ########################################################
 
-module = angular.module 'feedbunch', ['infinite-scroll']
+module = angular.module 'feedbunch', ['infinite-scroll', 'ngSanitize']
 
 # Configure $http service to send the CSRF-prevention token, otherwise POST, DELETE etc requests will be rejected
 module.config ["$httpProvider", (provider)->

app/views/layouts/_footer_js.html.erb

@@ -1,5 +1,6 @@
 <%= javascript_include_tag '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' %>
-<%= javascript_include_tag '//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js' %>
+<%= javascript_include_tag '//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js' %>
+<%= javascript_include_tag '//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-sanitize.min.js' %>
 <%= javascript_include_tag '//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js' %>
 <%= javascript_include_tag 'application' %>
 

app/views/read/_entries.html.erb

@@ -18,9 +18,9 @@
        class="list-group-item"
        ng-class="{'entry-read':entry.read && !entry.changing_state, 'entry-unread': !entry.read && !entry.changing_state, 'entry-becoming-read':entry.read && entry.changing_state, 'entry-becoming-unread':!entry.read && entry.changing_state}"
        ng-click="toggle_open_entry(entry)">
-      <em><span class="entry-feed-title" ng-bind-html-unsafe="entry_feed_title(entry)"></span></em>
+      <em><span class="entry-feed-title" ng-bind-html="entry_feed_title(entry)"></span></em>
       &nbsp;
-      <span class="entry-title" ng-bind-html-unsafe="entry.title"></span>
+      <span class="entry-title" ng-bind-html="entry.title"></span>
       <span class="pull-right">{{entry.published}}</span>
     </a>
 
@@ -49,23 +49,23 @@
           <div class="lead entry-lead hint--top hint--rounded" data-hint="<%= t 'entries.index.title_tooltip' %>">
             <a href="{{entry.url}}"
                target="_blank"
-               ng-bind-html-unsafe="entry.title">
+               ng-bind-html="entry.title">
             </a>
           </div>
           <div class="entry-feed-link">
             <a href="#"
                ng-click="set_current_entry_feed(entry)"
                class="hint--bottom hint--rounded"
                data-hint="<%= t 'entries.index.feed_tooltip' %>"
-               ng-bind-html-unsafe="entry_feed_title(entry)">
+               ng-bind-html="entry_feed_title(entry)">
             </a>
           </div>
         </p>
 
         <p class="hidden">{{entry.guid}}</p>
         <div class="entry-content">
-          <p ng-show="entry.content.length > 0" ng-bind-html-unsafe="entry.content"></p>
-          <p ng-hide="entry.content.length > 0" ng-bind-html-unsafe="entry.summary"></p>
+          <p ng-show="entry.content.length > 0" ng-bind-html="entry.content"></p>
+          <p ng-hide="entry.content.length > 0" ng-bind-html="entry.summary"></p>
         </div>
       </div>
     </div>

app/views/read/index.html.erb

@@ -29,7 +29,7 @@
           <div class="hint--bottom hint--rounded"
                ng-show="current_feed"
                data-hint="<%= t 'feeds.index.feed_tooltip' %>">
-            <a ng-bind-html-unsafe="current_feed.title"
+            <a ng-bind-html="current_feed.title"
                href="{{current_feed.url}}"
                target="_blank">
             </a>

app/views/read/sidebar/_sidebar_feed.html.erb

@@ -6,7 +6,7 @@
      ng-click="set_current_feed(feed)">
 
     <i class="fa fa-rss pull-left"></i>
-    <span class="sidebar-feed-title" ng-bind-html-unsafe="feed.title"></span>
+    <span class="sidebar-feed-title" ng-bind-html="feed.title"></span>
     <span class="badge pull-right">{{feed.unread_entries | numberBadgeFltr}}</span>
   </a>
 </li>