''错误：$ 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具有此名称的控制器未注册

回答

相关问题