2017-01-13 59 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的第二行中,替換爲此 <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

angular.module('MyApp',[])創建一個新模塊,因爲它包含依賴注入數組(作爲第二個參數)。

嘗試在代碼中將angular.module('MyApp',[])更改爲angular.module('MyApp')