AngularJS 包含

HTML ne prend pas en charge l'intégration de pages HTML dans des pages HTML. Pour réaliser cette fonctionnalité, nous pouvons utiliser l'une des options suivantes-

Utilisation d'Ajax − effectuer des appels serveur pour obtenir la page HTML correspondante et la définir dans innerHTML du contrôle HTML.
Utilisation de l'inclusion serveur − JSP, PHP et d'autres technologies serveur Web peuvent inclure des pages HTML dans des pages dynamiques.

Avec AngularJS, nous pouvons utiliser ng-L'instruction include permet d'intégrer une page HTML dans une page HTML.

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

Exemple en ligne

tryAngularJS.htm

Exemple

<html>
　　　<head>
　　　　　　<title>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>AngularJS　Sample　Application</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:'物理',marks:70},
　　　　　　　　　　　　　　　　　　{name:'化学',marks:80},
　　　　　　　　　　　　　　　　　　{name:'数学',marks:65},
　　　　　　　　　　　　　　　　　　{name:'英语',marks:75},
　　　　　　　　　　　　　　　　　　{name:'语文',marks:67}
　　　　　　　　　　　　　　　],
　　　　　　　　　　　　　　　fullName:　function()　{
　　　　　　　　　　　　　　　　　　var　studentObject;
　　　　　　　　　　　　　　　　　　studentObject　=　$scope.student;
　　　　　　　　　　　　　　　　　　return　studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　};
　　　　　　　　　);
　　　　　　</script>
　　　　　　
　　　</body>
</html>

测试看看‹/›

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 表单

Tutoriel de base AngularJS

AngularJS 包含

Exemple en ligne

tryAngularJS.htm

main.htm

subjects.htm