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