Um filtro bacana foi adicionado ao Angular 1.3: limitTo. O filtro faz o que o nome indica: Dado um array, string ou número, limitTo: ncriará um array contendo apenas o primeiro nou o último nelemento, dependendo se nfor positivo ou negativo, respectivamente.
Ver variáveis em um grupo
Para observar as alterações em um grupo de variáveis e, em seguida, chamar uma única função quando um membro do grupo for alterado, você pode usar o $watchGroupmétodo.
Exemplo
$scope.$watchGroup([‘someVar’, ‘someOtherVar’], function () { // Do something });
Alterações nas Diretivas
As diretivas em Angular 1.3 também testemunharam grandes mudanças. Uma das mudanças mais importantes a serem observadas é que a restrictpropriedade das diretivas agora é padronizada para EA, em vez de apenas A.
Duas novas diretivas foram introduzidas: ng-true-valuee ng-false-value, preenchendo uma lacuna crítica na construção de formulários que possuem caixas de seleção. Agora, é possível definir qual valor definir para o modelo dependendo se as caixas de seleção estão marcadas ou desmarcadas.
Exemplo
<input type=”checkbox” ng-model=”chkValue” ng-true-value=”‘YES'” ng-false-value=”‘NO'”>
Mudanças de comportamento de animação
O Angular 1.3 aguardará até o próximo ciclo de resumo para aplicar as animações , com o objetivo de melhorar o desempenho de seu site profissional.
Isso tem a vantagem de permitir que seu script adicione e remova classes conforme necessário e, em seguida, aplique a animação apenas no próximo ciclo de compilação, evitando animações redundantes e agindo apenas na mudança líquida de classes. No entanto, isso significa que o ciclo de resumo deve ser invocado manualmente às vezes, por exemplo, quando as animações são aplicadas fora do ciclo de resumo. Abaixo está um exemplo de como podemos criar uma animação simples de alterar o plano de fundo de uma linha da tabela lentamente quando um usuário clica nela.
CSS
.selectable-table { cursor: pointer; } .selectable-table tr.selected { background-color: #ccc; } .selectable-table tr.selected-add, .selectable-table tr.selected-remove { transition: all 0.5s linear; }
JavaScript
angular.module(“myApp”).directive(“selectable”, function ($animate) { return function(scope, element, attrs) { element.on(“click”, function() { if(element.hasClass(“selected”)) { $animate.removeClass(element, “selected”); } else { $animate.addClass(element, “selected”); } // The following is needed because // this click event is happening outside // of Angular’s digest cycles scope.$digest(); }) } })
Os retornos de chamada podem fazer tudo o que uma promessa faz, mas podem rapidamente sair do controle à medida que a lógica fica mais complicada. O serviço de animação, portanto, começou a usar promessas em vez de retornos de chamada para fornecer uma interface de programação muito mais simples. Considere um exemplo em que um usuário clica para selecionar uma linha da tabela.
Além da animação de alterar o plano de fundo da linha, queremos tornar a seção de detalhes visível. Isso pode ser feito assim:
$animate.addClass(element, “selected”) .then(function() { scope.$apply(function() { scope.showDetails = true; }); })
Melhorias na acessibilidade da Web
Angular 1.3 introduziu um módulo, ngAria, que torna mais fácil tornar seus aplicativos da web compatíveis com WAI-ARIA. WAI-ARIA é um conjunto de padrões e especificações da web que tornam sites e aplicativos mais acessíveis para pessoas com deficiência.
Na maioria dos cenários, a implementação envolve simplesmente a inclusão ngAriana lista de dependências do seu aplicativo. ngAriasuporta uma variedade de diretivas comuns do AngularJS que tornam os elementos HTML mais fáceis de entender quando acessados com leitores de tela e tecnologias assistivas semelhantes.
Suporte ao Internet Explorer
Angular 1.3 não suporta mais o Internet Explorer 8 e inferior.
Esta decisão da equipe AngularJS faz sentido. A Microsoft descontinuou o suporte ao Windows XP, e todas as versões oficialmente suportadas do Windows agora permitem que seus usuários executem o Internet Explorer 9 e superior. Além disso, isso permite que a equipe do AngularJS aprimore a estrutura em termos de desempenho.