Por padrão, o HTML não fornece o recurso de incluir código do lado do cliente de outros arquivos. Normalmente, é uma boa prática em qualquer linguagem de programação distribuir a funcionalidade entre vários arquivos para qualquer aplicativo.
Por exemplo, se você tivesse lógica para operações numéricas, normalmente desejaria ter essa funcionalidade definida em um arquivo separado. Esse arquivo separado pode então ser reutilizado em vários aplicativos, apenas incluindo esse arquivo.
Normalmente, esse é o conceito de instruções Include que estão disponíveis em linguagens de programação como .Net e Java.
Este tutorial examina outras maneiras de como os arquivos (arquivos que contêm código HTML externo) podem ser incluídos no arquivo HTML principal.
Neste tutorial, você aprenderá-
- O lado do cliente inclui
- Inclui o lado do servidor
- Como incluir arquivo HTML em AngularJS
O lado do cliente inclui
Uma das formas mais comuns é incluir código HTML por meio de Javascript. JavaScript é uma linguagem de programação que pode ser usada para manipular o conteúdo de uma página HTML instantaneamente. Conseqüentemente, o Javascript também pode ser usado para incluir código de outros arquivos.
As etapas a seguir mostram como isso pode ser feito.
Etapa 1) Defina um arquivo chamado Sub.html e adicione o seguinte código ao arquivo.
Este é um arquivo incluído
Etapa 2) Crie um arquivo chamado Sample.html, que é o arquivo principal do seu aplicativo e adicione o trecho de código abaixo.
Abaixo estão os principais aspectos a serem observados sobre o código abaixo,
- Na tag body, há uma tag div que possui um id de Content. Este é o local onde o código do arquivo externo 'Sub.html' será inserido.
- Há uma referência a um script jquery. JQuery é uma linguagem de script construída sobre Javascript, o que torna a manipulação do DOM ainda mais fácil.
- Na função Javascript, existe uma declaração '$ ("# Content"). Load ("Sub.html");' o que faz com que o código no arquivo Sub.html seja injetado na tag div que tem o id de Content.
Inclui o lado do servidor
As inclusões do lado do servidor também estão disponíveis para incluir uma parte comum de código em um site. Isso normalmente é feito para incluir conteúdo nas partes abaixo de um documento HTML.
- Cabeçalho da página
- Rodapé da página
- Menu de navegação.
Para que um servidor da web reconheça um Server Side Includes, os nomes dos arquivos têm extensões especiais. Eles geralmente são aceitos pelo servidor da web, como .shtml, .stm, .shtm, .cgi.
A diretiva usada para incluir conteúdo é a "diretiva de inclusão". Um exemplo da diretiva de inclusão é mostrado abaixo;
- A diretiva acima permite que o conteúdo de um documento seja incluído em outro.
- O comando "virtual" acima do código é usado para especificar o destino em relação à raiz do domínio do aplicativo.
- Além disso, para o parâmetro virtual, existe também o parâmetro de arquivo que pode ser usado. Os parâmetros "arquivo" são usados quando é necessário especificar o caminho relativo ao diretório do arquivo atual.
Observação:
O parâmetro virtual é usado para especificar o arquivo (página HTML, arquivo de texto, script, etc.) que precisa ser incluído. Se o processo do servidor da web não tiver acesso para ler o arquivo ou executar o script, o comando include falhará. A palavra 'virtual' é uma palavra-chave que deve ser colocada na diretiva de inclusão.
Como incluir arquivo HTML em AngularJS
O Angular fornece a função de incluir a funcionalidade de outros arquivos AngularJS usando a diretiva ng-include.
O objetivo principal da "diretiva ng-include" é usado para buscar, compilar e incluir um fragmento HTML externo no aplicativo AngularJS principal.
Vamos examinar a base de código abaixo e explicar como isso pode ser feito usando o Angular.
Etapa 1) vamos escrever o código abaixo em um arquivo chamado Table.html. Este é o arquivo que será injetado em nosso arquivo de aplicativo principal usando a diretiva ng-include.
O trecho de código a seguir assume que existe uma variável de escopo chamada "tutorial". Em seguida, ele usa a diretiva ng-repeat, que percorre cada tópico na variável "Tutorial" e exibe os valores para o par de valores-chave 'nome' e 'descrição'.
| {{Topic.Name}} | {{Topic.Country}} |
Etapa 2) vamos escrever o código abaixo em um arquivo chamado Main.html. Este é um aplicativo angular.JS simples que possui os seguintes aspectos
- Use a "diretiva ng-include" para injetar o código no arquivo externo 'Table.html'. A declaração foi destacada em negrito no código abaixo. Portanto, a tag div ' ' será substituída por todo o código no arquivo 'Table.html'.
- No controlador, uma variável "tutorial" é criada como parte do objeto $ scope. Esta variável contém uma lista de pares de valores-chave.
Em nosso exemplo, os pares de valores-chave são
- Nome - denota o nome de um tópico, como controladores, modelos e diretivas.
- Descrição - fornece uma descrição de cada tópico
A variável tutorial também é acessada no arquivo 'Table.html'.
Registro do evento Evento Global Guru99
Ao executar o código acima, você obterá a seguinte saída.
Produto :
Resumo:
- Por padrão, sabemos que HTML não fornece uma maneira direta de incluir conteúdo HTML de outros arquivos como outras linguagens de programação.
- Javascript junto com JQuery é a melhor opção preferida para incorporar conteúdo HTML de outros arquivos.
- Outra maneira de incluir conteúdo HTML de outros arquivos é usar a diretiva
e a palavra-chave do parâmetro virtual. A palavra-chave do parâmetro virtual é usada para denotar o arquivo que precisa ser incorporado. Isso é conhecido como inclusões do lado do servidor. - O Angular também fornece a facilidade de incluir arquivos usando a diretiva ng-include. Esta diretiva pode ser usada para injetar código de arquivos externos diretamente no arquivo HTML principal.