Utilizando component no Angular 1.5

Olá,

Hoje vamos ver uma forma de usar uma nova funcionalidade do Angular 1, o component.

O component é um tipo especial de diretiva, que permite criar, de uma forma simplificada, web components e pavimentar o caminho para uma futura migração para o Angular 2. Para mim a principal vantagem é poder criar peças de códigos reaproveitáveis de uma maneira bem mais simples que criar uma diretiva e suas configurações complexas (manipulação de DOM ainda deve ser feito por diretivas).

Para esse tutorial, o primeiro passo é criar um controller:

(function() {
  angular.module('home-module').controller('HomeController', HomeController);
  function HomeController() {
    this.valor = 'Blog do Cezar';
  }
})();

Esse é um controller comum, que já estamos acostumados a criar no angular. O único ponto de atenção é quanto ao ‘this’, ao invés de utilizarmos ‘$scope’, podemos adicionar os valores direto no ‘this’, abaixo mostro como ele é carregado no template.

Agora que temos um controller, vamos criar um template para mostrar o nosso valor na tela:

{{ ::vm.valor }}

No nosso arquivo ‘home.html’, usamos a mesmas sintaxe que estamos acostumados, repare que usamos o ‘vm’ antes da variável que declaramos no controller, no código abaixo mostro o motivo ;).

Depois de criarmos o controller e a view, vamos finalmente criar o nosso component, veja:

angular.module('home-module').component('homeModule', {
  templateUrl: 'home.html',
  controller: 'HomeController as vm',
});

Para criarmos o component, basta colocar o ‘.component’ no modulo, como parâmetros, ele recebe o nome e um objeto com as configurações do componente. O nome do componente segue o mesmo padrão das diretivas:

Nome: homeModule

Referencia em outras partes da aplicação: home-module

O parâmetro ‘templateUrl’ passamos o caminho da view que criamos anteriormente. Podemos também, substituir esse parâmetro por ‘templatle’ e colocar a view diretamente inline, para algo pequeno, me parece muito bom.

Por fim, o parâmetro ‘controller’, que como o nome sugere, injetamos o controller no nosso component, repare que adicionamos os valores ‘as vm’ junto ao controller, é assim que definimos que o ‘this’, do controller, é referenciado na view como ‘vm’, se adicionarmos apenas o nome do controller, o Angular infere que você irá utilizar ‘$ctrl’ na view.

E por fim, para adicionarmos nosso component na aplicação, podemos fazer igual faríamos normalmente com uma diretiva ‘’ ou adicionar ele como uma uma rota, assim:

$routeProvider.when('/home', {
  template: '<home-module></home-module>'
});

E’ isso ai, simples e fácil.

Espero que ajude, abraços!

Referencias

https://toddmotto.com/exploring-the-angular-1-5-component-method/

https://docs.angularjs.org/guide/component