''エラー：$ controller：ctrlregこの名前のコントローラは登録されていません

Safaribooks とレッスン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">

第2に、ファイルがブラウザで解析されたときに実行される関数を追加し、そのコード内にコードを追加します。コードは次のようになります。

<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この名前のコントローラは登録されていません

答えて

関連する問題