ng-include em AngularJS: Como incluir arquivo HTML [Exemplo]

Por: James Hartmann James Hartmann
Hours Atualização do

Por padrão, o HTML não oferece a possibilidade de incluir código do lado do cliente de outros arquivos. Normalmente é uma boa prática em qualquer linguagem de programação distribuir funcionalidades 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 poderia então ser reutilizado em vários aplicativos apenas incluindo esse arquivo.

Este é normalmente o conceito de Incluir declarações que estão disponíveis em linguagens de programação como .Net e Java.

Este tutorial analisa outras maneiras pelas quais os arquivos (arquivos que contêm código HTML externo) podem ser incluídos no arquivo HTML principal.

O lado do cliente inclui

Uma das formas mais comuns é incluir código HTML através de Javascript. JavaScript é uma linguagem de programação que pode ser usada para manipular o conteúdo de uma página HTML dinamicamente. Por isso, Javascript também pode ser usado para incluir código de outros arquivos.

As etapas abaixo mostram como isso pode ser feito.

Passo 1) Defina um arquivo chamado Sub.html e adicione o seguinte código ao arquivo.

<div>
	This is an included file
</div>

Passo 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,

  1. Na tag body, há uma tag div que possui um id de Conteúdo. Este é o local onde será inserido o código do arquivo externo 'Sub.html'.
  2. 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.
  3. De acordo com o relatório Javascript função, há uma instrução '$(“#Content”).load(“Sub.html”);' o que faz com que o código do arquivo Sub.html seja injetado na tag div que possui o id de Conteúdo. 
    <html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

<body> 
     <div id="Content"></div>
  </body> 
</html>

ARTIGOS RELACIONADOS

O lado do servidor inclui

As inclusões do lado do servidor também estão disponíveis para incluir um trecho de código comum em um site. Isso normalmente é feito para incluir conteúdo nas partes abaixo de um documento HTML.

  1. Cabeçalho da página
  2. Rodapé da página
  3. Menu de navegação.

Para que um servidor web reconheça um Server Side Included, os nomes dos arquivos têm extensões especiais. Eles geralmente são aceitos pelo servidor web, como .shtml, .stm, .shtm, .cgi.

A diretiva usada para incluir conteúdo é a “diretiva include”. Um exemplo da diretiva include é mostrado abaixo;

<!--#include virtual="navigation.cgi" -->
  • 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 relativo à 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 utilizados quando é necessário especificar o caminho relativo ao diretório do arquivo atual.

Nota:

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 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 include.

Como incluir arquivo HTML em AngularJS

Angular fornece a função para incluir a funcionalidade de outros arquivos AngularJS usando a diretiva ng-include.

O objetivo principal da “diretiva ng-include” é usar para buscar, compilar e incluir um fragmento HTML externo no aplicativo AngularJS principal.

Vejamos a base de código abaixo e explicamos como isso pode ser alcançado usando Angular.

Passo 1) vamos escrever o código abaixo em um arquivo chamado Table.html. Este é o arquivo que será injetado em nosso arquivo principal do aplicativo usando a diretiva ng-include.

O trecho de código abaixo pressupõe que existe uma variável de escopo chamada “tutorial”. Em seguida, ele usa a diretiva ng-repeat, que percorre cada tópico da variável “Tutorial” e exibe os valores do par de valores-chave 'nome' e 'descrição'.

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Country }}</td>
    </tr>
</table>

Passo 2) vamos escrever o código abaixo em um arquivo chamado Main.html. Este é um aplicativo angular.JS simples que possui os seguintes aspectos

  1. 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. Então a tag div ' ' será substituído por todo o código no arquivo 'Table.html'.
  2. 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

  1. Nome – denota o nome de um tópico como Controladores, Modelos e Diretivas.
  2. Description – Isso fornece uma descrição de cada tópico

A variável tutorial também é acessada no arquivo 'Table.html'.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="AngularController">
    <h3> Guru99 Global Event</h3>
		<div ng-include="'Table.html'"></div>
</div>
<script>

    var sampleApp = angular.module('sampleApp',[]);
    sampleApp.controller('AngularController', function($scope) {
        $scope.tutorial =[
            {Name: "Controllers" , Description : "Controllers in action"},
            {Name: "Models" , Description : "Models and binding data"},
            {Name: "Directives" , Description : "Flexibility of Directives"}
        ];

    });
</script>
</body>
</html>

Ao executar o código acima, você obterá a seguinte saída.

saída:

Incluir arquivo HTML em AngularJS

Resumo

  • Por padrão, sabemos que o HTML não fornece uma maneira direta de incluir conteúdo HTML de outros arquivos, como outros linguagens de programação.
  • Javascript junto com JQuery é a opção preferida para incorporar conteúdo HTML de outros arquivos.
  • Outra forma de incluir HTML conteúdo de outros arquivos é usar o 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.
  • Angular também oferece a possibilidade 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.

Você pode gostar: