chore(docs-app): add dynamic 404 behavior

Adapted from angular/angular@88045a5,
angular/angular@c3fb820,
and angular/angular@5a624fa.

Author: Narretz

docs/app/e2e/.eslintrc.json

@@ -9,6 +9,7 @@
   },
 
   "globals": {
+    "angular": false,
     /* testabilityPatch / matchers */
     "inject": false,
     "module": false,

docs/app/e2e/app.scenario.js

@@ -21,6 +21,9 @@ describe('docs.angularjs.org', function() {
         console.log('browser console errors: ' + require('util').inspect(filteredLog));
       }
     });
+
+    browser.ignoreSynchronization = false;
+    browser.clearMockModules();
   });
 
 
@@ -102,6 +105,66 @@ describe('docs.angularjs.org', function() {
       expect(mainHeader.getText()).toEqual('Oops!');
     });
 
+    it('should set "noindex" if the page does not exist', function() {
+      browser.get('build/docs/index-production.html#!/api/does/not/exist');
+      var robots = element(by.css('meta[name="robots"][content="noindex"]'));
+      var googleBot = element(by.css('meta[name="googlebot"][content="noindex"]'));
+      expect(robots.isPresent()).toBe(true);
+      expect(googleBot.isPresent()).toBe(true);
+    });
+
+    it('should remove "noindex" if the page exists', function() {
+      browser.get('build/docs/index-production.html#!/api');
+      var robots = element(by.css('meta[name="robots"][content="noindex"]'));
+      var googleBot = element(by.css('meta[name="googlebot"][content="noindex"]'));
+      expect(robots.isPresent()).toBe(false);
+      expect(googleBot.isPresent()).toBe(false);
+    });
+
+    describe('template request error', function() {
+      beforeEach(function() {
+        browser.addMockModule('httpMocker', function() {
+          angular.module('httpMocker', ['ngMock'])
+            .run(['$httpBackend', function($httpBackend) {
+              $httpBackend.whenGET('localhost:8000/build/docs/partials/api.html').respond(500, '');
+            }]);
+          });
+      });
+
+      it('should set "noindex" for robots if the request fails', function() {
+        // index-test includes ngMock
+        browser.get('build/docs/index-test.html#!/api');
+        var robots = element(by.css('meta[name="robots"][content="noindex"]'));
+        var googleBot = element(by.css('meta[name="googlebot"][content="noindex"]'));
+        expect(robots.isPresent()).toBe(true);
+        expect(googleBot.isPresent()).toBe(true);
+      });
+    });
+
+
+    describe('page bootstrap error', function() {
+      beforeEach(function() {
+        browser.addMockModule('httpMocker', function() {
+          // Require a module that does not exist to break the bootstrapping
+          angular.module('httpMocker', ['doesNotExist']);
+        });
+    });
+
+      it('should have "noindex" for robots if bootstrapping fails', function() {
+        browser.get('build/docs/index.html#!/api').catch(function() {
+          // get() will fail on AngularJS bootstrap, but if we continue here, protractor
+          // will assume the app is ready
+          browser.ignoreSynchronization = true;
+          var robots = element(by.css('meta[name="robots"][content="noindex"]'));
+          var googleBot = element(by.css('meta[name="googlebot"][content="noindex"]'));
+          expect(robots.isPresent()).toBe(true);
+          expect(googleBot.isPresent()).toBe(true);
+        });
+      });
+
+
+    });
+
   });
 
 });

docs/app/src/docs.js

@@ -8,6 +8,8 @@ angular.module('DocsController', ['currentVersionData'])
   function($scope, $rootScope, $location, $window, $cookies,
               NG_PAGES, NG_NAVIGATION, CURRENT_NG_VERSION) {
 
+  var errorPartialPath = 'Error404.html';
+
   $scope.navClass = function(navItem) {
     return {
       active: navItem.href && this.currentPage && this.currentPage.path,
@@ -16,8 +18,6 @@ angular.module('DocsController', ['currentVersionData'])
     };
   };
 
-
-
   $scope.$on('$includeContentLoaded', function() {
     var pagePath = $scope.currentPage ? $scope.currentPage.path : $location.path();
     $window._gaq.push(['_trackPageview', pagePath]);
@@ -26,6 +26,7 @@ angular.module('DocsController', ['currentVersionData'])
 
   $scope.$on('$includeContentError', function() {
     $scope.loading = false;
+    $scope.loadingError = true;
   });
 
   $scope.$watch(function docsPathWatch() {return $location.path(); }, function docsPathWatchAction(path) {
@@ -35,6 +36,7 @@ angular.module('DocsController', ['currentVersionData'])
     var currentPage = $scope.currentPage = NG_PAGES[path];
 
     $scope.loading = true;
+    $scope.loadingError = false;
 
     if (currentPage) {
       $scope.partialPath = 'partials/' + path + '.html';
@@ -50,18 +52,22 @@ angular.module('DocsController', ['currentVersionData'])
     } else {
       $scope.currentArea = NG_NAVIGATION['api'];
       $scope.breadcrumb = [];
-      $scope.partialPath = 'Error404.html';
+      $scope.partialPath = errorPartialPath;
     }
   });
 
+  $scope.hasError = function() {
+    return $scope.partialPath === errorPartialPath || $scope.loadingError;
+  };
+
   /**********************************
    Initialize
    ***********************************/
 
   $scope.versionNumber = CURRENT_NG_VERSION.full;
   $scope.version = CURRENT_NG_VERSION.full + ' ' + CURRENT_NG_VERSION.codeName;
-  $scope.loading = 0;
-
+  $scope.loading = false;
+  $scope.loadingError = false;
 
   var INDEX_PATH = /^(\/|\/index[^.]*.html)$/;
   if (!$location.path() || INDEX_PATH.test($location.path())) {

docs/config/index.js

@@ -22,6 +22,7 @@ module.exports = new Package('angularjs', [
 .factory(require('./services/deployments/debug'))
 .factory(require('./services/deployments/default'))
 .factory(require('./services/deployments/jquery'))
+.factory(require('./services/deployments/test'))
 .factory(require('./services/deployments/production'))
 
 .factory(require('./inline-tag-defs/type'))
@@ -157,12 +158,14 @@ module.exports = new Package('angularjs', [
   generateProtractorTestsProcessor,
   generateExamplesProcessor,
   debugDeployment, defaultDeployment,
-  jqueryDeployment, productionDeployment) {
+  jqueryDeployment, testDeployment,
+  productionDeployment) {
 
   generateIndexPagesProcessor.deployments = [
     debugDeployment,
     defaultDeployment,
     jqueryDeployment,
+    testDeployment,
     productionDeployment
   ];
 

docs/config/services/deployments/test.js

@@ -0,0 +1,40 @@
+'use strict';
+
+module.exports = function testDeployment(getVersion) {
+  return {
+    name: 'test',
+    examples: {
+      commonFiles: {
+        scripts: ['../../../angular.js']
+      },
+      dependencyPath: '../../../'
+    },
+    scripts: [
+      '../angular.js',
+      '../angular-resource.js',
+      '../angular-route.js',
+      '../angular-cookies.js',
+      '../angular-mocks.js',
+      '../angular-sanitize.js',
+      '../angular-touch.js',
+      '../angular-animate.js',
+      'components/marked-' + getVersion('marked') + '/lib/marked.js',
+      'js/angular-bootstrap/dropdown-toggle.js',
+      'components/lunr-' + getVersion('lunr') + '/lunr.js',
+      'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/prettify.js',
+      'components/google-code-prettify-' + getVersion('google-code-prettify') + '/src/lang-css.js',
+      'js/current-version-data.js',
+      'js/all-versions-data.js',
+      'js/pages-data.js',
+      'js/nav-data.js',
+      'js/docs.js'
+    ],
+    stylesheets: [
+      'components/bootstrap-' + getVersion('bootstrap') + '/css/bootstrap.css',
+      'css/prettify-theme.css',
+      'css/angular-topnav.css',
+      'css/docs.css',
+      'css/animations.css'
+    ]
+  };
+};

docs/config/templates/app/indexPage.template.html

@@ -11,6 +11,18 @@
   <meta name="fragment" content="!">
   <title ng-bind-template="AngularJS: {{ currentArea.name }}: {{ currentPage.name || 'Error: Page not found'}}">AngularJS</title>
 
+  <script type="text/javascript">
+    (function() {
+      // Dynamically, pre-emptively, add `noindex`, which will be removed when the doc is ready and valid
+      ['googlebot', 'robots'].forEach(function(bot) {
+        var tag = document.createElement('meta');
+        tag.name = bot;
+        tag.content = 'noindex';
+        tag.setAttribute('ng-if', 'hasError()');
+        document.head.appendChild(tag);
+      });
+    })();
+  </script>
   <script type="text/javascript">
     // dynamically add base tag as well as css and javascript files.
     // we can't add css/js the usual way, because some browsers (FF) eagerly prefetch resources
@@ -127,7 +139,7 @@ <h1 class="brand"><a href="http://angularjs.org"><img width="117" height="30" sr
             </ul>
 
           </div>
-          <div class="search-results-container" ng-show="hasResults">
+          <div class="search-results-container" ng-show="hasResults" ng-cloak>
             <div class="container">
               <div class="search-results-frame">
                 <div ng-repeat="(key, value) in results track by key" class="search-results-group" ng-class="colClassName + ' col-group-' + key" ng-show="value.length > 0">
@@ -157,7 +169,7 @@ <h4 class="search-results-group-heading">{{ key }}</h4>
           </div>
         </div>
       </nav>
-      <nav id="navbar-sub" class="sup-header navbar navbar-fixed-top" scroll-y-offset-element>
+      <nav id="navbar-sub" class="sup-header navbar navbar-fixed-top" scroll-y-offset-element ng-cloak>
         <div class="container main-grid main-header-grid">
           <div class="grid-left">
             <version-picker></version-picker>
@@ -174,7 +186,7 @@ <h4 class="search-results-group-heading">{{ key }}</h4>
       </nav>
     </header>
 
-    <section role="main" class="container main-body">
+    <section role="main" class="container main-body" ng-cloak>
       <div class="main-grid main-body-grid">
         <div class="grid-left">
           <a class="btn toc-toggle visible-xs" ng-click="toc=!toc">Show / Hide Table of Contents</a>
@@ -198,7 +210,8 @@ <h4 class="search-results-group-heading">{{ key }}</h4>
           </div>
         </div>
         <div class="grid-right">
-          <div id="loading" ng-show="loading">Loading...</div>
+          <div ng-show="loading">Loading &hellip;</div>
+          <div ng-show="loadingError">There was an error loading this resource. Please try again later.</div>
           <div ng-hide="loading" ng-include="partialPath" toc-collector autoscroll></div>
         </div>
       </div>