AngularJs basic application executes twice

Question

Why my controller executes twice ?

I made many tests and it returns the same result, it can impact my application ?

<html ng-app="todoApp">
  <head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
	<script>
	"use strict";
    angular.module('todoApp', [])
      .controller('TodoListController', function() {
        var todoList = this;
		var i = 0;
     
        todoList.addTodo = function() {
          console.log(1)
			i++;
			// return i it breaks the script
        };
      });
	</script>
  </head>
  <body ng-controller="TodoListController as todoList">
	{{todoList.addTodo()}}
  </body>
</html>

Johannes Jander · Accepted Answer · 2016-02-24 14:48:37Z

It's a problem with the Angular digest cycle. addTodo() would be executed as frequently as that cycle runs, anything from 1 to several iterations.

in your Angular template expressions ({{}}), bind to scope variables, not functions unless you know what you do (that is only bind to idempotent getter functions). And compute the value of those variables in your controller. Like this:

<html ng-app="todoApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script>
    "use strict";
    angular.module('todoApp', [])
      .controller('TodoListController', function() {
        var todoList = this;
        var i = 0;

        todoList.addTodo = function() {
          console.log(1)
            i++;
            return i;
        };

        todoList.todo = todoList.addTodo();
      });
    </script>
  </head>
  <body ng-controller="TodoListController as todoList">
    {{todoList.todo}}
  </body>
</html>

Serginho · Accepted Answer · 2016-02-24 14:52:35Z

0

Your controller doesn't execute twice, you function addTodo is executed twice. That happens cause angular is rendering de view twice.

Read angular $watch to underestand why {{}} are executed twice.

After a watcher is registered with the scope, the listener fn is called asynchronously (via $evalAsync) to initialize the watcher. In rare cases, this is undesirable because the listener is called when the result of watchExpression didn't change. To detect this scenario within the listener fn, you can compare the newVal and oldVal. If these two values are identical (===) then the listener was called due to initialization.

answered Feb 24, 2016 at 14:52

Serginho

7,5303 gold badges31 silver badges54 bronze badges

Collectives™ on Stack Overflow

AngularJs basic application executes twice

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related