Angular definiert einen Controller

Question

Ich begann vor 2 Tagen mit Angular.js zu arbeiten, und ich lerne wirklich langsam, so dass ich das Wissen darüber, wie es wirklich gut funktioniert, und nicht nur ein allgemeines Konzept über Angular, bekommen kann t so so unhöflich zu mir, wenn die Frage ist Neuling :)

Grundsätzlich bin ich im Web (Tutorials, Bücher, Videos) zu reisen, Angular lernen, und begann mit Code Academy heute, so dass ich mich an die grundlegenden Konzepte erinnern kann . Die Sache ist, dass wenn ich angefangen habe zu lernen, wie man den Controller definiert, hat es mich verwirrt.

dies ist, wie der Controller auf dem Code Academy

app.controller('MainController',['$scope',function($scope){ 
    $scope.title='to your own string'; 
    $scope.promo='new promo here' 
}]); 

die in einem Buch definiert Controller definiert ist, die ich gelesen

app.controller('FirstController', function($scope) { 
    $scope.counter = 0; 
    $scope.add = function(amount) { $scope.counter += amount; }; 
    $scope.subtract = function(amount) { $scope.counter -= amount; }; 
}); 

ich nicht den Unterschied zwischen diesen verstehen können . Kann mir das jemand erklären? Oder ist es nur Code aus verschiedenen Versionen von eckigen und der zweite Code ist richtig?

Answer 1

Beide tun das Gleiche, aber es gibt einen entscheidenden Unterschied, dass Sie zur Kenntnis genommen.

Der Unterschied ist, dass das erste Beispiel ein Array von Werten definiert, wenn app.controller aufgerufen wird. Warum übergeben Sie die $scope als String-Wert?

Minifizierung

Was passiert, wenn Sie eine Anwendung erstellen, die so effizient wie möglich sein muss, damit die Benutzer müssen keine zusätzliche Millisekunden warten, bis es zum Download bereit. Du wirst es verkleinern wollen.

Verkleinerung ist ein Prozess, bei dem der Javascript-Code so klein wie möglich gemacht wird.Es ist möglich, dass 500k Javascript auf vielleicht 50k oder 100k reduziert werden. Dies geschieht, indem überflüssige Informationen, Kommentare, Leerzeichen usw. entfernt werden.

Aber in diesem speziellen Fall wird die Minification normalerweise auch die Namen von Parametern auf etwas kleiner ändern.

Zum Beispiel minification könnte dies ändern:

Test("This is a test."); 

function Test(myLongParameterNameHere) { 
    console.log(myLongParameterNameHere.length) 
} 

dazu:

a("This is a test"); 

function a(b) { 
    console.log(b.length); 
} 

Sehen Sie, wie viel kleiner das ist?

Angular analysiert jedoch die genauen Namen der Parameter. Wenn der Parameter "$ scope" angezeigt wird, weiß er, wie diesem Parameter die richtigen $ scope-Informationen hinzugefügt werden. Wenn ein Minifier das zu etwas anderem ändert, ist Angular verwirrt.

So können Sie Angular geben einen Hinweis durch ein Array von Strings in der gleichen Reihenfolge wie der Parameterliste die Angabe, wie folgt aus:

app.controller('MainController',['$scope', '$timeout', '$rootScope', function($scope, $timeout, $rootScope) { 
    $scope.title ='to your own string'; 
    $timeout(function() { console.log("Timout fired") }, 500); 
    $rootScope.test = "Hello World"; 
}]); 

Nach minification, diese Controller-Code wie folgt aussehen könnte:

app.controller('MainController',['$scope', '$timeout', '$rootScope', function(a, b, c) { 
    a.title ='to your own string'; 
    b(function() { console.log("Timout fired") }, 500); 
    c.test = "Hello World"; 
}]); 

Minifier ändern den Namen der Strings nicht.

Sie haben Angular gesagt, welcher Parameter zu seinem spezifischen Angular-Gegenstück gehört. Selbst nach der Verkleinerung hat Angular die Informationen, die es benötigt, um seine Abhängigkeitsinjektion durchzuführen.

TL; DR

die Parameternamen als Zeichenfolgen in einem Array hinzuzufügen ist völlig optional, aber es ist notwendig, wenn Sie irgendeine minification auf Ihrem Javascript zu tun planen.

Answer 2

Sie arbeiten beide und machen das gleiche. Die erste ist etwas ausführlicher, da sie die Abhängigkeiten im Array zeigt, bevor sie als Parameter in der Funktion aufgelistet werden. Nach den Standards von Google wird Ersteres bevorzugt.

Answer 3

Der Unterschied ist, dass wenn Sie Javascript-Datei minimiert haben, zweite möglicherweise nicht funktioniert. Deshalb ist der erste Ansatz bevorzugt.

Stellen Sie sich vor, Sie hätten eine Datei verkleinert.

Erster Ansatz:

app.controller('MainController', ['$scope',function(a){ 

Zweiter Ansatz:

app.controller('MainController', function(a){ 

Wie würde es wissen, was ist ein 'a' nach minification? Im ersten Ansatz weiß das, weil Sie eine Zeichenfolge '$ scope' übergeben, also weiß es, dass 'a' ein $ scope ist.

Answer 4

Der erste Weg ist der bevorzugte Weg, dies zu tun. Dies liegt daran, dass die $scope-Variable (wie auch alle anderen Abhängigkeiten) ihre Bedeutung verliert, wenn Sie es auf die zweite Weise tun und sie dann minimieren. Wenn also die Abhängigkeiten als ein Array (der erste Weg) gesetzt werden, kann der Code korrekt funktionieren, wenn er minimiert wird.

Blick auf diese Antwort für weitere Informationen: Angularjs minify best practice