Strange Failed to load template with AngularJS app

Question

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

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

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

What about ./view1.html?

Dmitri Pavlutin
– Dmitri Pavlutin

2016-01-07 06:33:56 +00:00
Commented Jan 7, 2016 at 6:33 — Dmitri Pavlutin
– Dmitri Pavlutin, Commented Jan 7, 2016 at 6:33
Did you open index.html directly to your browser?

PrinceG
– PrinceG

2016-01-07 06:34:42 +00:00
Commented Jan 7, 2016 at 6:34 — PrinceG
– PrinceG, Commented Jan 7, 2016 at 6:34
Try running your app through your local web server

PrinceG
– PrinceG

2016-01-07 06:40:56 +00:00
Commented Jan 7, 2016 at 6:40 — PrinceG
– PrinceG, Commented Jan 7, 2016 at 6:40

miensol · Accepted Answer · 2016-01-07 06:45:59Z

2

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

answered Jan 7, 2016 at 6:45

miensol

41.9k9 gold badges127 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wasimakram Mulla · Accepted Answer · 2016-01-07 06:55:54Z

1

To be very precise with the solution please check the notes below.

'phonecatControllers' do not inject it in angular.module in your app.js
Remove controller from your route mechanism just keep only templateUrl that's enough controller is written there if you want to attest the controller to the template at runtime which is not necessary in your case.

In your controller remove the following lines.

'use strict';    
/* Controllers */    
var phonecatControllers = angular.module('phonecatControllers', []);

and your controller name must be like

phonecatApp .controller('PhoneListCtrl', ['$scope',

Its is preferred to use ng-view instead of data-ng-view as an attribute.
Then you can have your template path as /view1.html or ./view1.html all are fine you done need to give an absolute path.

Hope this resolves your query

answered Jan 7, 2016 at 6:55

Wasimakram Mulla

5118 silver badges24 bronze badges

4 Comments

Wasimakram Mulla Over a year ago

If you still face an issue create a plunker if will make the relevant changes and will help you out :) .

Wasimakram Mulla Over a year ago

After all this try running it in firefox as it allows XHR requests without any server. or if you want to run it in Chrome then make sure your web security is disabled in Chrome.

Ajay Kotnala Over a year ago

Hi Wasim. thanks for you reply . I have tried what you are suggesting already. then i moved to angular official tutorial site. the code above is highly inspired from angular official tutorial. but still i will incorporate changes suggest by you and let you know if it works fine.. thanks again :)

Wasimakram Mulla Over a year ago

@AjayKotnala if this does not help kindly create a plunder an comment the path will surely get back to you on this.

Collectives™ on Stack Overflow

Strange Failed to load template with AngularJS app

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related