As grandes mudanças para prestar atenção no AngularJS 1.3

AngularJS evoluiu muito rapidamente. Sua versão mais recente, a versão 1.3, apelidada de “superluminal-nudge”, traz muitos recursos e melhorias interessantes. O repositório de código-fonte AngularJS GitHub contém um log de alterações que fornece um breve resumo de lista com marcadores de todas as alterações que ocorreram no projeto AngularJS.

No entanto, este artigo discutirá apenas as principais mudanças na versão estável mais recente. Vamos nos aprofundar nos novos recursos e melhorias do Angular 1.3 que, na minha opinião, não devem ser ignorados.

Opções de vinculação de dados

Nas versões anteriores do Angular, ng-model não era muito flexível.

No Angular 1.3, agora é possível controlar exatamente quando atualizar as variáveis vinculadas, quanto tempo esperar antes de processar a atualização e muito mais. Por exemplo, para atualizar um modelo quando o campo de entrada relevante perde o foco, a updateOnopção pode ser substituída da seguinte forma:

<input ng-model-options=”{updateOn: ‘blur’}”>

Outra opção de vinculação de dados útil é debounce. Alguns padrões de design profissionais frequentemente empregados em UIs de pesquisa em tempo real são o preenchimento automático e o filtro ao vivo.

Ao usar esses padrões de design, é uma boa ideia esperar que o usuário pare de digitar antes de sugerir resultados para evitar atualizações desnecessárias do modelo e também para reduzir a distração enquanto os usuários ainda estão compondo suas consultas de pesquisa. Algo semelhante pode ser implementado definindo a debounceopção:

<input ng-model-options=”{debounce: 500}”>

No exemplo acima, haverá um atraso de 0,5 segundo antes que o modelo seja atualizado novamente. Use a debounceopção com cuidado.

Como o modelo não é atualizado a menos que o tempo especificado seja concluído, ng-clickos manipuladores usados no processamento de dados de formulário podem não funcionar como esperado. Em vez de usar ng-click, use ng-submit. Outra solução é enviar um objeto para ng-model-optionsfazer o gatilho de atualização debounce, mas atualizar imediatamente no desfoque, como abaixo:

<input ng-model-options=”{debounce: {‘default’: 300, ‘blur’: 0}}”>

Com ng-model-options, também é possível fazer uma ligação de dados única. Essa pode ser uma opção que pode garantir ganhos de desempenho se usada corretamente.

Ligando com um Getter/Setter

Angular agora tem a capacidade de vincular a uma função getter/setter. Em vez do modelo ser um atributo em um objeto, agora ele pode ser uma função. A função recebe um único argumento, que quando definido deve fazer com que a função se comporte como um setter.

Chamar a função sem o argumento definido fará com que ela se comporte como um getter.

HTML

<input ng-model=”value” ng-model-options=”{getterSetter: true}”> <br /> Bound value: <span ng-bind=”value()”>

JavaScript

var _value; scope.value = function (v) { if(angular.isDefined(v)) { _value = v; } return _value; }

Reversão de valores de entrada

Muitas vezes, é desejável redefinir o valor de um campo de entrada para seu valor anterior. Por exemplo, em muitos casos, o instinto natural de um usuário veterano de aplicativos da Web é pressionar a tecla Esc em seu teclado para voltar ao valor anterior inserido.

No Angular 1.3, você pode facilitar esse tipo de interação usando o $rollbackViewValue()método para reverter o valor do campo de entrada. Por exemplo, para vincular o comportamento descrito à tecla Esc, você pode fazer o seguinte:

HTML

<input id=”inputText” name=”inputText” ng-model=”inputText” ng-model-options=”{updateOn: ‘blur’} ng-keyup=”cancelEntry(formName.inputText, $event)”/>

JavaScript

$scope.cancelEntry = function (control, event) { // key code for the Esc key = 27 if (event.keyCode === 27) { control.$rollbackViewValue(); } };

Também é possível estender essa ideia vinculando o comportamento a um botão “Redefinir” que redefine todos os campos de entrada em um formulário da web para seus valores anteriores:

<form ng-submit=”ctrl.submitAction()” name=”formName” ng-model-options=”{updateOn: ‘submit’}”> <input type=”text” ng-model=”ctrl.firstName” name=”firstName”> <input type=”text” ng-model=”ctrl.lastName” name=”lastName”> <button class=”submit” ng-click=”formName.$rollbackViewValue()”>Reset</button> </form>

Observe que no exemplo acima, ng-model-optionsno nível do formulário é importante porque os valores de entrada são atualizados com o modelo enquanto o usuário está alterando seus dados e, portanto $rollbackViewValue(), não terá nenhum efeito de outra forma.

Detecção de envio

Uma nova propriedade de formulário foi introduzida: $submitted.

Essa nova propriedade determina se o usuário tentou enviar o formulário, mesmo que o envio fosse inválido. Com a $submittedpropriedade, agora é possível mostrar mensagens de erro in-line dentro de um formulário web de forma mais “Angular”. Aqui está um exemplo de exibição condicional de uma mensagem se o surveyFormformulário da web já tiver sido enviado:

<div ng-if=”surveyForm.$submitted”> Form Submitted </div>

Vale ressaltar que $submittedtornar -se truenão significa que os dados deste formulário chegaram ao servidor.

Isso ainda tem que acontecer dentro do ng-submitmanipulador.

Detecção de foco

O nome da nova $touchedpropriedade pode levar você a acreditar que ela está relacionada a gestos em um dispositivo com tela sensível ao toque. No entanto, semelhante a $dirty, $touchedé uma propriedade que determina se o usuário já focou em um elemento e depois o desfocou, com ou sem fazer alterações.