Neste tutorial vamos entender um pouco sobre components em angular.
Em angular 2.x,3.x e 5.x, os componentes tem muitas semelhanças com as diretivas do AngularJs(1.x).
A partir da versão 2, podemos dizer que um dos pilares para o desenvolvimento de aplicações neste framework está baseado em componentes. onde podemos estruturar uma aplicação subdividida em componentes.
Com a utilização de componentes podemos realmente isolar as funcionalidades, métodos, eventos, atributos, estilo css e templates dentro dos limites do compoenente, não interferindo em outras partes da aplicação.
Uma das grandes diferenças e uma das vantagens em angular é não exisitir (controller, $scope, etc...).
Um componente, nada mais é que uma classe demarcada com o decorator @component(), que define metadados para que o angular possa identificar que a classe é um componente e configurar as características para este componente.
Vamos analisar, então a estrutura do componente principal de uma aplicação angular
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
Para utilizarmos o decorator @Component deve em primeiro lugar importar o modulo '@angular/core'
import { Component } from '@angular/core';
Agora dentro das configurações do atributo, temos os metadados
selector: que define qual será a tag para o componente sendo criado
templateUrl: é o caminho para o template do componente, podemos subistituir esta propriedade por "template", neste caso definimos um template inline, incluin por exemplo o nosso html do componente:
template:'<h1>Template do componente</h1>'
ou ainda podemos usar a interpolação para definirmos um código com mais de uma linha, ex.:
template:`<h1>Template do componente</h1>
<span>Angular é divertido demais</span>`
styleUrls: aqui definimos o caminho para o arquivo(s) css que serão utilizados pelo o componente.
uma coisa bem interessante é que estes css's ficam limitados ao componente, não interferindo no restante da aplicação.
podemos também definir o css inline, da seguinte forma:
styles:['h1{font-size:10pt}']
ou com interpolação:
styles:[`
h1{font-size:18pt}
h2{font-size:16pt}
`]
providers: outro item que é bastante utilizado no decorator @Component é o providers, que define um array com os serviços que poderão ser utilizados no construtor do componente, via injeção de dependência, iremos ver mais detalhes sobre injeção de dependências quando formos tratar de serviços.
A lista de outros metadados do decorator @Component é mostrado a seguir:
- animations - lista de animações do componente;
- changeDetection -estratégia de detectção de mudança do componente;
- encapsulation - tipo de encapsulamento utilizado pelo componente;
- entryComponents - lista componentes que são dinamicamente inseridos pelo componente;
- exportAs - nome pelo qual a instância do componente é exportada dentro do template;
- host - mapeamento de propriedades para bindings de eventos, propriedades e atributos;
- inputs - list de propiedades para data-bind de entrada do component;
- interpolation - marcadores de interpolação customizados usados no template do component;
- moduleId - ES/CommonJS - Id do modulo onde o componente é definido;
- outputs - lista de propriedade que expõem eventos aos quais outros componetes podem fazer uma subscricção;
- queries - consultas que podem ser injetadas no componente;
- viewProviders - lista de provedores disponíveis para este componente e sua respectiva view Children;
Criando um componente
Através da interface de comando vamos digitar o seguinte:
ng g c header
Notamos que então foram gerados os arquivos como mostrado acima, e também o modulo principal da aplicação (neste caso único), foi também atualizado. A interface de comando nos ajuda bastante aqui.
Abrindo o arquivo app.module em modo de comparação podemos ver o que foi atualizado
Agora vamos abrir o arquivo header.component.ts
O básico para o funcionamento do componente já foi criado.
Agora vamos editar o arquivo html do nosso componente, mas antes vamos adicionar suporte ao bootstrap ao nossso código, sem bootstrap hoje em dia fica difícil (kkkk).
Primeiro vamos instalar o pacote do bootstrap
npm install bootstrap@4.0.0-alpha.6 --save
npm install jquery@latest --save
npm install tether@latest --save
em seguida no arquivo .angular-cli.json editamos a seção "scripts" como segue:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
depois no arquivo styles.css adicionamos o seguinte @import
@import '~bootstrap/dist/css/bootstrap.min.css';
voltamos então para o header.component.html e colamos o seguinte conteúdo
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Primeira App Angular</a>
</nav>
Agora vamos adicionar a tag selector do nosso component no template do nosso compnente principal app.componente.html, que ficará assim:
<app-header></app-header>
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
<img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
Acessando o no browser
agora podemos executar o comando:
ng serve -o
Adicionando rotas para os componentes
Vamos agora adicionar dois componentes
ng g c home
ng g c about
alterar o arquivo app-routing.module.ts conforme abaixo:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
fazendo isso já conseguimos digitar no browser as rotas recém-criadas
Porém o conteúdo do component não é exibido, vamos ver como corrigir isso.
RouterOutlet
Para que possamos ver o conteúdo do nosso componente precisamos adicionar uma diretiva específica do angular que irá funcionar com um container para os componentes configurados nas rotas.
A diretiva é
<router-outlet></router-outlet>
vamos então alterar o arquivo app.component.html com o seguinte conteúdo
<app-header></app-header>
<div class="container-fluid">
<router-outlet></router-outlet>
</div>
Voltando novamente para o browser, podemos verificar que o conteudo do templete do nosso componente foi apresentado
Criando links para o componente
Para utilizar links precisamos utilizar outra inportante diretiva do angular RouterLink
No arquivo header.component.html vamos incluir nossos links:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" routerLink="/">Primeira App Angular</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About</a>
</li>
</ul>
</div>
</nav>
Agora podemos navegar nos componentes criados
O artigo ficou um pouco extenso, realmente tem muita coisa para descrever.
No proximo tópico vamos mostrar como podemos receber parâmetros em um componente através do decorator @Input() e de modo similar enviar dados através do decorator @Output() e EventEmitter
Obrigado e até o próximo artigo!