Data binding in Angular js

Question

When i am using angular version this. "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js" my code works fine. but when i am using this angular version my code is not working. "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js".

Full HTML code.

    <!DOCTYPE html>
    <html ng-app="">
    <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <head>
    <title>Angular Js Tutorial</title>
    </head>
    <body>
         <div ng-controller="Maincontroller">
             {{message}}
         </div>
        <script>
             function Maincontroller($scope)
              {
                  $scope.message = "Hii how are you";
              }
        </script>
    </body>
   </html>

I didn't the required output. It simply prints.

   {{message}}

Can you provide some of your controller code or console output when the page is rendering? Odds are there is some exception not allowing the binding to complete — Hal, Nov 21 '15 at 15:27
Error from console of firefox."Error: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=Maincontroller&p1=not%20a%20function%2C%20got%20undefined I/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:6:416 qb@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:22:131 Sa@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:22:218 Xe/this.$get<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:80:81 — Java_byte, Nov 21 '15 at 15:39

Michel · Answer 1 · 2015-11-21T15:34:35.783

3

Starting from angular 1.3 you can't declare controllers in the global scope.

Rewrite the declaration of your controller MainController

// Declaration of the module
angular.module('myApp', []);

// Declaration of the controller
angular.module('myApp').controller('MainController', function ($scope) {
    $scope.message = "Hii how are you";
});

Regarding to the above changes, replace <html ng-app=""> with <html ng-app="myApp">

edited Nov 21 '15 at 15:34

answered Nov 21 '15 at 15:31

Michel

26,600
6
64
69

1

Great ! i have posted the same below – Sajeetharan Nov 21 '15 at 15:33

score 1 · Answer 2 · answered Nov 21 '15 at 15:32

1

There are few problems with your code,

(i)You have not declared module anywhere. (ii) With Angular 1.3 you the controllers should not be declared globally.

Here is the corrected application

answered Nov 21 '15 at 15:32

Sajeetharan

216,225
63
350
396

score 0 · Answer 3 · edited May 23 '17 at 12:09

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <title>Angular Js Tutorial</title>
    <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  </head>
  <body >
    <div ng-controller="MainController as mainCtrl">
      {{ mainCtrl.message }}
    </div>
    <script>
      (function() {
        'use strict';
        angular
          .module('app', []);
          .controller('MainController', ['$scope', function MainController($scope) {
              $scope.message = "Hii how are you";
        }]);
      })();
    </script>
  </body>
</html>

Please refer this.

If you are using `MainController as mainCtrl`, don't use `$scope`. Use `this`. — georgeawg, Nov 21 '15 at 20:05

score -1 · Answer 4 · edited Aug 18 '16 at 06:49

<html>
<head>
<title>Angular JS Controller Example</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/
1.4.7/angular.min.js"></script>
</head>

<body>
<h2>AngularJS Sample Controller Application</h2>

<div ng-app = "ukApp" ng-controller = "ukController">
<br>         
{{name}}
</div>

<script>
var mainApp = angular.module("ukApp", []);
mainApp.controller('ukController', function($scope) { 
$scope.name= "Umar Farooque Khan";
});
</script>

</body>
</html>

Use the above code to do above task.

Data binding in Angular js

4 Answers4

Linked