title: Strange Failed to load template with AngularJS app
body: <p>I'm trying something very basic where i have folder structure something like</p>
  
  <p><a href="https://i.stack.imgur.com/DIiV5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DIiV5.png" alt="enter image description here"></a></p>
  
  <p>This is my HTML file:</p>
  
  <pre><code> &lt;!doctype html&gt;
  &lt;html lang="en" ng-app="phonecatApp"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /&gt;
      &lt;title&gt; Using Angular JS&lt;/title&gt;
        &lt;script src="angular.js"&gt;&lt;/script&gt;
     &lt;script src="angular-route.js"&gt;&lt;/script&gt;
     &lt;script src="app.js"&gt;&lt;/script&gt;
     &lt;script src="controller.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body &gt;
  
    &lt;ul&gt;
     &lt;div data-ng-view=""&gt;&lt;/div&gt;
    &lt;/ul&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here is my app.js </p>
  
  <pre><code>'use strict';
  var phonecatApp = angular.module('phonecatApp', [
    'ngRoute',
    'phonecatControllers'
  ]);
  
  phonecatApp.config(['$routeProvider',
    function($routeProvider) {
      $routeProvider.
        when('/view1', {
         templateUrl: "view1.html",
          controller: 'PhoneListCtrl'
        }).
        when('/view2', {
         templateUrl: 'view2.html',
          controller: 'PhoneDetailCtrl'
        }).
        otherwise({
          redirectTo: '/view1'
        });
    }]);
  </code></pre>
  
  <p>and finally controller.js</p>
  
  <pre><code>'use strict';
  
  /* Controllers */
  
  var phonecatControllers = angular.module('phonecatControllers', []);
  
  phonecatControllers.controller('PhoneListCtrl', ['$scope',
    function($scope) {
     $scope.phones = [
      {'name': 'Nexus S',
       'snippet': 'Fast just got faster with Nexus S.'},
      {'name': 'Motorola XOOM™ with Wi-Fi',
       'snippet': 'The Next, Next Generation tablet.'},
      {'name': 'MOTOROLA XOOM™',
       'snippet': 'The Next, Next Generation tablet.'}
    ];
    }]);
  
  phonecatControllers.controller('PhoneDetailCtrl', ['$scope',
    function($scope) {
      $scope.phones = [
      {'name': 'Nexus S1',
       'snippet': 'Fast just got faster with Nexus S.'},
      {'name': 'Motorola XOOM™ with Wi-Fi1',
       'snippet': 'The Next, Next Generation tablet.'},
      {'name': 'MOTOROLA XOOM™1111',
       'snippet': 'The Next, Next Generation tablet.'}
    ];
    }]);
  </code></pre>
  
  <p>while running this sample i am getting 
  <a href="https://i.stack.imgur.com/BaJ7v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BaJ7v.png" alt="enter image description here"></a></p>
  
  <p>i have tried different combinations of loading templates like:</p>
  
  <p>templateUrl: "file:///E:/TryDemos/hemantTry/view1.html",
    templateUrl: "/hemantTry/view1.html",
    templateUrl: "/view1.html"</p>
  
  <p>etc etc...</p>
  
  <p>but couldn't able to rectify what is the actual problem</p>
  
  <p>any help or hint will be appreciated </p>
  
  <p>Just a heads up: while pasting these files in VS empty project is working fine.</p>
  
  <p>Thanks in advance</p>