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=".2.25/angular.min.js"></script>
<script src="//ajax.googleapis/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=".2.25/angular.min.js"></script>
<script src="//ajax.googleapis/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
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./ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis./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./ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis./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
Share Improve this question edited May 14, 2015 at 22:04 Foysal Foysal asked May 14, 2015 at 4:22 Foysal FoysalFoysal Foysal 211 silver badge4 bronze badges 4- the controller can fire any number of times, so it's not a good place for an alert()... – dandavis Commented May 14, 2015 at 4:25
- Thanks @dandavis for your reply. Why any number of times ?? How can I control this any number of times ?? Thanks – Foysal Foysal Commented May 14, 2015 at 4: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 Commented May 14, 2015 at 4:42
- possible duplicate of AngularJs: controller is called twice by using $routeProvider – Ramesh Rajendran Commented May 14, 2015 at 4:54
4 Answers
Reset to default 6Your 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 remend you take it out of there.
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
I would recend 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.
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.