Search code examples
angularjsangularjs-routing

Strange Failed to load template with AngularJS app

I'm trying something very basic where i have folder structure something like

enter image description here

This is my HTML file:

 <!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title> Using Angular JS</title>
      <script src="angular.js"></script>
   <script src="angular-route.js"></script>
   <script src="app.js"></script>
   <script src="controller.js"></script>
</head>

<body >

  <ul>
   <div data-ng-view=""></div>
  </ul>

</body>
</html>

here is my app.js 

'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'
      });
  }]);

and finally controller.js

'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.'}
  ];
  }]);

while running this sample i am getting enter image description here

i have tried different combinations of loading templates like:

templateUrl: "file:///E:/TryDemos/hemantTry/view1.html", templateUrl: "/hemantTry/view1.html", templateUrl: "/view1.html"

etc etc...

but couldn't able to rectify what is the actual problem

any help or hint will be appreciated

Just a heads up: while pasting these files in VS empty project is working fine.

Thanks in advance

Solution

  • You're loading the application by opening a regular file (index.html) in the browser. Angular will try to load templates through xhr requests which will fail since you there's no http server. There are couple of ways to solve it:

    • use Grunt with Yeoman to generate application template and add your files there and then enjoy the simplified development workflow with grunt serve
    • use http-server to start an http server from your project directory