CODEWITHSUNDEEP
javascriptangularjs
user3944498
user3944498

Reputation: 41

angular - controller excute more than 1 time

I know it's asked before, but can't find solution that works for me. I get each controller start 3 times!

It's problematic for me because I have sound in my app and it's display 3 times.

I'm new to angular. i don't know if it's meaningful but i have all controllers defined in one file controllers.js. I check and the file app.js called only once.

this is my app.js:

'use strict';

/* App Module */

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatAnimations',
  'ui.router',
  'phonecatControllers',
  'phonecatFilters',
  'phonecatServices',
  'ui.utils',
  'angularCircularNavigation',
  'timer'      
]);

phonecatApp.config(['$stateProvider',
  function ($stateProvider, $urlRouterProvider) {    
      var home = {
          name: 'home',
          url: '',
          views: {
              '': {
                  templateUrl: 'partials/home.html',
                  controller: 'HomeCtrl'
              }
          }
      };  

      var learn = {
          name: 'learn',
          url: '/learn',
          views: {
              '': {
                  templateUrl: 'partials/learn.html',
                  controller: 'learnCtrl'
              }
          }
      };    

      var articles = {
          name: 'articles', 
          url: '/articles',
          views: {
              '': {
                  templateUrl: 'partials/articles.html',
                  controller: 'articlesCtrl'
              }
          }
      }; 

      $stateProvider.state(articles);
      $stateProvider.state(learn);
      $stateProvider.state(home);   
  } ]);

thanks!

Upvotes: 1

Views: 60

Answers (2)

user3944498
user3944498

Reputation: 41

decided to use $routeProvider instead and the problem solved..

Upvotes: 0

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

From my experience the most common issue that leads to controller double calling is:

You have controller call from $stateProvider state, at the same time you call controller from HTML.

For example consider:

$stateProvider 
        .state('sidemenu.groups', {
            url: "/groups",
            views: {
                'mainContent': {
                    templateUrl: 'partials/groups/groups.html',
                    controller: 'GroupsCtrl' // <-- 1st call
                }
            }
        })

and in HTML:

<div ng-controller="GroupsCtrl"></div> <!-- 2nd call -->

So remove ng-controller

Hope it will help you

Upvotes: 1

Related Questions