AngularJS Includes
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>
Below is a 3 step introduction.
Step 1: Create the HTML List
myUsers_List.html
<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>
Step 3: Create the Main Page
myUsers.html
<!DOCTYPE html>
<html ng-app="">
<head>
<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.2.26/angular.min.js"></script>
</head>
<body ng-controller="userController">
<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>
Color Picker
