Angular JS code not working

Question

I copied this angularjs code from a book "ng-book". But it is not working at all..........................................................

<!DOCTYPE html>
<html ng-app="">
<head>
    <title>Simple App</title>

</head>
<body>
    <div ng-controller="MyController">
        Hello <span ng-bind="clock"></span>
    </div>
    <script src="angular-1.5.7/angular.js">
    </script>
    <script type="text/javascript">
        function MyController($scope){
            $scope.clock = new Date();
            var updateClock = function () {
                $scope.clock = new Date();
            };
            setInterval(function() {
                $scope.$apply(updateClock);
            }, 1000);
            updateClock();
        };

    </script>

</body>
</html>

You are missing 2 lines to initialise the module!! see my answer with very minimal editing so you can relate to the code you already understand. stackoverflow.com/questions/38219821/… — Iceman
– Iceman, Commented Jul 6, 2016 at 9:14

Srijith · Accepted Answer · 2016-07-06 09:01:30Z

1

Use $interval rather and setInterval.
No need of $scope.$apply() when you use angular's $interval
You need the ng-app defined
The controller definition should be like in the snippet

Here is a working code snippet

var demoApp = angular.module('demoApp', []);
demoApp.controller('MyController', function($interval, $scope) {
  $scope.clock = new Date();
  var updateClock = function() {
    $scope.clock = new Date();
  };
  $interval(function() {
    updateClock();
  }, 1000);
  updateClock();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Simple App</title>

</head>

<body ng-app="demoApp">
  <div ng-controller="MyController">
    Hello <span ng-bind="clock"></span>
  </div>
</body>

answered Jul 6, 2016 at 9:01

Srijith

1,4449 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Iceman · Accepted Answer · 2016-07-06 09:12:52Z

What you are doing is not the most efficient way. For example you could use $interval and so on..

But since you are just starting with Angular, I've made the code working with minimal addition or modification so you can understand:

//addition-start
var app = angular.module('myApp', []);
app.controller("MyController", MyController);
//addition-end
function MyController($scope) {
  $scope.clock = new Date();
  var updateClock = function() {
    $scope.clock = new Date();
  };
  setInterval(function() {
    $scope.$apply(updateClock);
  }, 1000);
  updateClock();
};

<!DOCTYPE html>
<!--can be modified to ng-app="myApp"but will work otherwise too -->
<html ng-app="">

<head>
  <title>Simple App</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js "></script>
</head>

<body>
  <div ng-controller="MyController">
    Hello <span ng-bind="clock "></span>
  </div>
</body>

</html>

naresh vadlakonda · Accepted Answer · 2016-07-06 09:06:07Z

first read how to difine angular module and how it works.you didn't define module in html

<!DOCTYPE html>
    <html ng-app="testapp">
    <head>
        <title>Simple App</title>
    <script src="angular-1.5.7/angular.js"> </script>
    </head>
    <body>
     <script type="text/javascript">
     var app=angular.module('testapp',[]);
            app.controller('MyController',function($scope,$setInterval){
                $scope.clock = new Date();
                var updateClock = function () {
                    $scope.clock = new Date();
                };
                $setInterval(function() {
                    $scope.$apply(updateClock);
                }, 1000);
                updateClock();

          });

        </script>
        <div ng-controller="MyController">
            Hello <span ng-bind="clock"></span>
        </div>

    </body>
    </html>

Community · Accepted Answer · 2017-05-23 12:33:00Z

You forgot to define your module ng-app

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title>Simple App</title>
</head>
<body>
    <div ng-controller="MyController">
        Hello {{clock}}</span>
    </div>

    <script src="angular-1.5.7/angular.js"></script>
    <script type="text/javascript">
            var app = angular.module('demoApp',[]);
            function MyController($scope){
                $scope.clock = new Date();
                var updateClock = function () {
                    $scope.clock = new Date();
                };
                $interval(function() {
                    updateClock();
                }, 1000);
                updateClock();
            };

    </script>

</body>
</html>

Doc

Difference between set-interval and $interval

ng-bind has one-way data binding ($scope --> view). It has a shortcut {{ val }} which displays the scope value $scope.val inserted into html where val is a variable name.

Collectives™ on Stack Overflow

Angular JS code not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related