Latest web development tutorials

يحتوي AngularJS

في AngularJS، يمكنك تضمين ملفات HTML في HTML.

أنه يحتوي على ملف HTML في HTML

في HTML، وهذا غير معتمد من قبل ملف HTML يحتوي على وظيفة.

يشمل الجانب الخدمي

وتشمل معظم ملامح دعم البرامج النصية من جانب الخادم ملف (SSI: جانب الخادم).

باستخدام مباحث أمن الدولة، قد يتم تضمينها في ملف HTML في HTML إرسالها إلى مستعرض العميل.

أمثلة PHP

<بى تتطلب ( "navigation.php" )؛؟>

يحتوي العميل

هناك العديد من الطرق التي يمكن أن تحتوي على جافا سكريبت ملف HTML في HTML.

وعادة ما نستخدم طلب HTTP (AJAX) للحصول على البيانات من الخادم، يمكن أن نكتب البيانات التي تم إرجاعها باستخدام HTML داخلي إلى عنصر HTML.

يحتوي AngularJS

استخدام AngularJS، يمكنك استخدام نانوغرام تشمل التوجيه لتضمين محتوى HTML:

أمثلة

<body>

<فئة الدرجة = "حاوية">
<div نانوغرام تشمل = "" myUsers_List.htm "> </ div>
<div نانوغرام تشمل = "" myUsers_Form.htm "> </ div>
</ div>

</ الجسم>

المضي قدما على النحو التالي:

الخطوة 1: إنشاء قوائم HTML

myUsers_List.html

<H3> الأعضاء </ H3>

<الجدول الطبقة = "الجدول table- مخطط">
<THEAD> <tr>
<ث> تحرير </ تشرين>
<ث> الاسم </ تشرين >
<ث> اسم العائلة </ تشرين >
</ tr> </ THEAD>
<TBODY> <TR-نانوغرام تكرار = "المستخدم في عدد مستخدمي">
<td>
<الطبقة زر = "BTN" نانوغرام -click = "editUser (user.id)">
<سبان الطبقة = "glyphicon glyphicon- قلم رصاص"> </ SPAN> & نبسب؛ & نبسب؛ تحرير
</ زر>
</ td>
<td> {{user.fName}} </ td>
<td> {{user.lName}} </ td>
</ tr> </ TBODY>
</ الجدول>

محاولة »

الخطوة 2: إنشاء نموذج HTML

myUsers_Form.html

<الطبقة زر = "BTN btn- نجاح" نانوغرام مزدوجا فوق = "editUser ( 'الجديد')">
<سبان الطبقة = "glyphicon glyphicon- المستخدم"> </ SPAN> إنشاء مستخدم جديد
</ زر>
<hr>

<H3 نانوغرام تظهر = "تحرير "> إنشاء مستخدم جديد: </ H3>
<H3 نانوغرام إخفاء = "تحرير "> تحرير المستخدم: </ H3>

<فئة النموذج = "شكل أفقي ">
<فئة الدرجة = "شكل فريق ">
<الطبقة تسمية = "عمود-ن خ -2 ضبط تسمية"> الاسم الأول: </ التسمية>
<div الطبقة = "عمود-خ -10">
<إدخال نوع = "نص" نانوغرام -model = "fName"، نانوغرام تعطيل = "! تحرير" نائبا = "الاسم الأول">
</ div>
</ div>
<فئة الدرجة = "شكل فريق ">
<تسمية الطبقة = "عمود-ن خ -2 ضبط تسمية"> اسم العائلة: </ التسمية>
<div الطبقة = "عمود-خ -10">
<إدخال نوع = "نص" نانوغرام -model = "lName"، نانوغرام تعطيل = "! تحرير" نائبا = "اسم العائلة">
</ div>
</ div>
<فئة الدرجة = "شكل فريق ">
<تسمية الطبقة = "عمود-ن خ -2 ضبط تسمية"> كلمة السر: </ التسمية>
<div الطبقة = "عمود-خ -10">
<إدخال نوع = "كلمة المرور" نانوغرام -model = "passw1" نائبا = "كلمة المرور">
</ div>
</ div>
<فئة الدرجة = "شكل فريق ">
<تسمية الطبقة = "عمود-ن خ -2 ضبط تسمية"> كرر: </ التسمية>
<div الطبقة = "عمود-خ -10">
<إدخال نوع = "كلمة المرور" نانوغرام -model = "passw2" نائبا = "كرر كلمة">
</ div>
</ div>
</ النموذج>

<hr>
<الطبقة زر = "BTN btn- نجاح" = "خطأ || غير مكتمل"، نانوغرام تعطيل>
<سبان الطبقة = "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 ;
  }
};
})

الخطوة 4: إنشاء الصفحة الرئيسية

myUsers.html

<! DOCTYPE HTML>
<HTML>
<وصلة يختلط = "أنماط" أ href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<سيناريو SRC = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </ script>

<الجسم نانوغرام التطبيق = "اسم التطبيق " نانوغرام تحكم = "userCtrl">

<فئة الدرجة = "حاوية">
<div نانوغرام تشمل = "" myUsers_List.htm "> </ div>
<div نانوغرام تشمل = "" myUsers_Form.htm "> </ div>
</ div>

<سيناريو SRC = "myUsers.js"> </ script>

</ الجسم>

</ HTML>

محاولة »