Angular JS-控制器未定义

我是AngularJS世界的新手。我有这个例子来定义AngularJS页面的控制器。当我试图打开页面时，我最终在浏览器中显示了原始文本。

我正在尝试将angular.js（lib/angular.js）下载到本地文件系统。

页面如下所示：

<!doctype html>
<html ng-app>
    <head>
        <script src="lib/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>
    </head>
    <body>
        <div ng-controller="MyController">
            <h1>Hello {{clock}}!</h1>
        </div>
    </body>
</html>

我最终得到的结果如下：

你好｛｛clock｝｝

在浏览器控制台中，我得到如下错误日志：

Error: [ng:areq] Argument 'MyController' is not a function, got undefined

我错过了什么？

谨致问候，Chandra。

您需要启动一个角度模块并使用该模块创建一个控制器。

例如：

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

然后你需要用ng-app="myApp"在html标记中指定应用程序

所以你的html将是：

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MyController">
            <h1>Hello {{clock}}!</h1>
        </div>
  </body>
</html>

工作Plunkr

相关内容

最新更新

热门标签：