Nicht in der Lage, die Controller-Funktionalität in Angular JS zu verstehen

Question

Ich bin neu in Angular JS.Ich versuche, etwas tiefgründiges Wissen in es durch das Verständnis der Controller-Funktionalität zu gewinnen.

Ich stieß auf die folgenden Code-Schnipsel.

var App = angular.module('clientApp', ['ngResource', 'App.filters']); 
App.controller('ClientCtrl', ['$scope',function ($scope) { 

    }]); 

Welche signifikanten Unterschied macht es, wenn ich schreibe machen:

var App = angular.module('clientApp', ['ngResource', 'App.filters']); 
App.controller('ClientCtrl', function ($scope) { 

    }); 

Mein Verständnis: Ich verstehe, dass in den eckigen Klammern etwas Abhängigkeit für das jeweilige Modul oder controller.However, ich couldnot verstehen, den Grund für das Schreiben

  "['$scope',function($scope)" 

statt

App.controller(controllername,function($scope){ 

    }); 

Jede Hilfe wird sehr geschätzt!

Answer 1

Ermöglicht die Verkleinerung des AngularJS-Codes. AngularJS verwendet Parameternamen, um die Werte in Ihre Controller-Funktion zu injizieren. Im JavaScript-Minification-Prozess werden diese Parameter in kürzere Strings umbenannt. Indem AngularJS angibt, welche Parameter in die Funktion mit einem String-Array eingegeben werden, kann AngularJS immer noch die richtigen Werte injizieren, wenn die Parameter umbenannt werden.

Answer 2

Es sollte eigentlich wie dies nach dem John Papa Style Guide geschrieben werden:

Zuerst wir erstellen und benennen eine module namens ‚app‘. Wir erstellen auch eine controller namens "SomeController".

angular 
    .module('app') 
    .controller('SomeController', SomeController); 

Jetzt injizieren wir die Abhängigkeiten benötigen wir in den Controller

SomeController.$inject = ['dataservice', 'logger']; 

Jetzt schaffen wir die corresposnding Funktion für die Steuerung. Beachten Sie, wie die Abhängigkeiten enthalten sind?

function SomeController(dataservice, logger) { 
    var vm = this; 
    vm.avengers = []; 

    activate(); 

    function activate() { 
     return getAvengers().then(function() { 
      logger.info('Activated Avengers View'); 
     }); 
    } 

    function getAvengers() { 
     return dataservice.getAvengers() 
      .then(function(data) { 
       vm.avengers = data; 
       return vm.avengers; 
      }); 
    } 
}