Change the page title when different things are being viewed

It's useful to have some information in the page title about what is
being viewed on that page. For example, the story title should be in
the page title for a story detail page.

See https://storyboard.openstack.org/#!/story/2000178.

Change-Id: If4f63e90a03ca92f3a92c11c27011233797eb4dd

bower.json

@@ -12,7 +12,8 @@
     "angular-local-storage": "0.1.5",
     "angular-elastic": "2.4.2",
     "angular-moment": "0.9.0",
-    "angular-cache": "3.2.5"
+    "angular-cache": "3.2.5",
+    "angularjs-viewhead": "0.0.1"
   },
   "devDependencies": {
     "angular-mocks": "1.3.10",

src/app/admin/template/project_group.html

@@ -18,6 +18,7 @@
 
     <div class="row">
         <div class="col-xs-12">
+            <view-title>Project Group Admin</view-title>
             <button class="btn btn-primary btn-sm pull-bottom-right"
                     ng-click="addProjectGroup()">
                 <i class="fa fa-plus"></i>

src/app/admin/template/team.html

@@ -17,6 +17,7 @@
 <div class="container">
     <div class="row">
         <div class="col-xs-12">
+            <view-title>Teams</view-title>
             <h1><i class="fa fa-sb-team"></i> Teams</h1>
         </div>
     </div>

src/app/admin/template/user.html

@@ -18,6 +18,7 @@
 
     <div class="row">
         <div class="col-xs-12">
+            <view-title>Users</view-title>
             <button class="btn btn-primary btn-sm pull-bottom-right"
                     ng-click="addUser()">
                 <i class="fa fa-plus"></i>

src/app/dashboard/template/dashboard.html

@@ -1,7 +1,7 @@
 <div class="container">
     <div class="row">
         <div class="col-sm-12">
-            <h1>Dashboard</h1>
+            <h1 view-title>Dashboard</h1>
         </div>
     </div>
     <div class="row">

src/app/profile/template/preferences.html

@@ -17,6 +17,7 @@
 <div class="container" ng-hide="isLoading">
     <div class="row">
         <div class="col-xs-12">
+            <view-title>Preferences</view-title>
             <h1><i class="fa fa-sb-profile-preferences"
                    ng-if="!saving"></i>
                 <i class="fa fa-spin fa-sb-profile-preferences"

src/app/profile/template/tokens.html

@@ -17,6 +17,7 @@
 <div class="container" ng-hide="isLoading">
     <div class="row">
         <div class="col-xs-12">
+            <view-title>Authentication Tokens</view-title>
             <h1><i class="fa fa-sb-profile-tokens"></i> Authentication
                 Tokens</h1>
         </div>

src/app/project_group/template/detail.html

@@ -1,6 +1,7 @@
 <div class="container">
     <div class="row">
         <div class="col-xs-12">
+            <view-title>{{projectGroup.title}}</view-title>
             <h1>
                 <i class="fa fa-sb-project-group"></i>
                 {{projectGroup.title}}

src/app/project_group/template/list.html

@@ -22,6 +22,7 @@
      search-without-criteria="true">
     <div class="row">
         <div class="col-xs-12">
+            <view-title>Project Groups</view-title>
             <h1 class="no-border no-margin-bottom">
                 <i class="fa fa-sb-project"></i> Project Groups
             </h1>

src/app/projects/template/detail.html

@@ -33,7 +33,7 @@
 <!-- Template for the header and description -->
 <script type="text/ng-template" id="/inline/project_detail.html">
     <h1>
-        <span ng-show="project.name">
+        <span ng-show="project.name" view-title>
             {{project.name}}
         </span>
         <em ng-hide="project.name" class="text-muted">

src/app/projects/template/list.html

@@ -22,6 +22,7 @@
      search-without-criteria="true">
     <div class="row">
         <div class="col-xs-12">
+            <view-title>Projects</view-title>
             <a class="btn btn-primary btn-sm pull-bottom-right"
                permission="is_superuser"
                href="#!/project/new">

src/app/search/template/index.html

@@ -17,7 +17,7 @@
      ng-init="init(resourceTypes, defaultCriteria)">
     <div class="row">
         <div class="col-xs-12">
-            <h1>Search</h1>
+            <h1 view-title>Search</h1>
         </div>
     </div>
     <div class="row">

src/app/stories/template/detail.html

@@ -39,7 +39,7 @@
 <script type="text/ng-template" id="/inline/story_detail.html">
     <h1>
 
-        <span ng-show="story.title">
+        <span ng-show="story.title" view-title>
             {{story.title}}
         </span>
         <em ng-hide="story.title" class="text-muted">

src/app/stories/template/list.html

@@ -23,6 +23,7 @@
      search-sort-direction="sortDirection">
     <div class="row">
         <div class="col-xs-12">
+            <view-title>Stories</view-title>
             <button class="btn btn-primary btn-sm pull-bottom-right"
                     ng-click="newStory()">
                 <i class="fa fa-plus"></i>

src/app/storyboard/module.js

@@ -27,7 +27,7 @@ angular.module('storyboard',
         'sb.auth', 'sb.story', 'sb.profile', 'sb.notification', 'sb.search',
         'sb.admin', 'sb.subscription', 'sb.project_group', 'ui.router',
         'ui.bootstrap', 'monospaced.elastic', 'angularMoment',
-        'angular-data.DSCacheFactory'])
+        'angular-data.DSCacheFactory', 'viewhead'])
     .constant('angularMomentConfig', {
         preprocess: 'utc',
         timezone: 'UTC'

src/index.html

@@ -19,7 +19,7 @@
     <meta charset="utf-8">
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width">
-    <title>StoryBoard</title>
+    <title ng-bind-template="{{viewTitle ? viewTitle + ' | ' : ''}} StoryBoard">StoryBoard</title>
 
     <!-- Google's Ajax Crawling: https://developers.google.com/webmasters/ajax-crawling -->
     <meta name="fragment" content="!">
@@ -38,6 +38,7 @@
     <script src="angular-cache/dist/angular-cache.js"></script>
     <script src="moment/moment.js"></script>
     <script src="angular-moment/angular-moment.js"></script>
+    <script src="angularjs-viewhead/angularjs-viewhead.js"></script>
     <!-- endbuild -->
 
     <link rel="stylesheet" href="styles/main.css">