AngularJS มี
ใน AngularJS คุณสามารถรวมไฟล์ HTML ใน HTML
มันมีไฟล์ HTML ใน HTML
ใน HTML นี้ไม่ได้รับการสนับสนุนโดยไฟล์ HTML ที่มีฟังก์ชั่น
ด้านบริการรวม
ส่วนใหญ่คุณสมบัติสนับสนุนสคริปต์ฝั่งเซิร์ฟเวอร์รวมไฟล์ (SSI: ฝั่งเซิร์ฟเวอร์รวม)
ใช้ SSI คุณอาจจะรวมอยู่ในไฟล์ HTML ใน HTML ที่ส่งไปยังเบราว์เซอร์ของลูกค้า
ตัวอย่าง PHP
<? PHP ต้อง ( "navigation.php" );?>
ไคลเอนต์ประกอบด้วย
มีหลายวิธี JavaScript สามารถมีไฟล์ HTML ใน HTML มี
เรามักจะใช้การร้องขอ HTTP (อาแจกซ์) ที่จะได้รับข้อมูลจากเซิร์ฟเวอร์ที่เราสามารถเขียนข้อมูลที่ส่งกลับโดยใช้ innerHTML กับองค์ประกอบของ HTML
AngularJS มี
ใช้ AngularJS คุณสามารถใช้ NG-รวมถึงคำสั่งที่จะรวมเนื้อหา HTML:
ตัวอย่าง
<body>
<ระดับ Div = "ภาชนะ">
<div NG-รวม = " ' myUsers_List.htm'"> </ div>
<div NG-รวม = " ' myUsers_Form.htm'"> </ div>
</ div>
</ body>
<ระดับ Div = "ภาชนะ">
<div NG-รวม = " ' myUsers_List.htm'"> </ div>
<div NG-รวม = " ' myUsers_Form.htm'"> </ div>
</ div>
</ body>
ดำเนินการดังนี้
ขั้นตอนที่ 1: สร้างรายการ HTML
myUsers_List.html
<h3> ผู้ใช้ </ h3>
<ตารางเรียน = "ตาราง table- ลาย">
<thead> <tr>
<Th> แก้ไข </ TH>
<Th> ชื่อ </ TH >
<Th> นามสกุล </ TH >
</ tr> </ thead>
<TBODY> <TR NG-ซ้ำ = "ของผู้ใช้ในผู้ใช้">
<td>
<ระดับปุ่ม = "BTN" NG -click = "editUser (user.id)">
<span class = "glyphicon glyphicon- ดินสอ"> </ span> & nbsp; & nbsp; แก้ไข
</ ปุ่ม>
</ td>
<td> {{user.fName}} </ td>
<td> {{user.lName}} </ td>
</ tr> </ tbody>
</ table>
<ตารางเรียน = "ตาราง table- ลาย">
<thead> <tr>
<Th> แก้ไข </ TH>
<Th> ชื่อ </ TH >
<Th> นามสกุล </ TH >
</ tr> </ thead>
<TBODY> <TR NG-ซ้ำ = "ของผู้ใช้ในผู้ใช้">
<td>
<ระดับปุ่ม = "BTN" NG -click = "editUser (user.id)">
<span class = "glyphicon glyphicon- ดินสอ"> </ span> & nbsp; & nbsp; แก้ไข
</ ปุ่ม>
</ td>
<td> {{user.fName}} </ td>
<td> {{user.lName}} </ td>
</ tr> </ tbody>
</ table>
ลอง»
ขั้นตอนที่ 2: สร้างรูปแบบ HTML ไป
myUsers_Form.html
<ระดับปุ่ม = "btn- btn ความสำเร็จ" NG-คลิก = "editUser ( 'ใหม่')">
<span class = "glyphicon glyphicon- ผู้ใช้"> </ span> สร้างผู้ใช้ใหม่
</ ปุ่ม>
<hr>
<H3 NG-แสดง = "แก้ไข "> สร้างผู้ใช้ใหม่: </ h3>
<H3 NG-ซ่อน = "แก้ไข "> แก้ไขผู้ใช้: </ h3>
<แบบฟอร์มคลาส = "รูปแบบแนวนอน ">
<ระดับ Div = "รูปแบบกลุ่ม ">
<ระดับฉลาก = "Col-SM -2 ควบคุมฉลาก"> ชื่อจริง: </ label>
<div class = "Col-SM -10">
<ประเภทขาเข้า = "text" NG -model = "fName" NG-พิการ = "! แก้ไข" ยึด = "ชื่อจริง">
</ div>
</ div>
<ระดับ Div = "รูปแบบกลุ่ม ">
<label class = "Col-SM -2 ควบคุมฉลาก"> นามสกุล: </ label>
<div class = "Col-SM -10">
<ประเภทขาเข้า = "text" NG -model = "lname" NG-พิการ = "! แก้ไข" ยึด = "นามสกุล">
</ div>
</ div>
<ระดับ Div = "รูปแบบกลุ่ม ">
<label class = "Col-SM -2 ควบคุมฉลาก"> รหัสผ่าน: </ label>
<div class = "Col-SM -10">
<input type = "รหัสผ่าน" NG -model = "passw1" ยึด = "รหัสผ่าน">
</ div>
</ div>
<ระดับ Div = "รูปแบบกลุ่ม ">
<label class = "Col-SM -2 ควบคุมฉลาก"> ทำซ้ำ: </ label>
<div class = "Col-SM -10">
<input type = "รหัสผ่าน" NG -model = "passw2" ยึด = "ทำซ้ำรหัสผ่าน">
</ div>
</ div>
</ form>
<hr>
<ระดับปุ่ม = "btn btn- ความสำเร็จ" NG-พิการ = "ข้อผิดพลาดที่ไม่สมบูรณ์ ||">
<span class = "glyphicon glyphicon- บันทึก"> </ span> บันทึกการเปลี่ยนแปลง
</ ปุ่ม>
<span class = "glyphicon glyphicon- ผู้ใช้"> </ span> สร้างผู้ใช้ใหม่
</ ปุ่ม>
<hr>
<H3 NG-แสดง = "แก้ไข "> สร้างผู้ใช้ใหม่: </ h3>
<H3 NG-ซ่อน = "แก้ไข "> แก้ไขผู้ใช้: </ h3>
<แบบฟอร์มคลาส = "รูปแบบแนวนอน ">
<ระดับ Div = "รูปแบบกลุ่ม ">
<ระดับฉลาก = "Col-SM -2 ควบคุมฉลาก"> ชื่อจริง: </ label>
<div class = "Col-SM -10">
<ประเภทขาเข้า = "text" NG -model = "fName" NG-พิการ = "! แก้ไข" ยึด = "ชื่อจริง">
</ div>
</ div>
<ระดับ Div = "รูปแบบกลุ่ม ">
<label class = "Col-SM -2 ควบคุมฉลาก"> นามสกุล: </ label>
<div class = "Col-SM -10">
<ประเภทขาเข้า = "text" NG -model = "lname" NG-พิการ = "! แก้ไข" ยึด = "นามสกุล">
</ div>
</ div>
<ระดับ Div = "รูปแบบกลุ่ม ">
<label class = "Col-SM -2 ควบคุมฉลาก"> รหัสผ่าน: </ label>
<div class = "Col-SM -10">
<input type = "รหัสผ่าน" NG -model = "passw1" ยึด = "รหัสผ่าน">
</ div>
</ div>
<ระดับ Div = "รูปแบบกลุ่ม ">
<label class = "Col-SM -2 ควบคุมฉลาก"> ทำซ้ำ: </ label>
<div class = "Col-SM -10">
<input type = "รหัสผ่าน" NG -model = "passw2" ยึด = "ทำซ้ำรหัสผ่าน">
</ div>
</ div>
</ form>
<hr>
<ระดับปุ่ม = "btn btn- ความสำเร็จ" NG-พิการ = "ข้อผิดพลาดที่ไม่สมบูรณ์ ||">
<span class = "glyphicon glyphicon- บันทึก"> </ span> บันทึกการเปลี่ยนแปลง
</ ปุ่ม>
ลอง»
ขั้นตอนที่ 3: สร้างตัวควบคุม
myUsers.js
angular.module( 'myApp' , []).controller( 'userCtrl' , function ($scope) {
$scope.fName = '' ;
$scope.lName = '' ;
$scope.passw1 = '' ;
$scope.passw2 = '' ;
$scope.users = [
{id: 1 , fName: 'Hege' ,lName: "Pege" },
{id: 2 , fName: 'Kim' ,lName: "Pim" },
{id: 3 , fName: 'Sal' ,lName: "Smith" },
{id: 4 , fName: 'Jack' ,lName: "Jones" },
{id: 5 , fName: 'John' ,lName: "Doe" },
{id: 6 , fName: 'Peter' ,lName: "Pan" }
];
$scope.edit = true ;
$scope.error = false ;
$scope.incomplete = false ;
$scope.editUser = function (id) {
if (id == 'new' ) {
$scope.edit = true ;
$scope.incomplete = true ;
$scope.fName = '' ;
$scope.lName = '' ;
} else {
$scope.edit = false ;
$scope.fName = $scope.users[id-1].fName;
$scope.lName = $scope.users[id-1].lName;
}
};
$scope.$watch( 'passw1' , function () {$scope.test();});
$scope.$watch( 'passw2' , function () {$scope.test();});
$scope.$watch( 'fName' , function () {$scope.test();});
$scope.$watch( 'lName' , function () {$scope.test();});
$scope.test = function () {
if ($scope.passw1 !== $scope.passw2) {
$scope.error = true ;
} else {
$scope.error = false ;
}
$scope.incomplete = false ;
if ($scope.edit && (!$scope.fName.length ||
!$scope.lName.length ||
!$scope.passw1.length || !$scope.passw2.length)) {
$scope.incomplete = true ;
}
};
})
$scope.fName = '' ;
$scope.lName = '' ;
$scope.passw1 = '' ;
$scope.passw2 = '' ;
$scope.users = [
{id: 1 , fName: 'Hege' ,lName: "Pege" },
{id: 2 , fName: 'Kim' ,lName: "Pim" },
{id: 3 , fName: 'Sal' ,lName: "Smith" },
{id: 4 , fName: 'Jack' ,lName: "Jones" },
{id: 5 , fName: 'John' ,lName: "Doe" },
{id: 6 , fName: 'Peter' ,lName: "Pan" }
];
$scope.edit = true ;
$scope.error = false ;
$scope.incomplete = false ;
$scope.editUser = function (id) {
if (id == 'new' ) {
$scope.edit = true ;
$scope.incomplete = true ;
$scope.fName = '' ;
$scope.lName = '' ;
} else {
$scope.edit = false ;
$scope.fName = $scope.users[id-1].fName;
$scope.lName = $scope.users[id-1].lName;
}
};
$scope.$watch( 'passw1' , function () {$scope.test();});
$scope.$watch( 'passw2' , function () {$scope.test();});
$scope.$watch( 'fName' , function () {$scope.test();});
$scope.$watch( 'lName' , function () {$scope.test();});
$scope.test = function () {
if ($scope.passw1 !== $scope.passw2) {
$scope.error = true ;
} else {
$scope.error = false ;
}
$scope.incomplete = false ;
if ($scope.edit && (!$scope.fName.length ||
!$scope.lName.length ||
!$scope.passw1.length || !$scope.passw2.length)) {
$scope.incomplete = true ;
}
};
})
ขั้นตอนที่ 4: สร้างโฮมเพจ
myUsers.html
<! DOCTYPE html>
<html>
<link rel = "สไตล์ชีต" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </ script>
<body NG-App = "MyApp " NG-ควบคุม = "userCtrl">
<ระดับ Div = "ภาชนะ">
<div NG-รวม = " ' myUsers_List.htm'"> </ div>
<div NG-รวม = " ' myUsers_Form.htm'"> </ div>
</ div>
<script src = "myUsers.js"> </ script>
</ body>
</ html>
<html>
<link rel = "สไตล์ชีต" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </ script>
<body NG-App = "MyApp " NG-ควบคุม = "userCtrl">
<ระดับ Div = "ภาชนะ">
<div NG-รวม = " ' myUsers_List.htm'"> </ div>
<div NG-รวม = " ' myUsers_Form.htm'"> </ div>
</ div>
<script src = "myUsers.js"> </ script>
</ body>
</ html>
ลอง»