包含AngularJS

HTML non supporta l'inclusione di pagine HTML in pagine HTML. Per implementare questa funzione, possiamo utilizzare una delle seguenti opzioni:

Utilizzo di Ajax − effettuare chiamate server per ottenere la pagina HTML pertinente e impostarla nel.innerHTML del componente HTML.
Utilizzo dell'inclusione server-side − JSP, PHP e altre tecnologie server-side web possono includere pagine HTML nelle pagine dinamiche.

Utilizzando AngularJS, possiamo utilizzare l'istruzione ng-include per incorporare una pagina HTML in una pagina HTML.

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

Esempio online

tryAngularJS.htm

Esempio

<html>
　　　<head>
　　　　　　<title>Angular JS include esempi</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>Applicazione di esempio 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:'Chimica',marks:80},
　　　　　　　　　　　　　　　　　　{name:'Matematica',marks:65},
　　　　　　　　　　　　　　　　　　{name:'Inglese',marks:75},
　　　　　　　　　　　　　　　　　　{name:'Lingua cinese',marks:67}
　　　　　　　　　　　　　　　],
　　　　　　　　　　　　　　　fullName: function() {
　　　　　　　　　　　　　　　　　　var studentObject;
　　　　　　　　　　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　　　　　　　　　　return studentObject.firstName + " " + studentObject.lastName;
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　};
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

Testa e vedi‹/›

main.htm

<table border="0">
　　　<tr>
　　　　　　<td>Inserisci il nome:</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，然后查看结果。

AjaxAngularJS 表单AngularJS

Tutorial di base AngularJS

包含AngularJS

Esempio online

tryAngularJS.htm

main.htm

subjects.htm