2017-01-13 10 views
1

私は角を学び、このスクリプト例の作業をしようとしています。Angularjsコントローラが登録されていません

app.js:

var myApp = angular.module("myApp", []); 
 

 
(function (app) { 
 
    app.controller("TodoListController", function() { 
 
     var todoList = this; 
 

 
     todoList.todos = [ 
 
      { text: "learn angular", done: true }, 
 
      { text: "build an angular app", done: false }]; 
 

 
     todoList.addTodo = function() { 
 
      todoList.todos.push({ text: todoList.todoText, done: false }); 
 
      todoList.todoText = ""; 
 
     }; 
 

 
     todoList.remaining = function() { 
 
      var count = 0; 
 

 
      angular.forEach(todoList.todos, function (todo) { 
 
       count += todo.done ? 0 : 1; 
 
      }); 
 

 
      return count; 
 
     }; 
 

 
     todoList.archive = function() { 
 
      var oldTodos = todoList.todos; 
 
      todoList.todos = []; 
 

 
      angular.forEach(oldTodos, function (todo) { 
 
       if (!todo.done) { 
 
        todoList.todos.push(todo); 
 
       } 
 
      }); 
 
     }; 
 
    }); 
 
})(myApp);

Index.cshtml:

<!DOCTYPE html> 
<html ng-app> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title></title> 

    <link href="content/Site.css" rel="stylesheet" type="text/css" /> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
    <script src="scripts/app.js"></script> 
</head> 
<body> 
    <h2>Todo</h2> 
    <div ng-controller="TodoListController as todoList"> 
     <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> 
     [ <a href="" ng-click="todoList.archive()">archive</a> ] 

     <ul class="unstyled"> 
      <li ng-repeat="todo in todoList.todos"> 
       <label class="checkbox"> 
        <input type="checkbox" ng-model="todo.done" /> 
        <span class="done-{{todo.done}}">{{todo.text}}</span> 
       </label> 
      </li> 
     </ul> 

     <form ng-submit="todoList.addTodo()"> 
      <input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here" /> 
      <input class="btn-primary" type="submit" value="add" /> 
     </form> 
    </div> 
</body> 
</html> 

残念ながら、次のエラーが発生します。「名 'TodoListController' はコントローラが登録されていません。 "

大変助かります。

+2

htmlタグを –

+0

に変更してくださいありがとうございました! – tenitolkay

答えて

1

あなたのhtmlに "myApp"モジュールを登録する必要があります。 htmlの2行目に、これと置き換えて <html ng-app="myApp">

0

これを試すことができます。

var myApp = angular.module("myApp", []); 

(function() { 
    "use strict"; 
    angular.module("myApp").controller("TodoListController", ["$scope", TodoListController]); 

function TodoListController(){ 
} 
})(); 

<html ng-app="myApp"></html> 
0

は、(第2パラメータとして)依存関係注入配列を含むため、新しいモジュールを作成します。

angular.module('MyApp',[])angular.module('MyApp')に変更してください。

関連する問題