AngularJS ng-include: Incluir arquivos HTML com exemplo
James Hartmann
⚡ Resumo Inteligente
Em AngularJS, o ng-include busca, compila e injeta um fragmento HTML externo na página principal, de forma que a marcação compartilhada, como uma tabela, um cabeçalho ou um rodapé, fique em um único arquivo parcial reutilizável.
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 tais como .Net e Java.
Este tutorial analisa outras maneiras de lidar com arquivos (arquivos que contêm informações externas). HTML O código pode ser incluído no arquivo HTML principal.
Lado do cliente inclui
Uma das maneiras mais comuns de incluir código HTML é através de JavaRoteiro. JavaScript é uma linguagem de programação que pode ser usada para manipular o conteúdo de uma página HTML dinamicamente. Por isso, JavaO script também pode ser usado para incluir código de outros arquivos.
Os passos 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,
- 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'.
- Há uma referência a um script jQuery. jQuery é uma linguagem de script construída sobre... JavaScript que facilita ainda mais a manipulação do DOM.
- De acordo com o relatório JavaNa função de script, existe uma instrução '$(“#Content”).load(“Sub.html”);' que faz com que o código do arquivo Sub.html seja inserido na tag div que possui o id "Content".
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
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.
- Cabeçalho da página
- Rodapé da página
- Menu de navegação.
Para que um servidor web reconheça um arquivo Server Side Include (SSI), os nomes dos arquivos devem ter extensões especiais. Geralmente, o servidor web aceita extensões como .shtml, .stm, .shtm e .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.
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 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
AngularJS Fornece a função para incluir a funcionalidade de outros arquivos AngularJS usando o ng-include. Directivas.
O objetivo principal da diretiva “ng-include” é buscar, compilar e incluir um fragmento HTML externo na aplicação AngularJS principal.
Nota de versão: O AngularJS 1.x deixou de ter suporte de longo prazo em 31 de dezembro de 2021, e a equipe do framework afirma que O suporte ao AngularJS foi oficialmente encerrado. Em janeiro de 2022, portanto, não haverá atualizações ou correções de segurança subsequentes. Cada etapa e bloco de código abaixo permanece exatamente como publicado, servindo como referência histórica. O Angular moderno não oferece uma substituição direta: a marcação é composta de componentes e um fragmento selecionado em tempo de execução é renderizado com ng-container e ngComponentOutlet.
Vamos analisar o código abaixo e explicar como isso pode ser feito usando AngularJS.
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 exista uma variável de escopo chamada “tutorial”. Em seguida, ele usa a ng-repetir diretiva, que percorre cada tópico na variável “tutorial” e exibe os valores para 'Nome' e 'Descriptpar chave-valor 'ion'.
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
Passo 2) Vamos escrever o código abaixo em um arquivo chamado Main.html. Este é um aplicativo AngularJS 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. Então a tag div ' ' será substituído por todo o código no arquivo 'Table.html'.
- De acordo com o relatório controladorUma variável "tutorial" é criada como parte do objeto $scope. Essa variável contém uma lista de pares chave-valor.
Em nosso exemplo, os pares de valores-chave são
- Nome – denota o nome de um tópico como Controladores, Modelos e Diretivas.
- 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:
A captura de tela abaixo mostra o resultado renderizado: a aba do navegador exibe o título "Event Registration" (Inscrição no Evento), o cabeçalho fica acima da tabela inserida e as três linhas são extraídas do array do tutorial em Main.html por meio do partial. A captura de tela anotada mostra o título "Gur99", enquanto o código escreve Guru99.
Atributos do ng-include: src, onload e autoscroll
Além do nome do arquivo, a diretiva aceita dois atributos opcionais e pode ser escrita de três maneiras: como um atributo em qualquer elemento, como um atributo em um elemento ou como um atributo em um elemento. <ng-include> elemento, ou como uma classe CSS. A referência abaixo segue o padrão oficial. Documentação do ngInclude.
| Atributo | Exigido | O que ele faz |
|---|---|---|
| src ou ng-include | Sim | Expressão que avalia para o modelo URL |
| carregando | Não | A expressão é avaliada cada vez que uma nova parte termina de carregar. |
| rolagem automática | Não | Chama a função `$anchorScroll` após o carregamento do conteúdo; omitir o atributo desativa a rolagem. |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
O erro mais comum decorre da primeira linha: src leva um expressão, não uma string simples. Um caminho literal, portanto, precisa de suas próprias aspas dentro do atributo, razão pela qual o exemplo acima se lê ng-include="'Table.html'". Escrita ng-include="Table.html" faz o AngularJS avaliar Table Como propriedade de escopo, não encontre nada e deixe o elemento vazio.
Por que ng-include cria um novo escopo filho?
A diretiva não cola a marcação no escopo circundante. Cada inclusão cria um novo filho. escopo que herda prototipicamente do escopo em que foi declarado, e esse fato explica a maioria das surpresas vinculantes.
A leitura funciona como esperado. O trecho acima diz: tutorial diretamente dos pais, e é por isso ng-repeat encontra o array. O problema está na escrita: quando uma atribuição parcial é feita a um tipo primitivo, como em ng-model="topic", o AngularJS cria topic no escopo filho e a cópia pai nunca muda.
Dois hábitos evitam a armadilha:
- Vincular através de um objeto, como em
ng-model="data.topic", para que pais e filhos cheguem à mesma referência. - Armazene o estado em um controlador ou serviço e exponha funções em vez de tipos primitivos simples.
O include também emite $includeContentRequested, $includeContentLoaded e $includeContentError, para que um pai possa reagir através de $scope.$on sem sequer abordar o âmbito infantil.
Como corrigir um ng-include em branco ou com falha
Uma inclusão que não renderiza nada geralmente falha por um dos seguintes motivos. Analise-os nesta ordem.
- Confira as cotações. Um nome de arquivo literal precisa de aspas simples dentro do valor do atributo. Sem elas, a expressão resulta em `undefined` e nenhuma requisição é enviada.
- Exiba a página via HTTP. A diretiva emite uma solicitação XHR para o arquivo parcial, portanto, abrir o arquivo Main.html diretamente do disco por meio de um endereço de arquivo falha na maioria dos navegadores. Qualquer servidor web local ignora essa diretiva.
- Confirme se o caminho foi resolvido. Observe o painel de rede para a solicitação. Um erro 404 significa que o caminho é relativo à página que hospeda o arquivo incluído, e não ao arquivo parcial que o referencia.
- Respeite a regra da mesma origem. Por padrão, o modelo URL deve corresponder ao domínio e protocolo do documento da aplicação, pois o AngularJS o repassa. $sce.getTrustedResourceUrlUm modelo proveniente de outra fonte precisa de uma entrada no recurso confiável. URL lista, ou um wrapper trustAsResourceUrl explícito, e o servidor remoto ainda precisa enviar cabeçalhos CORS.
- Preste atenção ao fracasso. A exceção `$includeContentError` é acionada sempre que o status da resposta estiver fora do intervalo 200 a 299, transformando uma área silenciosamente em branco em uma mensagem que vale a pena registrar.
Outra causa que é fácil de passar despercebida. O AngularJS mantém cada partial buscado em `$templateCache`, então um arquivo editado pode continuar servindo marcação desatualizada até que a entrada do cache seja removida ou a página seja recarregada a partir do código-fonte. Quando um fragmento precisa de um comportamento próprio, em vez de apenas marcação, um diretiva personalizada Com seu próprio modelo e escopo isolado, é a melhor ferramenta.
