Verstehen Sie nicht die Controller in Angular JS

Question

Dies ist eine Frage, die ich nicht gewohnt bin zu fragen, aber ich fühle mich wie dies der einzige Weg ist, zu verstehen, womit ich kämpfe. Wie unten gezeigt, gibt es zwei Funktionen app.controller() und app.factory(), für mich scheinen beide gleich zu sein, obwohl wenn ich einen Teil lösche, die Funktion nicht ihre beabsichtigte Aufgabe erfüllt.

Link zu Plunker: click here (Relevante Datei ist script.js)

Was ist der Unterschied zwischen diesen beiden Funktionen, warum kann habe ich nur einer von ihnen? Ich weiß, dass es eine einfache Erklärung geben muss.

app.controller('MainCtrl', ['$scope', 'ItemsService', function ($scope, ItemsService) { 
    $scope.newItem = { PlateNumber: '', Description: '', Price: 0 }; 
    $scope.currentItem = null; 

    $scope.items = ItemsService.getItems(); 

    $scope.addItem = function() { 
     ItemsService.addItem(angular.copy($scope.newItem)); 
     $scope.newItem = { PlateNumber: '', Description: '', Price: 0 }; 
    }; 

    $scope.updateItem = function (id) { 
     ItemsService.updateItem(id); 
    }; 

    $scope.removeItem = function (id) { 
     ItemsService.removeItem(id); 
    }; 
}]); 

vs

app.factory('ItemsService', ['$firebase', 'FIREBASE_URI', function ($firebase, FIREBASE_URI) { 
    var ref = new Firebase(FIREBASE_URI); 
    var items = $firebase(ref); 

    var getItems = function() { 
     return items; 
    }; 

    var addItem = function (item) { 
     items.$add(item); 
    }; 

    var updateItem = function (id) { 
     items.$save(id); 
    }; 

    var removeItem = function (id) { 
     items.$remove(id); 
    }; 

    return { 
     getItems: getItems, 
     addItem: addItem, 
     updateItem: updateItem, 
     removeItem: removeItem 
    } 
}]); 

Answer 1

Controller sind nur dann, wenn man einen braucht instanziiert, (Sie ng-controller oder controllerAs verwenden). Jedes Mal, wenn Sie zu einer anderen Route oder Seite wechseln, instanziiert Angular einen Controller (es kann derselbe sein, der aufgeräumt wurde, zum Beispiel wenn Sie die Seite aktualisieren.)

Angular Provider, von denen es ein paar hauptsächlich gibt Arten - Factory ist einer von ihnen, sind eine Möglichkeit, Daten für die Lebensdauer der App herum zu halten oder sogar Daten zwischen verschiedenen Controllern zu übertragen. Der Umfang Ihrer Frage ist eher wie: Provider vs Controller, nicht Factory (das ist ein Typ) vs Controller.

In Ihrem obigen Beispiel haben Sie einen Controller, was ist, wenn Sie viele haben? Wie können Sie Daten- oder Utility-Funktionen an viele Controller weitergeben, ohne denselben Code immer wieder neu schreiben zu müssen? Mit Anbietern für einen!

Hier sind einige gute Links für Sie heraus zu überprüfen:

Angular Provider Docs

Blog post by Tyler McGinnis explaining the above further

JSFiddle with Example of a Factory vs a Service