O HTML não suporta a incorporação de páginas html dentro de outra página html. Para conseguir essa funcionalidade são utilizadas as seguintes tecnologias:
- Ajax - Busca e carrega dados em background sem a necessidade de reload da página.
- Side Server Includes - JSP, PHP e outras tecnologias de servidor web podem incluir páginas HTML dentro de uma página dinâmica.
O AngularJS, pode incorporar páginas HTML dentro de uma outra página HTML usando a diretiva ng-include.
<div ng-app = "" ng-controller = "studentController">
<div ng-include = "'main.htm'"></div>
<div ng-include = "'subjects.htm'"></div>
</div>
Exemplo Completo
Arquivo: testeAngular.html
<html>
<head>
<title>Angular JS Includes</title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>Include</h2>
<div ng-app = "mainApp" ng-controller="alunoController">
<div ng-include = "'/angularjs/src/include/main.htm'"></div>
<div ng-include = "'/angularjs/src/include/materias.htm'"></div>
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('alunoController', function($scope) {
$scope.aluno = {
nome: "Jack",
sobrenome: "Bauer",
grana:500,
materias:[
{nome:'Física',marks:70},
{nome:'Química',marks:80},
{nome:'Dinamarquês',marks:80},
{nome:'Inglês',marks:65},
{nome:'Japonês',marks:90}
],
nomeCompleto: function() {
var alunoObject;
alunoObject = $scope.aluno;
return alunoObject.nome + " " + alunoObject.sobrenome;
}
};
});
</script>
</body>
</html>
Arquivo: main.html
<table border = "0">
<tr>
<td>Insira o nome:</td>
<td><input type = "text" ng-model = "aluno.nome"></td>
</tr>
<tr>
<td>Insira o sobrenome: </td>
<td><input type = "text" ng-model = "aluno.sobrenome"></td>
</tr>
<tr>
<td>Nome: </td>
<td>{{aluno.nomeCompleto()}}</td>
</tr>
</table>
Arquivo: materias.html
<p>Materias:</p>
<table>
<tr>
<th>Nome</th>
<th>Notas</th>
</tr>
<tr ng-repeat = "materia in aluno.materias">
<td>{{ materia.nome }}</td>
<td>{{ materia.notas }}</td>
</tr>
</table>
OBS: Coloque os arquivos em um web server e teste.
Saída
