Ist es in Ordnung, $ scope.functionName zu verwenden oder sollte ich var functionName = function() verwenden?

Question

Ich habe auf einer Angular App gearbeitet und in meinem Controller Ich habe meine Funktionen ab $ Umfang wurde mit erstellen:

$scope.getJobs = function(){ 
//code here 
}; 

Soll ich

var getJobs = function(){ 
// code here 
}; 

stattdessen verwenden?

Ich lerne immer noch Javascript und Angular 1.x und möchte die Best Practices verstehen!

Answer 1

$ scope.getJobs() ist jetzt in $scope Objekt zur Verfügung und ist zu Ihrer Ansicht zugänglich.

$scope.getJobs = function(){ 
//code here 
}; 

Dies ist eine Funktion, die private Sie es in Ihrem controller verwenden können, aber nicht zu Ihrer Ansicht availble sein.

var getJobs = function(){ 
// code here 
}; 

Der beste Fall ist, wenn Sie verwenden möchten,/die Funktion Ihrer Ansicht aufrufen, bringen Sie die Funktion/Variable Umfang auf $ sonst gehen nur mit einfachen alten Weg von function declaration or expression.

Hinweis: Angular triggert eine digest cycle zur Überprüfung von Variablen. Das Ändern einer Variablen/Funktion, die Sie nicht in Ihrer Ansicht verwenden, kann zu zusätzlichen Digest-Zyklen führen, die sich auf Ihre Leistung auswirken können.

Answer 2

Hängt davon ab, was Sie erreichen möchten.

Bei einer privaten Funktion:

var getJobs = function(){ 
// code here 
}; 

Es wird nicht aus dem Blick zugänglich sein. Diese Funktion ist nur für den Controller verfügbar.

Und, falls Sie die Funktion der Ansicht verfügbar machen möchten, müssen Sie die Funktion auf den Umfang $

$scope.getJobs = function(){ 
//code here 
}; 

In diesem Fall fügen Sie in der Lage sein, um es von der entsprechenden HTML-Datei aufrufen .

Answer 3

Best Practice ist ControllerAs Syntax:

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

function MyController() { 
    var vm = this; 
    vm.variable= 'text'; 
    vm.getJobs = function() { }; 
} 

Und in der Ansicht:

<div ng-controller="MyController as MyCtrl"> 
    <div ng-click="MyCtrl.getJobs()">{{ MyCtrl.variable}}</div> 
</div> 

Für weitere Informationen über diese bewährten Verfahren (und viele andere), haben einen Blick auf Jon Papas Styleguide: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y030

Answer 4

Es hängt davon ab, ob Sie die Funktion in Ihrer HTML-Vorlage zugänglich machen möchten. Angenommen, Sie einen Controller wie folgt hatte:

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

    $scope.myAlert = function(){ 
     window.alert('foo'); 
    }; 

    var myConsole = function(){ 
     console.log('bar'); 
    } 
}]); 

Dann können Sie dies tun:

<div ng-controller="MyController" ng-init="myAlert()"></div> 

Aber man konnte dies nicht tun:

<div ng-controller="MyController" ng-init="myConsole()"></div> 

Indem die myAlert Funktion eine Eigenschaft $ scope, es macht die Funktion für alle Elemente in diesem $ scope verfügbar.

Answer 5

Ich würde dringend die controllerAs stattdessen empfehlen. Auf diese Weise binden Sie Ihren Controller an ein bestimmtes Objekt im Bereich. Dann müssen Sie sich keine Gedanken darüber machen, diesen Bereich zu überschreiben.

Bad:

<div ng-controller="myCtrl"> 
    {{someVar}} 
    <div ng-controller="myOtherCtrl"> 
    {{someVar}} 
    </div> 
</div> 

Gut:

<div ng-controller="myCtrl as my"> 
    {{my.someVar}} 
    <div ng-controller="myOtherCtrl as myOther"> 
    {{myOther.someVar}} 
    </div> 
</div> 

Für den Controller-Code, führen würde, die nicht $scope injizieren für Variablen einstellen.Statt die this Controller binden:

function myCtrl() { 
    var vm = this; 
    vm.getJobs = function() {...}; 
} 

die https://johnpapa.net/angular-style-guide/ auf Best Practices für weitere Informationen lesen :)

Answer 6

Es hängt davon ab, ob Sie controller vs controllerAs Syntax verwenden.

Nehmen wir an, Sie haben diese Controller:

app.controller('MyController', function() { 

    $scope.alert = function(input) { 
     alert(input); 
    };  
}); 

Wenn Sie Controller verwenden Sie diese Funktionen Umfang hinzuzufügen zugänglich von UI zu sein.

<div ng-controller="MyController" ng-click="alert('hello')"></div> 

Jetzt wird dies funktioniert schön und Alarm wird angezeigt. Wenn Sie ControllerSyntax verwenden, können Sie einfach this. verwenden und Ihre Methoden zu Ihrem this Controller hinzufügen.

app.controller('MyController', function() { 

    var vm = this; 

    vm.alert = function(input) { 
     alert(input); 
    };  
}); 

Jetzt in Ihrem html Sie diese verwenden müssen:

<div ng-controller="MyController as vm" ng-click="vm.alert('hello')"></div> 

Answer 7

Wenn Sie sich für die besten Praktiken in der Regel John Papas Style Guide ist so ziemlich der heilige Gral der Winkel Best Practices suchen. Es befasst sich genau diese Frage. Du solltest es lesen!

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md