Angularjs "Controller as" lub "$ scope"

Question

Chciałbym wiedzieć, jaka jest główna różnica między składnią "Controller as" lub "$ scope" w angularjs.

1. Czy mają one wpływ na wydajność, jeśli tak, to jaka składnia jest preferowana.
2. Składnia "Controller as" z pewnością poprawia czytelność kodu, ponieważ Knockout.js i inne struktury JavaScript mają tę samą składnię.

3. $ zakres zapewni zakresu dziedziczenia, które czasami dają nam dziwne zachowanie jak

   <div ng-controller="firstController"> 
   ParentController: <input type="text" ng-model="parent"/> 
       <div ng-controller="secondController"> 
       ChildController: <input type="text" ng-model="parent" /> 
       </div> 
   </div> 
   
   app.controller('ParentController', function ($scope) { 
       $scope.parent = "parentScope"; 
   }).controller('ChildController', function ($scope) { /*empty*/ }); 
   

   a) Początkowo dziecko dostanie właściwość nadrzędnego i wyświetla „parentScope”, gdy aktualizujemy rodzic dziecko będzie również uzyskać zaktualizowane. Ale jeśli zmieniliśmy właściwość potomną, aktualizacja jednostki nadrzędnej nie modyfikuje elementu potomnego, ponieważ ma własną właściwość zakresu.

   b) Jeśli korzystam z kontrolera jako dziecko zmieniające składnię, dziecko również aktualizuje rodzica.

Answer 1

Napisałem kilka odpowiedzi na to pytanie w przeszłości i wszystkie w zasadzie sprowadzają się do tego samego. W Angular używasz $scope, nawet jeśli nie odwołujesz się do tego wyraźnie.

Składnia ControllerAs umożliwia Angularowi pisanie bardziej wydajnych, odpornych na błędy kontrolerów. Za kulisami, gdy używasz ng-controller="theController as ctrl", Angular tworzy theController jako właściwość na $scope i przypisuje ją jako ctrl. Masz teraz właściwość obiektu, do którego odwołujesz się z zakresu i są automatycznie chronione przed problemami z dziedziczeniem prototypów.

Z perspektywy wydajności, ponieważ nadal używasz $scope, różnica w wydajności powinna być niewielka lub zerowa. Ponieważ jednak kontroler nie przypisuje bezpośrednio zmiennych bezpośrednio do $scope, nie musi on mieć wstrzykniętego $scope. Ponadto, kontroler może być znacznie łatwiej przetestowany w izolacji, ponieważ jest teraz zwykłą funkcją JavaScript.

Z perspektywy myślenia przyszłości, dobrze wiadomo, że Angular 2.0 nie będzie miał $scope, ale użyje funkcji ECMAScript 6. W każdym podglądu wydanym przez zespół Angular przedstawiający migracje, najpierw zaczynają się od refaktoryzacji kontrolera w celu wyeliminowania $scope. Jeśli Twój kod został zaprojektowany bez użycia kontrolek opartych na $scope, pierwszy krok w migracji jest już ukończony.

Z perspektywy projektanta, składnia ControllerAs sprawia, że ​​jest ona bardziej przejrzysta w przypadku manipulowania obiektami. Posiadanie numerów customerCtrl.Address i storeCtrl.Address znacznie ułatwia zidentyfikowanie adresu przypisanego przez wiele różnych kontrolerów do różnych celów niż w przypadku obu używanych $scope.Address. Posiadanie dwóch różnych elementów HTML na stronie, które są powiązane z {{Address}} i wiedząc, który z nich jest tylko elementem kontrolującym, w którym znajduje się ten element, stanowi poważny problem w rozwiązywaniu problemów.

Ostatecznie, chyba że próbujesz uruchomić 10-minutowe demo, naprawdę powinieneś używać ControllerAs do jakiejkolwiek poważnej pracy Angular.

Answer 2

Zdecydowanie polecam składnię sterownika jako.

Jest czystszy, wydajniejszy, można znacznie lepiej zorganizować swój kod i to jest nowy sposób wykonywania AngularJS.

Jeśli nie pracujesz z zespołem przyzwyczajonym do składni $ scope, zdecydowanie używaj kontrolera jako.