CODEWITHSUNDEEP
angularjsexpress
woz
woz

Reputation: 197

AngularJs Infinite Loop

The following index.html page causes an infinite loop. To reproduce:

  1. download the github project linked below on a (local or remote) web server (I have tried it on plunker and the infinite loop did not happen)
  2. request it from your browser.
  3. click on the p1p2 link on the page.

The infinite loop starts. On the server side, the log produces:

server request for * handled
GET /p1/p2 304 8ms
server request for * handled
GET /p1/partials/template1 304 4ms

Note the /p1 in front of /partials/template1 here. Where did that come from? That is causing the infinite loop because AngularJS cannot find the template at this url and enters the loop as a result. Shortening this /p1/p2 AngularJS route to /p1 eliminates the problem somehow. 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script>document.write('<base href="' + document.location + '" />');</script>
  </head>
  <body ng-app="minimalApp">
    <p>Index Page That Contains ng-view below..</p>
    <div ng-view></div>
    <p><a ng-href="p1/p2">p1p2</p>
    <p><a ng-href="#">#</p>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script>
      'use strict';
      var minimalApp = angular.module('minimalApp', []).
        config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
          $routeProvider.
            when('/', {
              templateUrl: 'partials/template1',
              controller: IndexCtrl
            }).
            when('/p1/p2', {
              templateUrl: 'partials/template2',
               controller: T2Ctrl
            }).
            otherwise({
              redirectTo: '/'
            });

          $locationProvider.html5Mode(true);
        }]);

      function IndexCtrl($scope) {
      }

      function T2Ctrl($scope) {
      }    
    </script>
  </body>
</html>

(I put the html here to make it easy even though the templates are created via jade)

The server I used is node/express. The complete project is on github here.

And the same html page with the templates embedded and that works is here.

Upvotes: 2

Views: 5760

Answers (1)

Joc
Joc

Reputation: 1059

'partials/template1' is relative to where you are, so when called from '/p1/p2', the browser assumes you are in the directory '/p1' and builds the path from there.

If you add the preceding slash, as in '/partials/template1' this will always build the path from the webservers root directory.

Upvotes: 3

Related Questions