Arquitetando aplicações com Diretivas em AngularJS

por Matheus Lima

Motivação

Reuso

Manutenção

ng-controller

Components são o futuro

Reuso

Paginação com Diretivas:

<pagination pages="pages"></pagination>

Alternativa com controllers:

<div ng-controller="PaginationCtrl">

<div ng-include="'/shared/pagination.html'"></div>

</div>

Manutenção

JavaScript não-obstrusivo não é tão bom quanto pensávamos.

Componentes possuem todo o código no mesmo lugar:

function Pagination() {

return {

restrict: 'E',

template: '<nav>...</nav>',

scope: {

page: '='

}

};

}

ng-controller

1. Compartilhamento de dados

2. Repetição de código

3. Herança

ng-controller

1. Compartilhamento de dados

A forma mais comum usa $scope ou $rootScope (deprecated)

Por não possuir escopo isolado é mais difícil de:

Entender

Manter

Testar

Exemplo no jsfiddle

ng-controller

2. Repetição de código

Justamente por ser difícil o Reuso, o DRY é comprometido

ng-controller

3. Herança

A forma mais comum:

function MyController() {

...

$scope.$parent.invokeMethod();

}Usa $scope e $parent…. JUNTOS

Exemplo no jsfiddle

ng-controller

Portanto:

“Se uma feature de uma linguagem pode ser problemática, e se ela pode ser substituída por outra feature que é mais confiável, então sempre escolha a feature mais confiável.”

- Douglas Crockford

Components são o futuro

Mesmo que você não acredite em nada do que eu falei:

Angular 2

React

Ember

Aurelia

Todos os frameworks estão focando em Components.

Perguntas