AngularJS 包含

HTML no admite la inclusión de una página HTML dentro de otra. Para lograr esta funcionalidad, podemos usar una de las siguientes opciones-

Uso de Ajax − realizar llamadas de servidor para obtener la página HTML correspondiente y establecerla en el innerHTML del controlador HTML.
Uso de inclusión de servidor − JSP, PHP y otras tecnologías de servidor web pueden incluir páginas HTML en páginas dinámicas.

Con AngularJS, podemos usar ng-La directiva include inserta una página HTML dentro de otra página HTML.

<div ng-app　=　""　ng-controller = "studentController">
　　　<div ng-include　=　"'main.htm'"></div>
　　　<div ng-include　=　"'subjects.htm'"></div></div>

Ejemplo en línea

tryAngularJS.htm

Ejemplo

<html>
　　　<head>
　　　　　　<title>Aplicación de ejemplo Angular JS</title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/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>Aplicación de ejemplo AngularJS</h2>
　　　　　　
　　　　　　<div ng-app = "mainApp" ng-controller = "studentController">
　　　　　　　　　<div ng-include = ""/angularjs/src/include/main.htm"></div>
　　　　　　　　　<div ng-include = ""/angularjs/src/include/subjects.htm"></div>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.controller('studentController', function($scope) {
　　　　　　　　　　　　$scope.student = {
　　　　　　　　　　　　　　　firstName: "Sea",
　　　　　　　　　　　　　　　lastName: "Gull",
　　　　　　　　　　　　　　　fees:500,
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　subjects: [
　　　　　　　　　　　　　　　　　　{name: 'Fisica', marks:70},
　　　　　　　　　　　　　　　　　　{name: 'Quimica', marks:80},
　　　　　　　　　　　　　　　　　　{name: 'Matematicas', marks:65},
　　　　　　　　　　　　　　　　　　{name: 'Ingles', marks:75},
　　　　　　　　　　　　　　　　　　{name: 'Chino', marks:67}
　　　　　　　　　　　　　　　],
　　　　　　　　　　　　　　　fullName: function() {
　　　　　　　　　　　　　　　　　　var studentObject;
　　　　　　　　　　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　　　　　　　　　　return studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　};
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

prueba para ver‹/›

main.htm

<table　border　=　"0">
　　　<tr>
　　　　　　<td>输入名字:</td>
　　　　　　<td><input　type　=　"text"　ng-model　=　"student.firstName"></td>
　　　</tr>
　　　
　　　<tr>
　　　　　　<td>输入姓氏:　</td>
　　　　　　<td><input　type　=　"text"　ng-model　=　"student.lastName"></td>
　　　</tr>
　　　
　　　<tr>
　　　　　　<td>Name:　</td>
　　　　　　<td>{{student.fullName()}}</td>
　　　</tr>
</table>

subjects.htm

<p>Subjects:</p>
<table>
　　　<tr>
　　　　　　<th>Name</th>
　　　　　　<th>Marks</th>
　　　</tr>
　　　
　　　<tr　ng-repeat　=　"subject　in　student.subjects">
　　　　　　<td>{{　subject.name　}}</td>
　　　　　　<td>{{　subject.marks　}}</td>
　　　</tr>
</table>

输出结果

为了执行这个实例，你需要部署testAngularJS.htm，main.htm中，并subjects.htm到Web服务器。在网络浏览器中使用服务器的URL打开文件testAngularJS.htm，然后查看结果。

AngularJS Ajax AngularJS 表单

Tutorial básico de AngularJS

AngularJS 包含

Ejemplo en línea

tryAngularJS.htm

main.htm

subjects.htm