AngularJS中的包含詳細介紹及實現樣本

AngularJS中的包含詳細介紹及實現樣本_AngularJS

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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 class="container"> <div ng-include="'myUsers_List.htm'"></div> <div ng-include="'myUsers_Form.htm'"></div></div>

步驟如下：

步驟 1: 建立 HTML 列表

myUsers_List.html

<h1>使用者</h1><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>

運行結果：

使用者

編輯	名	姓
Edit	{{ user.fName }}	{{ user.lName }}

步驟 2: 建立 HTML 表單

myUsers_Form.html

<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>

運行結果：

步驟 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 class="container"> <div ng-include="'myUsers_List.htm'"></div> <div ng-include="'myUsers_Form.htm'"></div></div><script src= "myUsers.js"></script></body></html>

運行結果：

以上就是對AngularJS 包含資料的整理，希望能協助AngularJS 編程的朋友。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More