Angularjs “Controller as” ou “$ scope”

Eu gostaria de saber qual é a principal diferença entre a syntax “Controller as” ou “$ scope” em angularjs.

  1. Eles têm algum impacto no desempenho, se sim, qual syntax é preferível.
  2. A syntax “Controller as” certamente melhora a legibilidade do código, já que o Knockout.js e outras estruturas JavaScript seguem a mesma syntax.
  3. $ escopo irá fornecer inheritance escopo que às vezes nos dão um comportamento estranho como

    ParentController:
    ChildController:
    app.controller('ParentController', function ($scope) { $scope.parent = "parentScope"; }).controller('ChildController', function ($scope) { /*empty*/ });

    a) Inicialmente o filho irá obter a propriedade pai e exibirá ‘parentScope’ quando atualizarmos o filho pai também será atualizado. Mas, se tivermos alterado a propriedade filho, a atualização do pai não modifica o filho, pois ele tem sua própria propriedade de escopo.

    b) Se eu estiver usando o controlador como syntax mudando filho também atualiza o pai.

Eu escrevi algumas respostas para esta questão no passado, e todas elas essencialmente se resumem à mesma coisa. Em Angular, você está usando $scope , mesmo quando não está expressamente referenciando-o.

A syntax do ControllerAs permite que o Angular o ajude a escrever controladores mais eficientes e tolerantes a falhas. Nos bastidores, quando você usa ng-controller="theController as ctrl" , Angular cria theController como uma propriedade em $scope e o atribui como ctrl . Agora você tem uma propriedade de object que está referenciando no escopo e é automaticamente protegida de problemas de inheritance de protótipo.

Do ponto de vista do desempenho, como você ainda usa o $scope , deve haver pouca ou nenhuma diferença de desempenho. No entanto, como seu controlador agora não atribui variables ​​diretamente ao $scope por conta própria, ele não precisa ter $scope injetado. Além disso, o controlador pode ser testado muito mais facilmente de forma isolada, já que agora é apenas uma function JavaScript simples.

A partir de uma perspectiva prospectiva, é bem sabido que o Angular 2.0 não terá $scope , mas usará resources do ECMAScript 6. Em qualquer pré-visualização lançada pela equipe de Angular mostrando migrações, eles primeiro começam refatorando o controlador para eliminar $scope . Se o seu código for projetado sem o uso de controladores baseados em $scope , sua primeira etapa em uma migration já estará concluída.

Da perspectiva do designer, a syntax do ControllerAs torna muito mais claro onde os objects estão sendo manipulados. Ter customerCtrl.Address e storeCtrl.Address torna muito mais fácil identificar que você tem um endereço atribuído por vários controladores diferentes para finalidades diferentes das usadas se $scope.Address usados $scope.Address . Ter dois elementos HTML diferentes em uma página que estão vinculados a {{Address}} e saber qual deles é o único contido pelo controlador no qual o elemento está contido é um grande problema para solucionar problemas.

Em última análise, a menos que você esteja tentando fazer uma demonstração de 10 minutos, você realmente deveria estar usando ControllerAs para qualquer trabalho Angular sério.

Eu recomendaria definitivamente a syntax do Controller As.

É mais limpo, mais eficiente, você pode organizar seu código muito mais e é a nova maneira de fazer o AngularJS.

A menos que você esteja trabalhando com uma equipe usada na syntax $ scope, use definitivamente o Controller As.