Data binding in Angular js

0
votes

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}}
4
javascripthtmlangularjs
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
Error from console of firefox."Error: [ng:areq] errors.angularjs.org/1.4.7/ng/… I/<@ajax.googleapis.com/ajax/libs/angularjs/1.4.7/… qb@ajax.googleapis.com/ajax/libs/angularjs/1.4.7/… Sa@ajax.googleapis.com/ajax/libs/angularjs/1.4.7/… Xe/this.$get</<@ajax.googleapis.com/ajax/libs/angularjs/1.4.7/… – Java_byte

4 Answers

3
votes

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">

1
votes

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

0
votes
<!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.

-1
votes
<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.