0

I'm trying to create a new angularjs controller and this error just don't want to dissapear:

Argument 'AppController' is not a function, got undefined

My code:

var app = angular.module('myApp', [])
.controller('AppController', function($scope) {
    $scope.data = 'Hello';
});

app.html.twig

<div ng-app="myApp">
<div ng-controller="AppController">
    <h1> {{'{{ data }}' }}</h1>

</div>

I really don't understand what am I missing. I ve searched for this error, and I tried the solutions presented but I can not resolve it. Any ideas?

IleNea
  • 569
  • 4
  • 17
  • may be this what you need https://stackoverflow.com/a/25895387/1054978 – Mourya Aug 07 '17 at 09:09
  • Possible duplicate of [Angularjs: Error: \[ng:areq\] Argument 'HomeController' is not a function, got undefined](https://stackoverflow.com/questions/25895235/angularjs-error-ngareq-argument-homecontroller-is-not-a-function-got-und) – Yury Tarabanko Aug 07 '17 at 09:10
  • Try: var app = angular.module('myApp', []); app.controller... – Ramsing Nadeem Aug 07 '17 at 09:12
  • @RamsingNadeem still the same error.. – IleNea Aug 07 '17 at 09:12
  • @Mourya already checked that solution, but with not success. In my configuration I have: angular.module('myApp', []); And I access it only once so don't see the point – IleNea Aug 07 '17 at 09:14
  • @IleNea you probably just didn't load the script with your defined controller – devqon Aug 07 '17 at 09:23
  • Possible duplicate of https://stackoverflow.com/questions/17289236/error-argument-is-not-a-function-got-undefined –  Aug 07 '17 at 09:29
  • @devqon and where this load is usually made? – IleNea Aug 07 '17 at 10:13

4 Answers4

0

Try to create like this 

var jimApp = angular.module("mainApp",  []);

    jimApp.controller('mainCtrl', function($scope){
      $scope.data = 'Hello';
    });


<div ng-app="mainApp" ng-controller="mainCtrl">
    {{ data }}
</div>
byteC0de
  • 5,153
  • 5
  • 33
  • 66
0

I think you should keep it separate like this, it'll work

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

OR 

var app = angular.module('myApp');

app.controller('AppController', function($scope) {
    $scope.data = 'Hello';
});

Also this syntax is wrong but your error is not because of this 

<h1> {{'{{ data }}' }}</h1>

Change

<h1> {{ data }}</h1>
Rakesh Chand
  • 3,105
  • 1
  • 20
  • 41
0

var app = angular.module('myApp', [])
app.controller('AppController', function($scope) {
    $scope.data = 'Hello';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="AppController">
      <h1> {{data}}</h1>
  </div>
</div>

{{'{{ data }}' }} =======> {{data}}

I created a snippet with your provided code and jut this part in html and it's working now. Kindly check this answer.

Thank you.

  • still not working.. should I declared also in another place? – IleNea Aug 07 '17 at 09:21
  • if you can provide your problem with a plunker that would be helpful for us to find out the issue. –  Aug 07 '17 at 09:23
  • markup structure fine? Because the code you provided is missing one closing div. –  Aug 07 '17 at 09:24
0

Here is your own code. Please go through it and for more just go to plunker 

 //JS code
    var app = angular.module('myApp', [])
    .controller('AppController', function($scope) {
        $scope.data = 'Hello';
    });




    //template code
        <div ng-app="myApp">
            <div ng-controller="AppController">
              <h1> {{data}}</h1>
           </div>
         </div>
jesusverma
  • 1,625
  • 1
  • 16
  • 17