您的位置：首页 > Web前端 > AngularJS

AngularJS Tutorial（17）from w3school

2015-08-04 09:30 615 查看

With AngularJS, you can include HTML files in HTML.

HTML Includes in Future HTML

Including a portion of HTML in HTML is, unfortunately, not (yet) supported by HTML.

HTML imports is a W3C suggestion http://www.w3.org for future versions of HTML:

<link
rel="import"
href="/path/navigation.html">

Server Side Includes

Most web servers support Server Side Includes (SSI).

With SSI, you can include HTML in HTML before the page is sent to the browser.

PHP Example

<?php
require("navigation.php"); ?>

Client Side Includes

There are many ways to use JavaScript to include HTML in HTML.

The most common way, is to use an http request (AJAX) to fetch data from a server, and then write the data to the
innerHTML of an HTML element.

AngularJS Side Includes

With AngularJS, you can include HTML content, using the ng-include directive:

Example

<body>

<div
class="container">

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

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

</div>

</body>

Try it Yourself »
Below is a 3 step introduction.

Step 1: Create the HTML List

myUsers_List.html

<h3>Users</h3>

<table
class="table table-striped">

<thead><tr>

<th>Edit</th>

<th>First Name</th>

<th>Last Name</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>

Try it Yourself »

Step 2: Create the HTML Form

myUsers_Form.html

<button
class="btn btn-success"
ng-click="editUser('new')">

<span
class="glyphicon glyphicon-user"></span> Create New User

</button>

<hr>

<h3
ng-show="edit">Create New User:</h3>

<h3
ng-hide="edit">Edit User:</h3>

<form
class="form-horizontal">

<div
class="form-group">

<label
class="col-sm-2 control-label">First Name:</label>

<div
class="col-sm-10">

<input
type="text" ng-model="fName"
ng-disabled="!edit"
placeholder="First Name">

</div>

</div>

<div
class="form-group">

<label
class="col-sm-2 control-label">Last Name:</label>

<div
class="col-sm-10">

<input
type="text" ng-model="lName"
ng-disabled="!edit"
placeholder="Last Name">

</div>

</div>

<div
class="form-group">

<label
class="col-sm-2 control-label">Password:</label>

<div
class="col-sm-10">

<input
type="password" ng-model="passw1"
placeholder="Password">

</div>

</div>

<div
class="form-group">

<label
class="col-sm-2 control-label">Repeat:</label>

<div
class="col-sm-10">

<input
type="password" ng-model="passw2"
placeholder="Repeat Password">

</div>

</div>

</form>

<hr>

<button
class="btn btn-success"
ng-disabled="error || incomplete">

<span
class="glyphicon glyphicon-save"></span> Save Changes

</button>

Try it Yourself »

Step 3: Create the Main Page

myUsers.html

<!DOCTYPE
html>

<html
ng-app="">

<link
rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<script
src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

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

Try it Yourself »

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航