O que são templateUrls e styleUrls em Angular?

Aprenda o essencial da renderização de HTML e CSS, da forma Angular.

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

No registo TypeScript, você pode somar qualquer lógica necessária para que a interface do usuário funcione, uma vez que restaurar dados de um servidor.

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

Qual é o protótipo e templateUrl em Angular?

Ao produzir seu próprio componente em Angular, você pode renderizar o HTML para ele usando um protótipo. Existem duas maneiras de ortografar seu protótipo HTML:

• Você pode ortografar seu código HTML dentro de um protótipo no próprio registo TypeScript.
• Você pode ortografar seu código HTML em um registo extrínseco e vincular o registo TypeScript a esse registo HTML.

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

1. Crie um novo aplicativo Angular.
2. No terminal de sua emprego, execute o ng gerar componente comando para produzir um novo componente. Chame o novo componente de “sobre-página”.

   ng generate component about-page

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

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

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

   @Component({
   selector: 'app-about-page',
   template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>'
   })
   

5. Se você quiser incluir um protótipo com várias linhas, poderá usar aspas invertidas:

   @Component({
   selector: 'app-about-page',
   template: `<h2>About Page</h2>
   <br>
   <p>This is rendering the HTML from the TypeScript file!</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 registo TypeScript será renderizado na página.

7. Dentro about-page.component.ts, substitua “template” por “templateUrl”. Inclua o link para o registo HTML extrínseco do componente. Você pode usar “templateUrl” se tiver um código HTML mais multíplice que exija seu próprio registo.

   @Component({
   selector: 'app-about-page',
   templateUrl: './about-page.component.html'
   })

8. Adicione qualquer código HTML ao about-page.component.html Registo:

   <h2>About Page</h2>
   <p>This is rendering the HTML from the HTML file!</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 about-page.component.html Registo.

O que são estilos e styleUrls em Angular?

Da mesma forma que o HTML, você pode usar “style” ou “styleUrls”, dependendo de onde você 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 registo TypeScript a um CSS extrínseco que contém mais estilos.

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

   @Component({
   selector: 'app-about-page',
   templateUrl: './about-page.component.html',
   styles: ['h2 {color:red}','p {color:green}']
   })

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 registo TypeScript.

3. Se você tiver muito CSS, use “styleUrls” em vez de “styles”, para vincular o registo TypeScript a um registo CSS extrínseco. Dentro about-page.component.tssubstitua o decorador @Component pelo seguinte:

   @Component({
   selector: 'app-about-page',
   templateUrl: './about-page.component.html',
   styleUrls: ['./about-page.component.css']
   })

4. Adicione qualquer estilo CSS a about-page.component.css:

   h2 {
   color: blue
   }
   p {
   color: darkorange
   }

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 registo CSS extrínseco.

Renderizando o HTML de um Componente em Angular

Agora você conhece as diferentes maneiras de renderizar seu teor HTML e CSS em um aplicativo Angular. Você pode mandar qual abordagem deseja usar com base na complicação de seu HTML e CSS.

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