''錯誤：$ controller：ctrlreg具有此名稱的控制器未註冊

我在safariibooks 和第3.1課上關注AngularJS上的視頻教程，即使我具有與視頻中相同的代碼，但我得到了指定的錯誤在標題中。

這裏是我的代碼：

<html ng-app> 
<head> 
<link rel="stylesheet" href="css/app.css"> 
<link rel="stylesheet" href="css/bootstrap.css"> 
<script type="text/javascript" src="angular.min.js"></script> 
<script type="text/javascript" src="bootstrap.min.js"></script> 
<title></title> 
</head> 
<body style="padding: 50px"> 
<div ng-controller = "AlbumListController"> 
<p><input placeholder="Type to search..." type ="text" ng-model="searchFor" size="30"/></p> 
<p> 
There are {{ albums.length}} albums available to view: 
</p> 
<div class="album panel panel-primary" ng-repeat="album in albums | filter:{ title: searchFor} | orderBy: 'date'"> 
    <!-- --> 
    <div class="panel-heading"> 
     <div style="float: right"> {{album.date}}</div> 
     {{ album.title }} 
    </div> 
     <div class= "description"> 
      {{ album.description}} 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
function AlbumListController ($scope) { 
    $scope.albums = [ { name: 'madrid1309', title:'Weekend in Madrid', date: '2013-09-01', description: 'FUN FUN FUN FUN'}, 
{ name: 'iceland1404', title:'Holiday in Iceland', date: '2014-09-01', description: 'FUN FUN FUN'}, 
{ name: 'thailand210', title:'Sun and fun in Thailand', date: '2012-09-01', description: 'FUN FUN'}, 
{ name: 'australia', title:'A wedding in Melbourne', date: '2011-09-01', description: 'FUN'}]; 
} 
</script> 
</body> 
</html>

The code from video - 它應該是相同的我，我們有相同的設置，因爲我也跟着一步從開始步驟，到目前爲止還沒有問題。

Desired output

我注意到有之前本網站對這個問題的答案，但他們並沒有回答我的問題。

預先感謝您。

來源

2017-02-24 ire

如果這是他們如何創建一個控制器，該教程是完全過時的。這將適用於角度1.0。但是現在我們已經達到了1.6，並且5年來發生了很多變化。使用官方文檔。不是一些過時的YouTube教程。 –

我修復了您的代碼。我也爲你留言。

首先，定義頂級角度應用程序的名稱。

<html ng-app="MyApp">

其次，添加一個函數，在瀏覽器中解析文件並在該代碼中添加代碼時將執行該函數。所以這裏是代碼的樣子。

<html ng-app="MyApp"> 

<head> 
    <link rel="stylesheet" href="css/app.css"> 
    <link rel="stylesheet" href="css/bootstrap.css"> 
    <script type="text/javascript" src="angular.min.js"></script> 
    <script type="text/javascript" src="bootstrap.min.js"></script> 
    <title></title> 
</head> 

<body style="padding: 50px"> 
    <div ng-controller="AlbumListController"> 
     <p> 
      <input placeholder="Type to search..." type="text" ng-model="searchFor" size="30" /> 
     </p> 
     <p> 
     There are {{albums.length}} albums available to view: 
     </p> 
     <div class="album panel panel-primary" ng-repeat="album in albums | filter:{ title: searchFor} | orderBy: 'date'"> 
     <!-- --> 
      <div class="panel-heading"> 
      <div style="float: right"> {{album.date}}</div> 
      {{album.title}} 
      </div> 
      <div class="description"> 
      {{album.description}} 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 

    /* Note that this function is gonna be called right after 
    definition so everything here gets to be executed */ 
    (function() { 
     /* First create the Angular App using the name defined at ng-app */ 
     var myApp = angular.module('MyApp', []) 

     /* Define the controller */ 
     var AlbumListController = function($scope) { 
      $scope.albums = [{ 
       name: 'madrid1309', 
       title: 'Weekend in Madrid', 
       date: '2013-09-01', 
       description: 'FUN FUN FUN FUN' 
      }, { 
       name: 'iceland1404', 
       title: 'Holiday in Iceland', 
       date: '2014-09-01', 
       description: 'FUN FUN FUN' 
      }, { 
       name: 'thailand210', 
       title: 'Sun and fun in Thailand', 
       date: '2012-09-01', 
       description: 'FUN FUN' 
      }, { 
       name: 'australia', 
       title: 'A wedding in Melbourne', 
       date: '2011-09-01', 
       description: 'FUN' 
      }]; 
     } 

     /* A good advice using AngularJs is that don't just rely on the 
     name of the parameter but rather use the $inject element to 
     specify which modules should be injected. Otherwise you when 
     minifying the javascript code the name of the parameters would 
     change and your code will break. */ 
     AlbumListController.$inject = ['$scope'] 

     /* finally register the controller */ 
     myApp.controller('AlbumListController', AlbumListController) 
    })(); 
    </script> 
</body> 

</html>

來源

2017-02-24 09:22:22

非常感謝！ – ire

要回答你的問題，這種創建控制器的方式已經過時。你可以進行以下修改，讓您的代碼工作：

變化<html ng-app> - ><html ng-app="app">
更改您的<script>標籤的內容如下：

angular.module('app', []) 
 
    .controller('AlbumListController', function($scope) { 
 
    $scope.albums = [{ 
 
     name: 'madrid1309', 
 
     title: 'Weekend in Madrid', 
 
     date: '2013-09-01', 
 
     description: 'FUN FUN FUN FUN' 
 
     }, 
 
     { 
 
     name: 'iceland1404', 
 
     title: 'Holiday in Iceland', 
 
     date: '2014-09-01', 
 
     description: 'FUN FUN FUN' 
 
     }, 
 
     { 
 
     name: 'thailand210', 
 
     title: 'Sun and fun in Thailand', 
 
     date: '2012-09-01', 
 
     description: 'FUN FUN' 
 
     }, 
 
     { 
 
     name: 'australia', 
 
     title: 'A wedding in Melbourne', 
 
     date: '2011-09-01', 
 
     description: 'FUN' 
 
     } 
 
    ]; 
 
    })

來源

2017-02-24 08:57:19 Fissio

是的，就是這樣。使用Fissio的答案代碼或獲取1.2 angularjs文件修復它。 – ire

''錯誤：$ controller：ctrlreg具有此名稱的控制器未註冊

回答

相關問題