Error in Angular JS

Question

I included angular js in my asp.net mvc project but when i call object in controller

the angular js expressions do not evaluate

here is the app.js code please suggest

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

and here is the createController code

var createController = function ($scope) {
    $scope.mydata = 'I work!';
}

here is what i include in html

<html ng-app="app">
   <script src="~/Scripts/angular.min.js"></script>
    <script src="~/appAjs/app.js"></script>
    <script src="~/appAjs/controllers/createController.js"></script>
 <div ng-controller="createController">
{{scope.mydata}}
{{6+9}}

the problem is the expressions do not evaluate i think there is some problem in my controller — Khan Engineer, Jan 05 '15 at 17:22
`{{scope.mydata}}` --> `scope` is your application scope, you do not need to call it again, simply call `{{mydata}}` as the scope is already inherit... --> http://jsbin.com/zakaco/2/edit?html,js,output — balexandre, Jan 05 '15 at 17:27
If `{{6+9}}` is not being evaluated to 15, then this suggests there is a problem with the angular bootstrap process - what is showing in the console? — Ed_, Jan 05 '15 at 17:30
Also, if you are minifying your code, the $scope won't work. You need to use the syntax app.controller('createController', ['$scope', createController]); It's a good habit to get into, because this causes huge headaches on a prod environment. — Scottie, Jan 05 '15 at 17:37

score 2 · Accepted Answer · edited May 23 '17 at 11:58

from your code, I can only suspect two things

your javascript does not have the proper scope
do not use the word scope in your "scope" code

first part: javascript scope:

Always use an IIFE, in your case your code should look like:

(function(){

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

  var createController = function ($scope) {
    $scope.mydata = 'I work!';
  };


  app.controller('createController', createController);

}());

second part: don't use the word scope

in your HTML, you should not use the word scope as it's already inherit in your controller as that's the model you are passing to the "view"

hence, your code should look like:

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div ng-controller="createController">
    {{mydata}}
    {{6+9}}
  </div>
</body>
</html>

the result is:

I work! 15

live code in JSBIN so you can check it out.

your HTML page, all together should look like this:

if you have only one file

<!DOCTYPE html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <title>My AngularJs App</title>
</head>
<body>

  <!-- HTML -->
  <div ng-controller="createController">
    {{mydata}}
    {{6+9}}
  </div>

  <!-- AngularJS required -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

  <!-- AngularJS code -->
  <script>

      (function(){

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

        var createController = function ($scope) {
          $scope.mydata = 'I work!';
        };

        app.controller('createController', createController);

      }());

  </script>
</body>
</html>

if you're using 2 files

file index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <title>My AngularJs App</title>
</head>
<body>

  <!-- HTML -->
  <div ng-controller="createController">
    {{mydata}}
    {{6+9}}
  </div>

  <!-- AngularJS required -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

  <!-- AngularJS extra files -->
  <script src="createController.js"></script>

</body>
</html>

file createController.js (in the same folder as index.html)

      (function(){

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

        var createController = function ($scope) {
          $scope.mydata = 'I work!';
        };

        app.controller('createController', createController);

      }());

Maybe the problem lies in including the `createController.js` functions in the main `app.js`? — Vucko, Jan 05 '15 at 17:39
we don't have the hole code, so I would assume that he knows that part :) — balexandre, Jan 05 '15 at 17:40
@Vucko thanks it is now working but controller is in app.js but i need to create controller in separate file — Khan Engineer, Jan 05 '15 at 17:42
@balexandre [From the last OP's comment](http://stackoverflow.com/questions/27784547/error-in-angular-js#comment43979784_27784804), I would say that he doesn't know that part :) — Vucko, Jan 05 '15 at 17:43
@Vucko I think you're right! Then again, ohh boy!... added the same example using 2 files and explaining everything — balexandre, Jan 05 '15 at 17:46
@balexandre your updated answer will work, however, I think the OP wants to have two external files, `app.js` and `createController.js` and that he wants to import/include `createController.js` to `app.js`. — Vucko, Jan 05 '15 at 17:56

score 1 · Answer 2 · answered Jan 05 '15 at 17:36

I think the problem may well be the order in which you are including your scripts:

Try the following:

<script src="~/Scripts/angular.min.js"></script>
<script src="~/appAjs/controllers/createController.js"></script>
<script src="~/appAjs/app.js"></script>

Reasoning is that app.js tries to define a controller using a function that has not been defined when the function is run.

Points that {{scope.data}} should be {{data}} are correct, but do not explain {{6+9}} not working.

**P.S** if this works, please learn to use the javascript console. It would tell you exactly what is going on. — Ed_, Jan 05 '15 at 17:37

Ben Fogel · Answer 3 · 2015-01-05T17:30:52.773

0

You need to create the controller in the context of the app module.

Your app.js should just have

angular.module('app', []);

and your createController code should look similar to this

angular.module('app')
   .controller('createController', function ($scope) {
     $scope.mydata = 'I work!';
   });

edited Jan 05 '15 at 17:30

answered Jan 05 '15 at 17:25

Ben Fogel

541
5
13

This is wrong, `angular.module('app', [])` returns the same thing that `angular.module('app')` will return, so the code is equivalent. – Ed_ Jan 05 '15 at 17:28
could you bit explain what to do instead of what – Khan Engineer Jan 05 '15 at 17:29
@EdHinchliffe In order to separate app.js and the controller.js this is the way to do this though. angular.module('app', []) instantiates the module while angular.module('app') returns the singleton. – Ben Fogel Jan 05 '15 at 17:29
i did exactly the same what you answered but still facing problem – Khan Engineer Jan 05 '15 at 17:30
@user1399195 indeed, but look at the contents of app.js and controller.js in the question. controller.js includes only the controller function. – Ed_ Jan 05 '15 at 17:34
no {{6 + 9}} does not evaluate when i include controller in my html otherwise it evaluates – Khan Engineer Jan 05 '15 at 17:35
@KhanEngineer The javascript console should be displaying some sort of errors that can help identify the problem then. – Ben Fogel Jan 05 '15 at 17:38

score 0 · Answer 4 · answered Jan 05 '15 at 17:34

0

You need to change the expression from

{{scope.mydata}}

to

{{mydata}}

Expression have access to scope and no keyword is required to access a scope object.

answered Jan 05 '15 at 17:34

divyenduz

2,037
19
38

Error in Angular JS

4 Answers4

if you have only one file

if you're using 2 files