تضمين AngularJS

HTML لا يدعم تضمين صفحة HTML في صفحة HTML. لتحقيق هذا، يمكننا استخدام أحد الخيارات التالية -

باستخدام Ajax − تنفيذ استدعاء خادمي لجلب الصفحة HTML المطلوبة، وتعيينها في innerHTML لمكون HTML.
باستخدام التضمين على الجهاز الخادم − JSP، PHP وأجهزة التخزين على الإنترنت يمكنها تضمين صفحة HTML في الصفحات الديناميكية.

باستخدام AngularJS، يمكننا استخدام تعليمات ng-include لضم صفحة HTML في صفحة HTML.

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

مثال على الإنترنت

tryAngularJS.htm

مثال

<html>
　　　<head>
　　　　　　<title>Angular JS مع أمثلة</title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　　　　<style>
　　　　　　　　　طاولة، th، td {
　　　　　　　　　　　　حاشية: 1px ثابتة أفقية أبيض;
　　　　　　　　　　　　كسور: انهيار;
　　　　　　　　　　　　حجم: 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>الاسم:　</td>
　　　　　　<td>{{student.fullName()}}</td>
　　　</tr>
</table>

subjects.htm

<p>المواضيع:</p>
<table>
　　　<tr>
　　　　　　<th>اسم</th>
　　　　　　<th>نقاط</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إلى خادم الويب. افتح ملف باستخدام عنوان URL للخادم في متصفح الويب.testAngularJS.htm، ثم عرض النتائج.

Ajax لـ AngularJS نماذج AngularJS

دليل AngularJS الأساسي

تضمين AngularJS

مثال على الإنترنت

tryAngularJS.htm

main.htm

subjects.htm