Was kann der Grund sein, die Eigenschaft "controllerAs" zu verwenden?

Question

Ich googelte aber ich fand keine passende Antwort auf meine Frage, ich bin neu bei angularJS Ich arbeite gerade an meinem angularJS Tutorial.

ich diese haben AngularJS Reihen:

.state('index',{ 
url:"/", 
templateUrl:"views/index.html", 
controller:"IndexCtrl", 
controllerAs:"index" 
}) 

Was ist der Grund controllerAs Eigenschaft zu verwenden sein kann?

Answer 1

Nur wenige Dinge:

1. Reduzieren Umfang Verwendung

Anstatt alle Daten im Rahmen einer Steuerung des Ladens, können Sie einfach this verwenden, um alles zu laden, die Sie benötigen.

zB:

Strecke

state('index',{ 
    url:"/", 
    templateUrl:"views/index.html", 
    controller:"ListCtrl", 
    controllerAs:"list" 
}) 

Kontroller

angular.module('feed').controller('ListCtrl', function($scope, reddit){ 
    var vm = this; 
    vm.names = ["Michael", "Roy"]; 

}); 

In Vorlage:

<ul> 
    <li ng-repeat="name in list.names"> 
     <div>{{name}}</div> 
    </li> 
</ul> 

2. Korrekte Umfang Verwendung

Wenn mehrere Controller ins Spiel kommen, wird der Anwendungsbereich zu einer schwierigen Sache. Die Verwendung von controllerAs Methode wird einen langen Weg gehen, um dies zu lösen.

Falsch: Ein Beispiel ist unten dargestellt

<span>Outside Controller: Your name is: {{username}}</span> 
<div ng-controller="SignupController"> 
    <span>Inside Controller: Your name is: {{username}}</span> 
    <fieldset legend="User details"> 
     <input ng-model="username"> 
    </fieldset> 
</div> 

Richtig:

<span>Outside Controller: Your name is: {{user.name}}</span> 
<div ng-controller="SignupController"> 
    <span>Inside Controller: Your name is: {{user.name}}</span> 
    <fieldset legend="User details"> 
     <input ng-model="user.name"> 
    </fieldset> 
</div> 

ein Bild gefunden, das Everthing macht mehr klar:

Courtesy: AngularJs "controller as" syntax - clarification?

Answer 2

vielleicht hast du nicht genug gegooglet!

http://toddmotto.com/digging-into-angulars-controller-as-syntax/

Wie der Name "controllerAs" sagen uns, ist ein Alias ​​für Controller sie Sie Ihren Controller mit diesem Alias ​​zugreifen können.

Answer 3

Sie Ihre Controller in vielerlei Hinsicht wie einstellen:

$stateProvider.state('contacts', { 
    template: '<h1>{{title}}</h1>', 
    controller: function($scope){ 
    $scope.title = 'My Contacts'; 
    } 
}) 

Oder, wenn Sie bereits einen Controller auf dem Modul definiert haben, wie folgt aus:

$stateProvider.state('contacts', { 
    template: ..., 
    controller: 'ContactsCtrl' 
}) 

Alternativ verwenden Die Syntax des Controllers wird wie folgt umgestellt:

und

$stateProvider.state('contacts', { 
    template: ..., 
    controller: 'ContactsCtrl as contact' 
}) 

Oder für fortgeschrittenere Bedürfnisse Sie die controllerProvider dynamisch eine Controller-Funktion oder String zurück für Sie verwenden können:

$stateProvider.state('contacts', { 
    template: ..., 
    controllerProvider: function($stateParams) { 
     var ctrlName = $stateParams.type + "Controller"; 
     return ctrlName; 
    } 
}) 

Quelle: https://github.com/angular-ui/ui-router/wiki#controllers

einfach, Controller als Syntax hilft, wenn wir mit verschachtelten Controllern arbeiten. Die genannten Bereiche sind klar definiert, sodass es keine Konflikte zwischen den Controllern gibt, da Sie angeben müssen, auf welchen Controller Sie vor dem Punkt verweisen.

<div ng-controller="Shell as shellVm"> 
    <h1>{{shellVm.title}}</h1> 
    <article ng-controller="Customers as customersVm"> 
    <h2>{{customersVm.title}} in {{shellVm.title}}</h2> 
    <ul ng-repeat="c in customersVm.customers"> 
     <li>{{c.name}}</li> 
    </ul> 
    </article> 
</div> 

Siehe auch AngularJs "controller as" syntax - clarification?.

Answer 4

Ja. Ein wenig mehr Infos:

Vor der controllerAs Syntax, Methoden und Eigenschaften müssen Ansichten ausgesetzt werden, indem sie an den $ scope gebunden werden. Mit controllerAs ist Ihre Controller-Instanz als ausgewählte Eigenschaft an den $ -Bereich gebunden.

Auf diese Weise können Sie Plain Old JavaScript-Klassen für Ihre Controller verwenden.

Dies ist ein viel sauberer Ansatz für die Entwicklung. Editorial: Eines der Dinge, die Angular so einfach zum Schreiben von Tests macht, ist, dass Ihre Controller und Komponenten nicht von Framework-Basisklassen erben müssen. Siehe Backbone und Ember.

Also mit dem alten Stil Ihre Controller aussehen würde (in ES6 der Einfachheit halber):

YourController.$inject = ['$scope']; 
class YourController { 

    constructor($scope) { 

     $scope.myMethod =() => { . . . }; 

     $scope.myProperty = true; 
    } 
} 

Mit den controllerAs

class YourController { 

    constructor() { 

     this.myProperty = true; 
    } 

    myMethod() { . . . }; 
} 

Nur eine einfache alte Klasse statt Dekoration oder monkeypatching die $ Umfang.