Skip to content Skip to sidebar Skip to footer

Data Binding In Angular Js

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

Solution 1:

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


Solution 2:

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


Solution 3:

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


Solution 4:

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


Post a Comment for "Data Binding In Angular Js"