title: Starting an AngularJS Single Page App on a Sharepoint app site
body: <p>I am trying to create a Single Page App to sit in the Default.aspx page of my sharepoint-hosted app. So far, I cannot get the $route and ng-view to bind as I want.</p>
  
  <p>So far I have tried plugging some html into the "PlaceHolderMain" placeholder of a standard Default.aspx page that you get when you open a new Sharepoint App project in Visual Studio 2013, like so:</p>
  
  <pre><code>&lt;asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server"&gt;
  
  &lt;div&gt;
      &lt;p id="message"&gt;
          &lt;!-- The following content will be replaced with the user name when you run the app - see App.js --&gt;
          initializing...
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;div data-ng-app="app"&gt;
      &lt;div data-ng-controller="MainController as vm"&gt;
          &lt;a href="/TrainingApp/training"&gt;link &lt;/a&gt;
          &lt;br /&gt;
          &lt;div data-ng-view&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I have set up the app and controller as follows:</p>
  
  <p>App module:</p>
  
  <pre><code>(function () {
  'use strict';
  
  // create app
  var app = angular.module('app', [
    // ootb angular modules
    'ngRoute',      // app route (url path) support
    'ngSanitize',   // fixes HTML issues in data binding
    'ngCookies'
  ]);
  
  // startup code
  app.run(['$route', function ($route) {
  }]);
  })();
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>(function () {
  'use strict';
  
  var controllerId = 'MainController';
  angular.module('app').controller(controllerId,
      ['$rootScope', '$route', MainController]);
  
  //create controller
  function MainController($rootScope, $route) {
      var vm = this;
      this.string = "hello";
  }
  })();
  </code></pre>
  
  <p>and the module routing is configured as follows:</p>
  
  <pre><code>(function () {
  var app = angular.module('app');
  
  //get all the routes
  app.constant('routes', getRoutes());
  
  //configure routes and their resolvers
  app.config(['$routeProvider', 'routes', routeConfigurator]);
  
  function routeConfigurator($routeProvider, routes) {
      routes.forEach(function (route) {
          $routeProvider.when(route.url, route.config);
      });
  
      $routeProvider.otherwise({ redirectTo: '/' });
  }
  
  //build the routes
  function getRoutes() {
      return [
          {
              url: '/',
              config: {
                  templateUrl: 'App/Layout/splash.html',
                  title: 'Splash'
              }
          },
          {
              url: 'training',
              config: {
                  templateUrl: 'App/Layout/training.html',
                  title: 'Training'
              }
          }
      ];
  }
  })();
  </code></pre>
  
  <p>However, when I try and click on the link that takes me to /TrainingApp/Training (TrainingApp is app web url), then the routing does not take effect and the whole page is rerouted and i get a 404. </p>
  
  <p>Do I need to increase my scope of the app module on the page? Do I need to add a ng-app directive in the master page somewhere? </p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Both training.html and splash.html exist and just contain divs with some text.</p>