CODEWITHSUNDEEP
angularjsangular-services
londondev
londondev

Reputation: 231

AngularJS : Using a service

I am quite new at Angular and having problem while trying to use service. Here are my code:

TodoApp.js:

'use strict'

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

And 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 }];
};
}])

And controller.js

  'use strict'

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

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

}
 ])

and 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>

And receive this error message:

Error: error:unpr Unknown Provider Unknown provider: dataServiceProvider <- dataService

Upvotes: 0

Views: 133

Answers (2)

sylwester
sylwester

Reputation: 16508

Just few spelling mistakes.

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>

Upvotes: 1

timsmiths
timsmiths

Reputation: 167

You've registered a service call "dataServie".

You're trying to inject a service call "dataService" into your controller but it doesn't exist, hence the error message.

Looks like a typo .service('dataServie' should be .service('dataService'

Upvotes: 0

Related Questions