AngularJS - verschiedene Möglichkeiten zum Erstellen von Controllern und Diensten, warum?

Question

Ich sehe immer wieder verschiedene Beispiele für die Erstellung von Controllern und Diensten in AngularJS und ich bin verwirrt, kann mir jemand die Unterschiede zwischen den beiden Ansätzen erklären?

app.service('reverseService', function() { 
    this.reverse = function(name) { 
     return name.split("").reverse().join(""); 
    }; 
}); 

app.factory('reverseService', function() { 
    return { 
     reverse : function(name) { 
      return name.split("").reverse().join(""); 
     } 
    } 
}); 

Und auch ein Controller Beispiel:

function ExampleCtrl($scope) { 
    $scope.data = "some data"; 
} 

app.controller("ExampleCtrl", function($scope) { 
    $scope.data = "some data"; 
} 

Answer 1

Die erste wird verschmutzen die global namespace, das nicht das, was Sie auf lange Sicht wollen.

function ExampleCtrl($scope){ 
    $scope.data = "some data"; 
} 

Der zweite Bereich umfasst den Controller für diese Modulinstanz. Es macht es auch injectable. Noch besser ist die Array-Notation (wie unten), da diese die Minimierung überlebt.

app.controller("ExampleCtrl", ['$scope', function($scope){ 
    $scope.data = "some data"; 
}]); 

Der Unterschied zwischen einem (eckigen) Service und einer Fabrik scheint ziemlich klein zu sein. Ein Service wickelt eine Factory ab, die $injector.instantiate verwendet, um den Dienst zu initialisieren.

Answer 2

Meine bevorzugte Art und Weise Controller und Richtlinien zu schaffen, ist wie folgt:

/** 
* SomeCoolModule.controller.js 
*/ 

(function(){ 
'use strict'; 

    angular.module('app.modals.SomeCoolModule').controller('SomeCoolModuleController', SomeCoolModuleController); 

    AddFlowCurveModalController.$inject = 
     [ 
      '$scope', 
      '$filter', 
      '$log', 
     ]; 

    function SomeCoolModuleController($scope, $filter, $log) { 
     /* controller body goes here */ 
    } 
})(); 

PS: keine globale Namespace Verschmutzung stattfindet oben aufgrund IIFE.