search

Home  >  Q&A  >  body text

angular.js - A very simple entry-level demo of angularjs, but an error was reported.

I am new to angularjs and I am reading a book called "angularjs authoritative tutorial". There is a demo in the second chapter, as follows.

Angular version 1.2.29 is used here. If it is changed to 1.3.1, an error will be reported.

Excuse me, how did this happen? How should I debug this error? 

<!doctype html> 
<html ng-app> 
<head> 
    <meta charset="utf-8"> 
    <title>Simple App</title> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.29/angular.min.js"></script>
</head>
<body>
    <p ng-controller="MyController">
        <h1>Hello {{clock}}</h1>
    </p>
    
    <script type="text/javascript">
        function MyController($scope, $timeout) {
            $scope.clock = new Date();
            var updateClock = function() {
              $scope.clock = new Date();
            };
            setInterval(function() {
              $scope.$apply(updateClock);
            }, 1000);
            updateClock();
      };
    </script>
</body>
</html>
PHP中文网PHP中文网2822 days ago523

reply all(2)I'll reply

  • 迷茫

    迷茫2017-05-15 16:58:52

    After version 1.3, controllers are no longer found on the window object $controller will no longer look for controllers on window.

    https://github.com/angular/angular.js/blob/master/CHANGELOG.md#breaking-changes-31

    <!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <p ng-controller="MyController">
        <h1>Hello {{clock}}</h1>
    </p>
    
    <script type="text/javascript">
     (function(){
        angular.module("app", []).controller("MyController", MyController);
      
         
        MyController.$inject = ['$scope', '$timeout'];
       
        function MyController($scope, $timeout) {
            $scope.clock = new Date();
            var updateClock = function() {
              $scope.clock = new Date();
            };
            setInterval(function() {
              $scope.$apply(updateClock);
            }, 1000);
            updateClock();
       }
     })();
    </script>
</body>
</html>

    The JS Bin
    http://jsbin.com/vekixa/edit?html,console,output

    If you cannot circumvent the wall, please change the CDN inside the wall

    reply
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-15 16:58:52

    It is recommended that the poster follow up to version 1.4 (version is really important)

    <!doctype html> 
<html ng-app> 
<head> 
    <meta charset="utf-8"> 
    <title>Simple App</title> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
</head>
<body>
    <p ng-controller="MyController">
        <h1>Hello {{clock}}</h1>
    </p>
    
    <script type="text/javascript">
        function MyController($scope, $timeout) {
            $scope.clock = new Date();
            var updateClock = function() {
              $scope.clock = new Date();
            };
            setInterval(function() {
              updateClock();
            }, 1000);
      };
    </script>
</body>
</html>

    Just like this. . Of course you can also write 

    <!doctype html> 
<html ng-app> 
<head> 
    <meta charset="utf-8"> 
    <title>Simple App</title> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
</head>
<body>
    <p ng-controller="MyController">
        <h1>Hello {{updateClock()}}</h1>
    </p>
    
    <script type="text/javascript">
        function MyController($scope, $timeout) {
            $scope.updateClock = function() {
             return new Date();
            };
            setInterval(function() {
              updateClock();
            }, 1000);
      };
    </script>
</body>
</html>

    reply
    0
  • Cancelreply