AngularJS 包含
在AngularJS 中，你可以在HTML 中包含HTML 文件。
在HTML 中包含HTML 文件
在HTML 中，目前還不支持包含HTML 文件的功能。
服務端包含
大多服務端腳本都支持包含文件功能(SSI： Server Side Includes)。
使用SSI, 你可在HTML 中包含HTML 文件，並發送到客戶端瀏覽器。
PHP 實例
<?php require("navigation.php"); ?>
客戶端包含
通過JavaScript 有很多種方式可以在HTML 中包含HTML 文件。
通常我們使用http 請求(AJAX) 從服務端獲取數據，返回的數據我們可以通過使用innerHTML 寫入到HTML 元素中。
AngularJS 包含
使用AngularJS, 你可以使用ng-include 指令來包含HTML 內容:
實例
<body><div> <div ng-include="'myUsers_List.htm'"></div> <div ng-include="'myUsers_Form.htm'"></div></div>
步驟如下：
步驟1: 創建HTML 列表
myUsers_List.html
<h1>用戶</h1><table> <thead><tr> <th>編輯</th> <th>名</th> <th>姓</th> </tr></thead> <tbody><tr ng-repeat="user in users"> <td> <button ng-click="editUser(user.id)"> <span></span>Edit </button> </td> <td>{{ user.fName }}</td> <td>{{ user.lName }}</td> </tr></tbody></table>運行結果：
用戶
| 編輯 | 名 | 姓 |
|---|---|---|
| {{ user.fName }} | {{ user.lName }} |
步驟2: 創建HTML 表單
myUsers_Form.html
<button ng-click="editUser('new')"><span></span>創建新用戶</button><hr><h3 ng-show="edit">創建新用戶:</h3><h3 ng-hide="edit">編輯用戶:</h3><form> <div> <label>名:</label> <div> <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名"> </div> </div> <div> <label>姓:</label> <div> <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓"> </div> </div> <div> <label>密碼:</label> <div> <input type="password" ng-model="passw1" placeholder="密碼"> </div> </div> <div> <label>重複密碼:</label> <div> <input type="password" ng-model="passw2" placeholder="重複密碼"> </div> </div></form><hr><button ng-disabled="error || incomplete"><span></span>保存</button>運行結果：
步驟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><head><meta charset="utf-8"><link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-app="myApp" ng-controller="userCtrl"><div> <div ng-include="'myUsers_List.htm'"></div> <div ng-include="'myUsers_Form.htm'"></div></div><script src= "myUsers.js"></script></body></html>
運行結果：
以上就是對AngularJS 包含資料的整理，希望能幫助AngularJS 編程的朋友。