title: Unable to load angularJS view in .net core mvc
body: <p>So I am having trouble loading my custom CreateBooking.html which only has this as a test</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;h2&gt;AngularJS Test&lt;/h2&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My structure is like this </p>
  
  <p><a href="https://i.stack.imgur.com/Qv60D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qv60D.png" alt="enter image description here"></a></p>
  
  <p>The main angular module</p>
  
  <pre><code>module Asda {
  var app = angular.module("BookingApp", ["ngRoute"])
      .config(function ($routeProvider: ng.route.IRouteProvider, $locationProvider: ng.ILocationProvider) {
          $locationProvider.html5Mode(true);
      });
  </code></pre>
  
  <p>}</p>
  
  <p>The controller</p>
  
  <pre><code>module Asda {
  export class CreateBookingController {
      static $inject = ["$scope", "$http"];
  
      bookingData: IBookingViewModel;     
  
      constructor($scope, $http) {    
          this.bookingData.Action = "Test";
      }
  
      static routing($routeProvider) {            
  
          $routeProvider.when("/createbooking",
              {
                  controller: "CreateBookingController",
                  templateUrl: "/app/CreateBooking/CreateBooking.html",
                  controllerAs: "ctr"                 
              });
      }
  }
  
  angular.module("BookingApp")
      .controller("CreateBookingController", CreateBookingController)
      .config(["$routeProvider", CreateBookingController.routing]);
  </code></pre>
  
  <p>};</p>
  
  <p>As I am using .net core MVC I am catching the request and loading a generic cshtml view which has this inside</p>
  
  <pre><code>&lt;div ng-view&gt;
  </code></pre>
  
  <p></p>
  
  <p>So angular should be able to load its view... however the html in CreateBooking.html is not rendered..</p>
  
  <p>I have added the files in this order in my head section</p>
  
  <pre><code>&lt;script src="~/js/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/js/angular-route.min.js"&gt;&lt;/script&gt;   
  &lt;!-- Main angular app module--&gt;
  &lt;script src="~/App/BookingApp.js"&gt;&lt;/script&gt;
  &lt;!-- Angular controllers--&gt;
  &lt;script src="~/App/CreateBooking/CreateBookingController.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>angular and angular-route are both v1.7.9</p>
  
  <p>I am at a loss.. :/</p>