AngularJS：使用服务

我是Angular的新手，在尝试使用服务时遇到问题。这里是我的代码：AngularJS：使用服务

TodoApp.js：

'use strict' 

var todoApp=angular.module('todoApp',['ngRoute']);

而且service.js

'use strict' 

    todoApp.service('dataServie', [function() { 
this.getTodoData = function() { 
    return [{ 'task': 'shopping', 'due': 1288323623006, 'done': true }, 
    { 'task': 'homework', 'due': 1288323623006, 'done': false }, 
    { 'task': 'cleaning', 'due': 1288323623006, 'done': false }]; 
}; 
}])

而且controller.js

'use strict' 

    todoApp.controller('todoController', ['$scope','dataService', 
function ($scope,dataService) { 
    $scope.todoList = dataService.getTodoData(); 

    $scope.makeDone = function (todo) { 
     todo.done = true; 
    }; 

} 
])

和index.html

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Hello</title> 
    <script type="text/javascript" src="Scripts/angular.min.js"></script> 
    <script type="text/javascript" src="Scripts/angular-route.js"></script> 
    <script type="text/javascript" src="Scripts/app/TodoApp.js"></script> 
    <script type="text/javascript" src="Scripts/app/service.js"></script> 
    <script type="text/javascript" src="Scripts/app/Controller.js"></script> 
</head> 

<body ng-app="todoApp"> 
    <h1>hello!</h1> 
    <div ng-controller="todoController"> 
     <ul ng-repeat="todo in todoList"> 
      <li><span>{{todo.task}}</span> 
       <span>{{todo.due | date:'mediumTime'}}</span> 
       <input ng-model="todo.done" type="checkbox" ng-cheked="todo.done"/> 
       <span>{{todo.done}}</span> 
      </li> 
     </ul> 

    </div> 
</body> 

</html>

而且收到此错误信息：

错误：错误：unpr 未知提供商未知提供商：dataServiceProvider < - DataService的

来源

2014-09-25 londondev

看来你有拼写错误在你的服务上，可以这样吗？'todoApp.service（'dataServie'，' – 2014-09-25 11:06:15

是的，谢谢Joao。 – londondev 2014-09-25 15:23:45

只是几个拼写错误。

var todoApp = angular.module('todoApp', ['ngRoute']); 
 

 
todoApp.service('dataService', [ 
 
    function() { 
 
    this.getTodoData = function() { 
 
     return [{ 
 
     'task': 'shopping', 
 
     'due': 1288323623006, 
 
     'done': true 
 
     }, { 
 
     'task': 'homework', 
 
     'due': 1288323623006, 
 
     'done': false 
 
     }, { 
 
     'task': 'cleaning', 
 
     'due': 1288323623006, 
 
     'done': false 
 
     }]; 
 
    }; 
 
    } 
 
]) 
 

 
todoApp.controller('todoController', ['$scope', 'dataService', 
 
    function($scope, dataService) { 
 
    $scope.todoList = dataService.getTodoData(); 
 

 
    $scope.makeDone = function(todo) { 
 
     todo.done = true; 
 
    }; 
 

 
    } 
 
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script> 
 

 
<body ng-app="todoApp"> 
 
    <h1>hello!</h1> 
 
    <div ng-controller="todoController"> 
 
    <ul ng-repeat="todo in todoList"> 
 
     <li><span>{{todo.task}}</span> 
 
     <span>{{todo.due | date:'mediumTime'}}</span> 
 
     <input ng-model="todo.done" type="checkbox" ng-cheked="todo.done" /> 
 
     <span>{{todo.done}}</span> 
 
     </li> 
 
    </ul> 
 

 
    </div> 
 
</body>

来源

2014-09-25 11:12:17 sylwester

您已经注册的服务呼叫 “dataServie”。

您试图将一个服务调用“dataService”注入到您的控制器中，但它不存在，因此出现错误消息。

看起来像一个错字。服务（ 'dataServie' 应该是。服务（ 'DataService的'

来源

2014-09-25 11:05:47 timsmiths

AngularJS：使用服务

回答

相关问题