document.ready called in infinite loop with angular.js

Question!

I am building an app using Angular.js, Node.js, and Socket.io (among other things). My issue is that when I try to follow a link routing me to a login page, I end up in an infinite loop. The jquery document.ready function is called over and over, and each time this happens another socket connects to the user. The page won't even load because this keeps getting called. I am really stuck, so any help would be greatly appreciated.

Here is the configuration for the client side routing:

window.app = angular.module('MEAN', ['ngCookies', 'ngResource']);
window.app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/', { templateUrl: 'views/index.html' }).
    when('/signin', {
        templateUrl: '/partials/signin',
        controller: SigninCtrl
    }).
    when('/signup', {
        templateUrl: '/partials/signup',
        controller: SignupCtrl
    }).
    otherwise({redirectTo: '/'});
}]);

//Removing tomcat unspported headers
window.app.config(['$httpProvider', function($httpProvider, Configuration) {
    //delete $httpProvider.defaults.headers.common["X-Requested-With"];
}]);

//Setting HTML5 Location Mode
window.app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix("!");
}]);

Here is the controller:

function SigninCtrl($scope, $http, $location) {
$scope.form = {};
  $scope.title = "Sign In";
  $scope.SignIn = function() {
    $http.post('/users/session', $scope.form).
    success(function(data){
        console.log("Successful sign in", data);
        $location.path('/');
    })
    .error(function (data) {
        console.log("There was an error");
        $scope.errors = data.errors;
    });
  };
}

And here are the jade templates I am using for the partials:

extends ../layouts/default

block content
  .row
    .offset1.span5
      a(href="/auth/facebook")
        img(src="/img/icons/facebook.png")
      a(href="/auth/github")
        img(src="/img/icons/github.png")
      a(href="/auth/twitter")
        img(src="/img/icons/twitter.png")
      a(href="/auth/google")
        img(src="/img/icons/google.png")
    .span6
      if (typeof errors !== 'undefined')
        .fade.in.alert.alert-block.alert-error
          a.close(data-dismiss="alert", href="javascript:void(0)") x
          ul
            each error in errors
              li= error.type

      block auth
extends auth

block auth
  form.signin.form-horizontal(class="simple-form")
    .control-group
      label.control-label(for='email') Email
      .controls
        input#email(type='text', name="email", placeholder='Email')

    .control-group
      label.control-label(for='password') Password
      .controls
        input#password(type='password', name="password", placeholder='Password')

    .form-actions
      button(ng-click='SignIn()') Sign in
       
      | or 
      a.show-signup(href="/signup") Sign up

And here is the document ready function:

window.bootstrap = function () {
    angular.bootstrap(document, ['MEAN']);
}
window.init = function () {
window.bootstrap();
}

window.connectSocket = function(){
  var socket = io.connect();
  socket.on('connect', function(message){
    console.log("socket connected");
  });
}

$(document).ready(function () {
    //Fixing facebook bug with redirect
  console.log("Document ready!");
    if (window.location.hash == "#_=_") window.location.hash = "";
    window.init();
    window.connectSocket();
});


Answers

I feel dumb, but I figured out the issue. Similar to this issue: What web server configuration is required to make AngularJS routing function correctly?

I actually moved the routing from the server to the client earlier and in the partial template I had include auth and in the auth file I had an include for the header template, something that angular did already. In the end it was trying to include the same header in a loop... Hope this might help someone with the same issue later. Just make sure you don't have the header included multiple times...



This video can help you solving your question :)
By: admin