javascript - Controller not a function, got undefined, while defining controllers globally -


i writing sample application using angularjs. got error mentioned below on chrome browser.

error is

error: [ng:areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=contactcontroller&p1=not%20a%20function%2c%20got%20undefined

which renders

argument 'contactcontroller' not function, got undefined

code

<!doctype html> <html ng-app> <head>     <script src="../angular.min.js"></script>     <script type="text/javascript">         function contactcontroller($scope) {             $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];              $scope.add = function() {                 $scope.contacts.push($scope.newcontact);                 $scope.newcontact = "";                              };         }         </script>     </head>  <body>         <h1>  modules sample </h1>      <div ng-controller="contactcontroller">         email:<input type="text" ng-model="newcontact">         <button ng-click="add()">add</button>          <h2> contacts </h2>         <ul>             <li ng-repeat="contact in contacts"> {{contact}} </li>         </ul>         </div> </body>  </html> 

with angular 1.3+ can no longer use global controller declaration on global scope (without explicit registration). need register controller using module.controller syntax.

example:-

angular.module('app', [])     .controller('contactcontroller', ['$scope', function contactcontroller($scope) {         $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];          $scope.add = function() {             $scope.contacts.push($scope.newcontact);             $scope.newcontact = "";          };     }]); 

or

function contactcontroller($scope) {     $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];      $scope.add = function() {         $scope.contacts.push($scope.newcontact);         $scope.newcontact = "";     }; } contactcontroller.$inject = ['$scope']; angular.module('app', []).controller('contactcontroller', contactcontroller); 

it breaking change can turned off use globals using allowglobals.

example:-

angular.module('app')     .config(['$controllerprovider', function($controllerprovider) {         $controllerprovider.allowglobals();     }]); 

here comment angular source:-

  • check if controller given name registered via $controllerprovider
  • check if evaluating string on current scope returns constructor
  • if $controllerprovider#allowglobals, check window[constructor] on global window object (not recommended)
 .....  expression = controllers.hasownproperty(constructor)             ? controllers[constructor]             : getter(locals.$scope, constructor, true) ||                 (globals ? getter($window, constructor, true) : undefined); 

some additional checks:-

  • do make sure put appname in ng-app directive on angular root element (eg:- html) well. example:- ng-app="myapp"

  • if fine , still getting issue remember make sure have right file included in scripts.

  • you have not defined same module twice in different places results in entities defined on same module cleared out, example angular.module('app',[]).controller(.. , again in place angular.module('app',[]).service(.. (with both scripts included of course) can cause registered controller on module app cleared out second recreation of module.


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -