title: Failed to instantiate module pageslide-directive with multiple pages in angular js
body: <p>I am learning angularjs and i have created 2 pages namely welcome.html and queryboard.html. I was trying to implement side out panel, with help of this link
  <a href="http://dpiccone.github.io/ng-pageslide/examples/" rel="nofollow">http://dpiccone.github.io/ng-pageslide/examples/</a> . </p>
  
  <p>On my welcome page i was succesfully able to implement slideout panel. My welcome page has a carousel, on clicking the text on carousel it redirects to another page queryboard.html but when queryboard page is loaded it throws error on console</p>
  
  <pre><code>$injector:modulerr] Failed to instantiate module ui.bootstrap.demo due to:
  Error: [$injector:modulerr] Failed to instantiate module pageslide-directive due to:
  Error: [$injector:nomod] Module 'pageslide-directive' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument
  </code></pre>
  
  <p>Below is welcome.html</p>
  
  <pre><code>&lt;html ng-app="ui.bootstrap.demo"&gt;
  &lt;head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"&gt;&lt;/script&gt;
      &lt;script src="resources/js/main.js"&gt;&lt;/script&gt;
      &lt;script src="resources/js/CarouselController.js"&gt;&lt;/script&gt;
      &lt;script src="resources/js/angular-pageslide-directive.js"&gt;&lt;/script&gt;
      &lt;script src="resources/js/gsenv.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;style type="text/css"&gt;
      body {
          background: url(/resources/images/nyc.jpg) center top no-repeat;
      }
  
      .ng-pageslide {
          background: #ac2925;
      }
  
  &lt;/style&gt;
  &lt;div ng-controller="CarouselDemoCtrl" class="container-fluid col-md-12 col-md-offset-10" &gt;
      &lt;h1 class="text-center text-primary centered"&gt;Welcome to ananta-gs dashboard&lt;/h1&gt;
      &lt;div&gt;
          &lt;uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides" style="height: 305px; width: 450px; margin:auto"&gt;
              &lt;uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"&gt;
                  &lt;img ng-src="/resources/images/cloud-home.jpg" style="margin:auto;"&gt;
                  &lt;div class="carousel-caption"&gt;
                      &lt;a href="#" ng-click='sendEnvName(slide.text)'&gt;
                          &lt;h3 class="carousel-caption text-primary center-block"&gt;
                              {{slide.text}}&lt;/h3&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/uib-slide&gt;
          &lt;/uib-carousel&gt;
          &lt;a href="" style="background-color: #ac2925" ng-show="errorShow" ng-click="toggle()"&gt;There are exceptions during app initialization, click here to see details&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;pageslide ps-open="checked" ps-side="left" ps-squeeze="true"&gt;
              &lt;div style="padding:20px" id="demo-right"&gt;
                  &lt;h2&gt;Exceptions : &lt;/h2&gt;
                  &lt;p style="word-wrap: break-word"&gt;{{exceptions}}&lt;/p&gt;
                  &lt;a ng-click="toggle()" class="button"&gt;Close&lt;/a&gt;
              &lt;/div&gt;
          &lt;/pageslide&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>js for queryboard.js</p>
  
  <pre><code>angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope, $http, dataShare, $uibModal) {
      $scope.myInterval = 5000;
      $scope.noWrapSlides = false;
      $scope.active = 0;
      $scope.errorShow = false;
      var slides = $scope.slides = [];
      var currIndex = 0;
  
      $scope.sendEnvName = function (data) {
          dataShare.sendEnvDetails(data);
  
          window.location.href = "query/queryboard.html";
      }
  
      $scope.addSlide = function (envName) {
          slides.push({
              text: envName,
              id: currIndex++
          });
      };
  
      $http.get("http://localhost:8080/getEnvList")
          .success(function (data) {
              var envs = data.spaceLookUpDetailsList;
              for (var i in envs) {
                  $scope.addSlide(envs[i].envName);
              }
  
  
              if(data.exceptions) {
                  $scope.errorShow = true;
                  $scope.exceptions = data.exceptions;
              }
          })
          .error(function (errordata) {
              $uibModal.open({
                  templateUrl: 'error/ErrorModal.html',
                  controller: 'ErrModalInstanceCtrl',
                  resolve: {
                      error: function () {
                          console.log('error=' + errordata.errorMessage)
                          return errordata;
                      }
                  }
              });
  
  
          });
  
      $scope.toggle = function () {
          $scope.checked = !$scope.checked;
      }
  
  });
  
  angular.module('ui.bootstrap.demo').controller('ErrModalInstanceCtrl', function ($scope, $uibModalInstance, error) {
      $scope.errormessage = error.errorMessage;
      $scope.stacktrace = error.stackTrace;
  
      $scope.ok = function () {
          $uibModalInstance.close('closed');
      };
  });
  </code></pre>
  
  <p>below is queryboard.html</p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css"&gt;
      &lt;script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"&gt;&lt;/script&gt;
      &lt;script src="../../../resources/js/angular-pageslide-directive.js.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;script type="text/css"&gt;
      .app-modal-window .modal-dialog {
          width: 500px;
      }
  &lt;/script&gt;
  &lt;script src="../../../resources/js/main.js"&gt;&lt;/script&gt;
  &lt;script src="../../../resources/js/TypeAheadController.js"&gt;&lt;/script&gt;
  &lt;script src="../../../resources/js/gsenv.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>below is gsEnv.js, this is used to transfer data between multiple pages as a request parameter</p>
  
  <pre><code>angular.module('ui.bootstrap.demo').factory('dataShare', function ($window) {
      var KEY = 'GS.SelectedENV';
      var sendEnvDetails = function (data) {
          var mydata = $window.sessionStorage.getItem(KEY);
          mydata = data;
          $window.sessionStorage.setItem(KEY, JSON.stringify(mydata));
      };
      var getData = function () {
          var mydata = $window.sessionStorage.getItem(KEY);
          if (mydata) {
              mydata = JSON.parse(mydata);
          }
          return mydata || [];
      };
      return {
          sendEnvDetails: sendEnvDetails,
          getData: getData
      };
  });
  </code></pre>
  
  <p>Is angularjs only for SPA, or do i need to declare separate app for each html page and will it support data transfer between multiple pages</p>