0

I am an angular/ionic noob and need an ELI5 on how to use the service service and factory service. I am also terrible at interpreting the docs.

I have an array $scope.todos and would like a method to create a new todo. I am currently using this code here:

.factory('TodoItem', function () {
    return function TodoItem(title) { //more arguments may be added later
        this.title = title;
    }
})

and when I want to create a new TodoItem I will use this

new TodoItem("This is a thing to do");

Q1: Is this the 'correct' way to use the factory?

Now, on to the service. My code is broken (below) and I have no idea how to fix it, presumably because I do not understand the service at all. Q2: Would you be able to do an ELI5 on how this is supposed to work?

.service('addTodoItem', function () {
     function ($scope, todoItem) {
        if (!$scope.todos)
            $scope.todos = [todoItem];
        else 
            $scope.todos.push(todoItem);
    }
})

I (attempt to) use this code to add the new TodoItem to the array. 

 $addTodoItem($scope, new TodoItem('Hello'));

Edit: I have tried watching a YouTube tutorial and come up with this code here.

.factory('createTodoItem', function () {
    console.log("createTodoItem factory called")
    function TodoItem(title) {
        //Constructor
        this.title = title;
    }

    function createTodoItem (title) {
        var newItem = new TodoItem(title);
        return newItem;
    }
    return createTodoItem;
})

.provider('todoItems', function () {
     this.$get = function () {//the get method is called once
        console.log("todoItems get called")
        var todoItems = {
            items:[],
            add:function (todo) {
                console.log("todoItems add was called", this.items);
                todoItems.items.push(todo);
                console.log("todoItems now is:", todoItems.items)
            }
        };
        return todoItems;
     }
})

And I use this to add new TodoItems

todoItems.add(createTodoItem("This is a test todo"));
Dylanthepiguy
  • 1,621
  • 18
  • 47
  • Lots of things going wrong here. Suggest you go through some angular tutorials – charlietfl Feb 27 '16 at 23:39
  • I have tried watching a different YT tutorial and came up with some new code which is shown in the post. Would you be able to see how many things are wrong now? :P – Dylanthepiguy Feb 28 '16 at 00:50
  • You probably don't need a `provider` but factory is more sensible now. If you return an object can add more features to factory. – charlietfl Feb 28 '16 at 00:55
  • Thanks. Would you be able to explain further why I don't need that provder? – Dylanthepiguy Feb 28 '16 at 00:59
  • Usually create provider if you need it to be configurable within config phase of app. http://stackoverflow.com/questions/15666048/angularjs-service-vs-provider-vs-factory – charlietfl Feb 28 '16 at 01:01
  • Oh ok. And I can just save the object that the provider currently returns as $scope.todoItems as well? – Dylanthepiguy Feb 28 '16 at 01:05
  • Yes ...usually factory would include various methods for CRUD (Create,Read,Update,Delete) – charlietfl Feb 28 '16 at 01:18

1 Answers1

0

In angular services and factories are specific types of providers. As I understand it they are intended to reuse code in different controllers of your app, so you only need them if you are using a function in 2 or more different controllers. And after declaring them you need to inject them as a dependency of your controller.

You probably should just declare a function as a variable of your scope and then use it, for example:

$scope.addTodoItem = function (item) {
  $scope.todos.push(item);
};
xabitrigo
  • 1,341
  • 11
  • 24