AngularJS controller is being called twice

Question

I new in AngularJS. I am learning AngularJS. I am trying to follow different tutorials. I working with some codes now. I have a question in this regard. My codes ares as below

index.html

<html ng-app="main_app">
    <head>
        <title>AngularJS Application</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">   
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
        <script src="js/route.js"></script>
    </head>
    <body ng-controller="main_controller">
        <div ng-view></div>
    </body>
</html>

route.js

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

app.config(function($routeProvider)
{
   $routeProvider

   // route for the home page
   .when('/', {
               templateUrl : 'pages/home.html',
               controller  : 'main_controller'
            });
});

app.controller('main_controller', function($scope) 
{
    alert('Yes');        
});

If I run this code I get the alert('Yes'); twice.

Why I am getting this alert twice ?? Is it normal action or I am doing something wrong ??

Thanks

Update

@Leo Farmer I changed structure of index.html as belows

<html>
    <head>
        <title>AngularJS Application</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">   
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
        <script src="js/route.js"></script>
    </head>
    <body>
        <div ng-app="main_app">
            <div ng-controller="main_controller">
                <div ng-view></div>
            </div>
        </div>                
    </body>
</html>

But still I am getting alert() twice. Actually my concern is "Am I doing wrong or right ??" I think getting alert() twice means I am doing something wrong.

Is my structure following good convention ??

Thanks

the controller can fire any number of times, so it's not a good place for an alert()... — dandavis, May 14 '15 at 04:25
Thanks @dandavis for your reply. Why **any number of times** ?? How can I control this **any number of times** ?? Thanks — Foysal Foysal, May 14 '15 at 04:29
to be clearer: anything that happens that's attached to the controller will fire it, it's not a one-time "load()"-style event. you can not recycle it, which would solve your particular problem, but it's good to understand why it's an issue in the first place. — dandavis, May 14 '15 at 04:42
possible duplicate of [AngularJs: controller is called twice by using $routeProvider](http://stackoverflow.com/questions/14442954/angularjs-controller-is-called-twice-by-using-routeprovider) — Ramesh Rajendran, May 14 '15 at 04:54

score 6 · Answer 1 · answered May 14 '15 at 04:35

6

Your controller is getting called twice. You have it in your body element (that's alert number one) then you also assign it as your controller for your pages/home.html which you call as your partial (that's alert two).

You don't need it in your body element. I recommend you take it out of there.

answered May 14 '15 at 04:35

Leo Farmer

7,730
5
31
47

My up vote +1 for exact solution `You don't need it in your body element. I recommend you take it out of there` – Ramesh Rajendran May 14 '15 at 04:53
Update: You don't need to add ng-controller="main_controller" to your div as you are adding the controller in your $routeProvider. You only need to call it in one place. – Leo Farmer Jun 02 '15 at 02:06
This was the answer in my case, after removing that on my body it went away. Thanks!!!! – Clyde Jan 27 '21 at 04:22
6 years later, the correct answer... – Gonzalo Lorieto Sep 25 '21 at 06:28

score 2 · Answer 2 · answered Aug 23 '17 at 17:08

2

In my case, I have used <div id="userregistration" class="content-wrapper" ng-controller="UserRegistrationController"> in html and in $route also so it called twice. I removed in html after that it is fixed

answered Aug 23 '17 at 17:08

Poorna

191
1
5

score 0 · Answer 3 · answered May 14 '15 at 04:31

0

I would reccomend modifying your alert code so it is triggered by a button or another event. You're seeing the asynchronous calling of a controller that, due to the times of which loading and processing your page, causes that code to be run twice.

I would first try loading your Javascript at the bottom of your body so that the entire page is loaded before JavaScript is.

Alternatively, you could try adding a timeout using the $timeout service to delay running your alert for a short time until the entire page loads.

answered May 14 '15 at 04:31

BrianMitchL

34
4

Thanks @bman4789. That means once at the time of loading and another at the time of processing ?? Thanks – Foysal Foysal May 14 '15 at 04:38
2

This is mostly BS. The controller is not called multiple times in the usual case. It's called twice here because it's specifically (although unintentionally) instructed to do so. – JJJ May 14 '15 at 04:41

Samir Das · Answer 4 · 2015-05-14T04:50:25.087

Because:

You are using same controller in anguler route module and ng-controller directive in the template. If you use a controller in the route module while configuring, it is useless to use same controller with ng-controller in the template. ng-view directive is enough here.
Since you are using same controller both in route config and ng-controller, thats why you are getting alert twice. You should use your controller either in angular route or ng-controller directive
If you remove routing option, you will get alert only once.

AngularJS controller is being called twice

4 Answers4