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"); 🎜>>
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 termasukDengan AngularJS, anda boleh menggunakan arahan
ng-includeuntuk 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: <
div kelas="bekas"> <
div ng-include="'myUsers_List.htm'"></div> <
div ng-include="'myUsers_Form.htm'">< ; /div><
/div>
<
/badan>
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
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;
}
};
})
$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>
Jalankan contoh »
Klik butang "Jalankan contoh" untuk melihat contoh dalam talian