2

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}}
Improve this question
7
  • 2
    And what is your question? Also just do {{mydata}} Commented Jan 5, 2015 at 17:17
  • the problem is the expressions do not evaluate i think there is some problem in my controller Commented Jan 5, 2015 at 17:22
  • again same problem by just doing {{mydata}} Commented Jan 5, 2015 at 17:23
  • {{scope.mydata}} --> scope is your application scope, you do not need to call it again, simply call {{mydata}} as the scope is already inherit... --> jsbin.com/zakaco/2/edit?html,js,output Commented Jan 5, 2015 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? Commented Jan 5, 2015 at 17:30

4 Answers 4

Reset to default
2

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);

      }());
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Maybe the problem lies in including the createController.js functions in the main app.js?
we don't have the hole code, so I would assume that he knows that part :)
@Vucko thanks it is now working but controller is in app.js but i need to create controller in separate file
@balexandre From the last OP's comment, I would say that he doesn't know that part :)
@Vucko I think you're right! Then again, ohh boy!... added the same example using 2 files and explaining everything
|
1

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.

Improve this answer

1 Comment

P.S if this works, please learn to use the javascript console. It would tell you exactly what is going on.
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!';
   });
Improve this answer

7 Comments

This is wrong, angular.module('app', []) returns the same thing that angular.module('app') will return, so the code is equivalent.
could you bit explain what to do instead of what
@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.
i did exactly the same what you answered but still facing problem
@user1399195 indeed, but look at the contents of app.js and controller.js in the question. controller.js includes only the controller function.
|
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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.