O que são templateUrls e styleUrls em Angular?

Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado.

Usando Angular, você pode separar páginas, caixas de diálogo ou outras seções de seu aplicativo em componentes. Os componentes em um aplicativo Angular são compostos principalmente de arquivos HTML, CSS e TypeScript.

No arquivo TypeScript, você pode adicionar qualquer lógica necessária para que a interface do usuário funcione, como recuperar dados de um servidor.

Você também pode renderizar o HTML e o CSS do componente usando TypeScript, especificando seus atributos de modelo e estilo. Você pode usar templateUrl ou styleUrls para vincular a arquivos HTML ou CSS externos.

O que é o template e templateUrl em Angular?

Quando você crie seu próprio componente em Angular, você pode renderizar o HTML para ele usando um modelo. Há duas maneiras de escrever seu modelo HTML:

• Você pode escrever seu código HTML dentro de um modelo no próprio arquivo TypeScript.
• Você pode escrever seu código HTML em um arquivo externo e vincular o arquivo TypeScript a esse arquivo HTML.

Em um novo componente, você pode definir os atributos "template" ou "templateUrl" dependendo de onde você escreve seu HTML.

1. Criar uma novo aplicativo Angular.
2. No terminal do seu aplicativo, execute o ng gerar componente comando para criar um novo componente. Chame o novo componente de "sobre-página".

   ng gerar página sobre o componente

3. Em app.component.html, substitua o código atual por tags para seu novo componente:

   <app-about-page></app-about-page>

4. Abra o sobre-page.component.ts arquivo. Se você não tiver muito código HTML, poderá usar o atributo template para escrevê-lo diretamente no arquivo TypeScript. Substitua o decorador @Component pelo seguinte:

   @Componente({
    seletor: 'app-about-page',
    modelo: '<h2>Sobre a página</h2><br><p>Isso está renderizando o HTML do arquivo TypeScript!</p>'
   })
   

5. Se você deseja incluir um modelo com várias linhas, pode usar aspas de crase:

   @Componente({
    seletor: 'app-about-page',
    modelo: `<h2>Sobre a página</h2>
   <br>
   <p>Isso está renderizando o HTML do arquivo TypeScript!</p>`
   })

6. No terminal, digite ng servir para compilar seu código e executá-lo em um navegador da web. Abra seu aplicativo em http://localhost: 4200/. Seu código HTML do arquivo TypeScript será renderizado na página.
7. Em sobre-page.component.ts, substitua "template" por "templateUrl". Inclua o link para o arquivo HTML externo do componente. Você pode usar "templateUrl" se tiver um código HTML mais complexo que exija seu próprio arquivo.

   @Componente({
    seletor: 'app-about-page',
    URL do modelo: './sobre-página.component.html'
   })

8. Adicione algum código HTML ao sobre-page.component.html arquivo:

   <h2>Sobre a página</h2>
   <p>Isso está renderizando o HTML do arquivo HTML!</p>

9. Volte para o seu navegador ou execute novamente ng servir para recompilar seu código. Abra seu aplicativo em http://localhost: 4200/. O navegador agora renderiza o HTML do sobre-page.component.html arquivo.

O que são estilos e styleUrls em Angular?

Da mesma forma que o HTML, você pode usar "estilo" ou "estiloUrls" dependendo de onde escolher armazenar seu CSS.

Você pode incluir CSS no código TypeScript se tiver declarações CSS muito simples. Caso contrário, você pode usar "styleUrls" para vincular o arquivo TypeScript a um CSS externo que contenha mais estilos.

1. Em seu aplicativo Angular criado anteriormente, abra o sobre-page.component.ts arquivo. Adicione um atributo "estilos" ao componente. Dentro de "estilos", adicione seu estilo CSS para a página:

   @Componente({
    seletor: 'app-about-page',
    URL do modelo: './sobre-página.component.html',
    estilos: ['h2 {cor: vermelho}','p {cor: verde}']
   })

2. No terminal, digite ng servir para compilar seu código e executá-lo em um navegador da web. Abra seu aplicativo em http://localhost: 4200/ para visualizar o estilo especificado no arquivo TypeScript.
3. Se você tiver muito CSS, use "styleUrls" em vez de "estilos" para vincular o arquivo TypeScript a um arquivo CSS externo. Em sobre-page.component.ts, substitua o decorador @Component pelo seguinte:

   @Componente({
    seletor: 'app-about-page',
    URL do modelo: './sobre-página.component.html',
    URLs de estilo: ['./sobre-página.component.css']
   })

4. Adicione um pouco de estilo CSS a sobre-page.component.css:

   h2 {
    cor azul
   }
   p {
    cor: laranja escuro
   }

5. Volte para o seu navegador ou execute novamente ng servir para recompilar seu código. Abra seu aplicativo em http://localhost: 4200/ para visualizar os estilos usados ​​no arquivo CSS externo.

Renderizando o HTML de um Componente em Angular

Agora você conhece as diferentes maneiras de renderizar seu conteúdo HTML e CSS em um aplicativo Angular. Você pode determinar qual abordagem deseja usar com base na complexidade de seu HTML e CSS.

Se estiver interessado, você pode explorar como passar dados entre os arquivos HTML e TypeScript de um componente Angular.