angular.js redirect crashing browser-Collection of common programming errors

3 years ago

admin

2 minutes

I’m trying to do a simple TODO sample with angular.js (using routes). I could open the form to create a New Task, but when I click on “Back” button (after create a new one), it always crashes my browser.

I’ve tried config the ‘/’ route and use .otherwise too, but I’m still getting the same result.

What I’m doing wrong?

//listTasks.htm

    
    
        
            TODO List
        
        
            
                New Task

{{ task.name }}

            
            
                
            
            
                 
            
                var app = angular.module("appTodoList",['ngRoute']);

                app.config(function ($routeProvider) 
                {
                    $routeProvider
                        .when('/list',
                        {
                            controller:'TodoCtrl',
                            templateUrl: 'listTasks.htm'
                        })
                        .when('/new',
                        {
                            controller:'TodoCtrl',
                            templateUrl: 'newTask.htm'
                        });
                });

                app.controller('TodoCtrl', function($scope) 
                {           
                    $scope.tasks = [];          
                    $scope.addTask = function ()
                    {   
                        $scope.tasks.push({name: $scope.new.TaskName});
                    };
                });

//newTask.htm


    
    

Back

PS: I’m using Firefox 26

Firefox crashes because there is an infinite loop in your code. When you nagivate to /listTasks it will load /listTasks again in the ng-view and so on.

Instead of listTasks.htm containing the route, place the route in another page like index.htm
```
  $routeProvider.when('/list',
            {
                controller:'TodoCtrl',
                templateUrl: 'listTasks.htm'
            })
            .when('/new',
            {
                controller:'TodoCtrl',
                templateUrl: 'newTask.htm'
            })
            .when('/',
            {
                redirectTo: '/list'
            });
```
By the way, the tasks aren’t being saved because a new controller is created per view instance but that’s an unrelated problem

See sample

Originally posted 2014-01-04 02:49:16.