未注冊具有特定名稱的 Angular 控制器

Question

我正在 AngularJS 1 中嘗試新領域，

我試圖按照 Dan Wahlin 的視頻教程“ 60 分鍾內的 AngularJS 基礎知識”，一切都很好，但我不知道問題出在哪里，當我在 Chrome 中檢查我的控制台時，通知錯誤顯示如果“控制器與名稱“SimpleController”未注冊”

這是我的代碼：

<html ng-app="testAppApp">
<head>
...........
...........
</head>
<body>
<div ng-controller="SimpleController">
Search <input type="text" ng-model="name" />

<ul>
<li ng-repeat="cust in customers | filter:name | orderBy:'Name'">   
{{cust.Name}} - {{cust.City}} - {{cust.Age}}</li>
</ul> 

</div> 
<script src="bower_components/angular/angular.js"></script>

這里我的控制器低於角度腳本

<script>
var testAppApp = angular.module('testAppApp', []);

testAppApp.controller('SimpleController', function ($scope) {
        $scope.customers = [ 
                {Name: 'Tatiana', City: 'Troy Village', Age: '23'},
                {Name: 'Drew', City: 'Enor City', Age: '28'},
                {Name: 'Barry', City: 'Ville', Age: '27'}
                ];
        });
</script>
</body>
</html>

我使用最新的 angularJS 1.x (1.6.2)，並且感覺我已經正確地遵循了教程。 但我不知道為什么我的腳本錯誤。

Answer 1

設置您的控制器路徑，如；

<script src="js/controller/SimpleController.js" type="text/javascript"></script>

Answer 2

這是因為您在加載之前使用了angular 。 在head部分加載angular.min.js

嘗試這個

 <!DOCTYPE html> <html ng-app="testAppApp"> <head> <title></title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> <script type="text/javascript"> var testAppApp = angular.module('testAppApp', []); testAppApp.controller('SimpleController', function ($scope) { $scope.customers = [ { Name: 'Tatiana', City: 'Troy Village', Age: '23' }, { Name: 'Drew', City: 'Enor City', Age: '28' }, { Name: 'Barry', City: 'Ville', Age: '27' } ]; }); </script> </head> <body> <div ng-controller="SimpleController"> Search <input type="text" ng-model="name" /> <ul> <li ng-repeat="cust in customers | filter:name | orderBy:'Name'"> {{cust.Name}} - {{cust.City}} - {{cust.Age}}</li> </ul> </div> </body> </html>

Answer 3

您的代碼在這里是正確的，是使用 angualr 1.4.8的Jsfiddle 鏈接

HTML

  <div ng-app='testAppApp'>

  <div ng-controller="SimpleController">
    Search
    <input type="text" ng-model="name" />

    <ul>
      <li ng-repeat="cust in customers | filter:name | orderBy:'Name'">
        {{cust.Name}} - {{cust.City}} - {{cust.Age}}</li>
    </ul>

  </div>
  </div>

JS

  var testAppApp = angular.module('testAppApp', []);
  testAppApp.controller('SimpleController', function ($scope) {
          $scope.customers = [ 
                  {Name: 'Tatiana', City: 'Troy Village', Age: '23'},
                  {Name: 'Drew', City: 'Enor City', Age: '28'},
                  {Name: 'Barry', City: 'Ville', Age: '27'}
                  ];
          });

希望能幫到你

Answer 4

在 head 部分添加以下代碼並確保您的互聯網工作正常。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

或包含完整路徑的 angular.js 喜歡

<script src="Content/js/bower_components/angular/angular.js"></script>

未注冊具有特定名稱的 Angular 控制器

問題描述

4 個解決方案

解決方案1
1 已采納 2017-03-14 12:21:35

解決方案2
1 2017-03-14 12:22:10

解決方案3
0 2017-03-14 12:21:46

解決方案4
0 2017-03-14 12:24:06

未注冊具有特定名稱的 Angular 控制器

問題描述

4 個解決方案

解決方案1 1 已采納 2017-03-14 12:21:35

解決方案2 1 2017-03-14 12:22:10

解決方案3 0 2017-03-14 12:21:46

解決方案4 0 2017-03-14 12:24:06

解決方案1
1 已采納 2017-03-14 12:21:35

解決方案2
1 2017-03-14 12:22:10

解決方案3
0 2017-03-14 12:21:46

解決方案4
0 2017-03-14 12:24:06