angular.js redirect crashing browser

Question

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

    <!DOCTYPE html>
    <html data-ng-app="appTodoList">
        <head>
            <title>TODO List</title>
        </head>
        <body>
            <div data-ng-controller="TodoCtrl">
                <a href="#/new">New Task</a>
                <ul id="listTasks">
                    <li data-ng-repeat="task in tasks">{{ task.name }}</li>
                </ul>
            </div>
            <div>
                <div data-ng-view=""></div>
            </div>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
            <script type="text/javascript" src="http://code.angularjs.org/1.2.6/angular-route.min.js"></script>     
            <script type="text/javascript">
                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});
                    };
                });


            </script>
        </body>
    </html>

//newTask.htm

<div>
    <input type="text" data-ng-model="new.TaskName" id="txtTaskName" placeholder="Task" />
    <input type="button" id="btnAdd" value="Add" data-ng-click="addTask()">
</div>
<a href="#/list">Back</a>

PS: I'm using Firefox 26

BenMorel · Accepted Answer · 2014-02-17 16:05:49Z

3

Firefox crashes because there is an infinite loop in your code. When you navigate 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

edited Feb 17, 2014 at 16:05

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Dec 26, 2013 at 13:55

LostInComputer

15.5k4 gold badges43 silver badges50 bronze badges

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

2 Comments

Thiago Custodio Over a year ago

sorry for bother you again, but how do I fix this controller issue? I've tried to include a parent element and set data-ng-controller but it still not working. Could you please give another help?

LostInComputer Over a year ago

You can use a provider/service/factory for storing and sharing data. See this joelhooks.com/blog/2013/04/24/…

Collectives™ on Stack Overflow

angular.js redirect crashing browser

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related