I am getting following console error when the url is users/personal or users/:id:
angular.min.js:107 RangeError: Maximum call stack size exceeded.
Its running in loop and page hang.
But if I remove users form url its working fine. like /users My code is below
app.js file:-
var app = angular.module('angulardemo', ['ngRoute', 'ngCookies']) .constant('API_URL', 'http://127.0.0.1:8001') .config(function ($routeProvider, $locationProvider, $httpProvider) {
$httpProvider.defaults.headers.common = {'Content-Type' : 'application/json'}; $httpProvider.defaults.headers.post = {}; $httpProvider.defaults.headers.put = {}; $httpProvider.defaults.headers.patch = {}; $routeProvider .when('/', {
templateUrl : "view/home.html",
controller : 'PagesController' }) .when('/home', {
templateUrl : "view/home.html",
controller : 'PagesController' }) .when('/about', {
templateUrl : "view/about.html",
controller : 'PagesController' }) .when('/team', {
templateUrl : "view/team.html",
controller : 'PagesController' }) .when('/work', {
templateUrl : "view/work.html",
controller : 'PagesController' }) .when('/price', {
templateUrl : "view/price.html",
controller : 'PagesController' }) .when('/contact', {
templateUrl : "view/contact.html",
controller : 'PagesController' })
.when('/register', {
controller: 'AuthController',
templateUrl: 'view/auth/register.html',
})
.when('/login', {
controller: 'AuthController',
templateUrl: 'view/auth/login.html',
}) .when('/users/personal', {
controller: 'PersonalController',
templateUrl: 'view/users/personal.html',
})
.when('/users/edu', {
controller: 'EduController',
templateUrl: 'view/users/edu.html',
})
.when('/users/contact', {
controller: 'ContactController',
templateUrl: 'view/users/contact.html',
})
.when('/users/other', {
controller: 'OthersController',
templateUrl: 'view/users/other.html',
})
.when('/logout', {
// templateUrl: " ",
resolve : {
redirect: function ($routeParams, $location){
sessionStorage.removeItem('auth');
$location.path('/login').replace();
}
}
}) .otherwise({
redirectTo: '/',
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false });
$locationProvider.hashPrefix('');
}).run(['$http', '$cookies', function($http, $cookies) {
$http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken; }]);
and my controller is personal.controller.js
app.controller('PersonalController', function ( $scope, AuthService, NavigationService, $http, $location, API_URL){
$scope.navMenu = NavigationService.getNavigation();
});
and index file is index.html
<!DOCTYPE html>
<html ng-app="angulardemo">
<head>
<title>Angular Js | Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://angulardemo.com/public/css/w3.css">
<link rel="stylesheet" href="http://angulardemo.com/public/css/auth.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div ng-controller="NavigationController" ng-if="matchNav == false">
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
<!-- Bootstrap library -->
<!--<link rel="stylesheet" href="http://angulardemo.com/node_modules/bootstrap/dist/css/bootstrap.min.css">-->
<!--<script src="http://angulardemo.com/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>-->
<!-- Bootstrap library ends-->
</div>
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
body, html {
height: 100%;
line-height: 1.8;
}
/* Full height image header */
.bgimg-1 {
background-position: center;
background-size: cover;
background-image: url("public/images/mac.jpg");
min-height: 100%;
}
.w3-bar .w3-button {
padding: 16px;
}
</style>
</head>
<body>
<div data-ng-view style="display: inline !important;"></div>
<script src="http://angulardemo.com/Http/lib/angular/angular.min.js"></script>
<script src="http://angulardemo.com/Http/lib/angular-route.min.js"></script>
<script src="http://angulardemo.com/Http/lib/angular-cookies.js"></script>
<script src="http://angulardemo.com/Http/app.js"></script>
<script src="http://angulardemo.com/Http/factories/auth.factory.js"></script>
<script src="http://angulardemo.com/Http/factories/flash.factory.js"></script>
<script src="http://angulardemo.com/Http/services/auth.service.js"></script>
<script src="http://angulardemo.com/Http/services/navigation.service.js"></script>
<script src="http://angulardemo.com/Http/controllers/pages.controller.js"></script>
<script src="http://angulardemo.com/Http/controllers/auth/auth.controller.js"></script>
<script src="http://angulardemo.com/Http/controllers/navigation.controller.js"></script>
<script src="http://angulardemo.com/Http/controllers/users/personal.controller.js"></script>
<script src="http://angulardemo.com/Http/controllers/users/edu.controller.js"></script>
<!--<script src="http://angulardemo.com/Http/controllers/users/contact.controller.js"></script>
<script src="http://angulardemo.com/Http/controllers/users/others.controller.js"></script>-->
<!-- Add Google Maps -->
<script>
// function myMap()
// {
// myCenter=new google.maps.LatLng(41.878114, -87.629798);
// var mapOptions= {
// center:myCenter,
// zoom:12, scrollwheel: false, draggable: false,
// mapTypeId:google.maps.MapTypeId.ROADMAP
// };
// var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
// var marker = new google.maps.Marker({
// position: myCenter,
// });
// marker.setMap(map);
// }
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
// Toggle between showing and hiding the sidebar when clicking the menu icon
var mySidebar = document.getElementById("mySidebar");
function w3_open() {
if (mySidebar.style.display === 'block') {
mySidebar.style.display = 'none';
} else {
mySidebar.style.display = 'block';
}
}
// Close the sidebar with the close button
function w3_close() {
mySidebar.style.display = "none";
}
</script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script> -->
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp-->
</body>
</html>
and directory structure is
and NavigationService.js file:
app.service('NavigationService', function (AuthService, $location) {
/**
*
* Get All the navigation
*/
this.getNavigation = function (){
var navMenu = [{title : "ABOUT", url : '/about', show : true}, {title : "TEAM", url : '/team', show : true}, {title : "WORK", url : '/work', show : true}, {title : "PRICING", url : '/price', show : true}, {title : 'CONTACT', url : '/contact', show : true}, ];
if(AuthService.checkLogin()){
navMenu.push({title : 'LOGOUT', url : '/logout', show : AuthService.checkLogin()});
}
else{
navMenu.push({title : 'LOGIN', url : '/login', show : !AuthService.checkLogin()}, {title : 'REGISTER', url : '/register', show : !AuthService.checkLogin()});
}
return navMenu;
}
/**
*
* Get Navigation title
*/
this.getNavTitle = function (){
var nav = [];
angular.forEach(this.getNavigation(), function(navigations, key) {
nav.push(navigations.title);
});
return nav;
}
/**
*
*
*/
this.matchNavigation = function (){
var route = $location.url().replace('/','');
if( this.getNavTitle().indexOf(route) === -1 ) return true;
else return false;
}
});
Any suggestions?
Please see the directory structure link below.
