Angular JS - 控制器未定義

我是AngularJS世界的新手。我有這個例子來爲AngularJS頁面定義一個控制器。試圖打開頁面時，我最終在瀏覽器中顯示原始文本。Angular JS - 控制器未定義

我正在嘗試將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>

我最終得到如下結果：

您好{{時鐘}}！

在瀏覽器控制檯，我得到了錯誤日誌如下：

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

我缺少什麼？

最好的問候，錢德拉。

來源

2015-02-11 Mouli

控制器需要使用'angular.module（「myApp」，[]）顯式註冊。 r（「MyController」，MyController）'從Angular 1.3開始我想。此外，您應該使用'$ interval'來避免執行'$ scope。$ apply'，並且您應該取消間隔，否則即使關閉站點後它也會繼續。 – 2015-02-11 08:23:38

我使用的示例是使用較低版本），但我已經使用了AngularJS的更高版本（1.3）。我糾正了它，並執行了接受答案中給出的代碼。現在一切正常。 – Mouli 2015-02-11 09:33:49

您需要啓動一個角度模塊並使用該模塊創建一個控制器。

例如：

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-應用= 「對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="[email protected]" 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>

Working Plunkr

來源

2015-02-11 08:23:43 V31

謝謝@ V31，這個問題解決了。我正在使用下載的angular.js到文件系統而不是使用CDN。再次感謝你。 – Mouli 2015-02-11 09:26:18

Angular JS - 控制器未定義

回答

相關問題