AngularJS contains
In AngularJS, you can include HTML files in HTML.
Include HTML files in HTML
In HTML, the functionality that contains HTML files is not currently supported.
The server contains
Most server-side scripts support the include file function (SSI: Server Side Includes).
Using SSI, you can include HTML files in HTML and send them to the client browser.
PHP instance
<?php requires("navigation.php"); ?>
Client includes
There are many ways to include HTML files in HTML with JavaScript.
Usually we use http request (AJAX) to get data from the server, and we can write the returned data into HTML elements by using innerHTML.
AngularJS contains
Using AngularJS, you can use the ng-include directive to include HTML content:
Example
<body><div> <div ng-include="'myUsers_List.htm'"></div> <div ng-include="'myUsers_Form.htm'"></div></div>
The steps are as follows:
Step 1: Create an HTML list
myUsers_List.html
<h1>User</h1><table> <thead><tr> <th>Edit</th> <th>Name</th> <th>Name</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>Running results:
user
| edit | name | surname |
|---|---|---|
| {{ user.fName }} | {{ user.lName }} |
Step 2: Create HTML Form
myUsers_Form.html
<button ng-click="editUser('new')"><span></span>Create a new user</button><hr><h3 ng-show="edit">Create a new user:</h3><h3 ng-hide="edit">Editor user:</h3><form> <div> <label>Name:</label> <div> <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="name"> </div> </div> <div> <label>Subject:</label> <div> <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last"> </div> </div> <div> <label>Password:</label> <div> <input type="password" ng-model="passw1" placeholder="password"> </div> </div> <div> <label>Repeat password:</label> <div> <input type="password" ng-model="passw2" placeholder="repeat password"> </div> </div> </form><hr><button ng-disabled="error || incomplete"><span></span>Save</button>Running results:
Step 3: Create a Controller
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.$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; }};})Step 4: Create a home page
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>
Running results:
The above is a compilation of AngularJS information. I hope it can help AngularJS programming friends.