AngularJS mengandungi

Dalam AngularJS, anda boleh memasukkan fail HTML dalam HTML.

Termasuk fail HTML dalam HTML

Termasuk fail HTML dalam HTML tidak disokong pada masa ini.

Termasuk Bahagian Pelayan

Kebanyakan skrip sebelah pelayan menyokong fungsi fail sertakan (SSI: Termasuk Bahagian Pelayan).

Menggunakan SSI, anda boleh memasukkan fail HTML dalam HTML dan menghantarnya ke penyemak imbas klien.

Instance PHP

<?php memerlukan("navigation.php"); 🎜>>

Termasuk Sisi Pelanggan

Melalui JavaScript Terdapat banyak cara untuk memasukkan fail HTML dalam HTML.

Biasanya kami menggunakan permintaan http (

AJAX

) untuk mendapatkan data daripada pelayan Data yang dikembalikan boleh dihantar Gunakan innerHTML untuk menulis pada elemen HTML.

AngularJS termasuk

Dengan AngularJS, anda boleh menggunakan arahan

ng-include

untuk memasukkan kandungan HTML:

Contoh

badan>
<
div kelas="bekas"> <
div ng-include="'myUsers_List.htm'"></div> <
div ng-include="'myUsers_Form.htm'">< ; /div><
/div>
<
/badan>

Langkah-langkahnya adalah seperti berikut:

Langkah 1: Buat Senarai HTML

Instance

<h3>用户</h3>

<table class="table table-striped">
  <thead><tr>
    <th>编辑</th>
    <th>名</th>
    <th>姓</th>
  </tr></thead>
  <tbody><tr ng-repeat="user in users">
    <td>
      <button class="btn" ng-click="editUser(user.id)">
        <span class="glyphicon glyphicon-pencil"></span>  Edit
      </button>
    </td>
    <td>{{ user.fName }}</td>
    <td>{{ user.lName }}</td>
  </tr></tbody>
</table>

Run Instance»
Klik "Run Instance butang " untuk melihat contoh dalam talian

Langkah 2: Cipta borang HTML

Instance

<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>创建新用户
</button>
<hr>

<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">名:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
    </div>
  </div> 
  <div class="form-group">
    <label class="col-sm-2 control-label">姓:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">密码:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="密码">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">重复密码:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="重复密码">
    </div>
  </div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>保存
</button>

Jalankan contoh »

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

步骤 3: 创建控制器

myUsers.js

angular.module('myApp', []).controller('userCtrl', function($skop) {
$scope.fName = '';
$skop.lNama = '';
$skop.passw1 = '';
$skop. passw2 = '';
$scope.users = [
{id:1, fName:'Hege',lName:"Pege" },
{id :2, fNama:'Kim',lNama:"Pim" },
{id:3, fNama:'Sal',lNama:"Smith" },
{id: 4, fNama:'Jack',lNama:"Jones" },
{id:5, fNama:'John',lNama:"Doe" },
{id: 6, fNama:'Peter',lNama:"Pan" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = palsu;
$scope.editUser = fungsi(id) {
jika (id == 'baharu') {
    $skop. edit = benar;
    $scope.incomplete = true;
    $scope.fName = '';
    $scope.lName = '';
    } lain {
    $scope.edit = false;
    $scope.fName = $scope.users[ id-1].fNama;
     $scope.lName = $scope.users[id-1].lName;
}
};

$skop.$watch('passw1',fungsi() {$scope.test();});
$scope.$watch('passw2',fungsi() {$scope.test();});
$scope.$watch('fName',fungsi() {$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: 创建主页

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>

<script src= "myUsers.js"></script>

</body>
</html>