Home > Developer > Web Develop
With Angularjs, you can include other HTML files in the HTML.
Include other HTML files in HTML?The current HTML document does not yet support this feature. However, it is recommended that the HTML imports feature be added in subsequent HTML versions to support the inclusion of other HTML files in the HTML.
Include files on the server side<rel= "import" href= "/path/navigation.html">
Most Web servers support service-side Include files (server side Includes). By using SSI, you can include HTML files in an HTML document before the page is sent to the client browser. For example, the following line of PHP code:
require ("navigation.php");?>With JavaScript, there are a number of ways we can add HTML files to an HTML document.
The most common approach is to use Ajax, which is to get the data from the server through an asynchronous HTTP request, and then dynamically output the content to an HTML element in the form of InnerHTML .
Include Files in AngularjsIn Angularjs, you can use the ng-include directive to add HTML files to an HTML document:
<Body><Divclass= "Container"> <DivNg-include= "' myusers_list.htm '"></Div> <DivNg-include= "' myusers_form.htm '"></Div></Div></Body>
Here are three steps to complete the above page.
First step: Create a myusers_list.htm file<H3>Users</H3><Tableclass= "Table table-striped"> <thead><TR> <th>Edit</th> <th>First Name</th> <th>Last Name</th> </TR></thead> <tbody><TRng-repeat= "User in users"> <TD> <Buttonclass= "BTN"Ng-click= "Edituser (user.id)"> <spanclass= "Glyphicon glyphicon-pencil"></span> Edit</Button> </TD> <TD>{{User.fname}}</TD> <TD>{{User.lname}}</TD> </TR></tbody></Table> Part II: Creating a myusers_form.htm file
<Buttonclass= "Btn btn-success"Ng-click= "Edituser (' new ')"> <spanclass= "Glyphicon glyphicon-user"></span>Create New User</Button><HR><H3Ng-show= "Edit">Create New User:</H3><H3Ng-hide= "Edit">Edit User:</H3><formclass= "Form-horizontal"><Divclass= "Form-group"> <labelclass= "Col-sm-2 Control-label">First Name:</label> <Divclass= "Col-sm-10"> <inputtype= "text"Ng-model= "FName"ng-disabled= "!edit"placeholder= "First Name"> </Div></Div> <Divclass= "Form-group"> <labelclass= "Col-sm-2 Control-label">Last Name:</label> <Divclass= "Col-sm-10"> <inputtype= "text"Ng-model= "LName"ng-disabled= "!edit"placeholder= "Last Name"> </Div></Div><Divclass= "Form-group"> <labelclass= "Col-sm-2 Control-label">Password:</label> <Divclass= "Col-sm-10"> <inputtype= "Password"Ng-model= "PASSW1"placeholder= "Password"> </Div></Div><Divclass= "Form-group"> <labelclass= "Col-sm-2 Control-label">Repeat:</label> <Divclass= "Col-sm-10"> <inputtype= "Password"Ng-model= "PASSW2"placeholder= "Repeat Password"> </Div></Div></form><HR><Buttonclass= "Btn btn-success"ng-disabled= "error | | incomplete"> <spanclass= "Glyphicon glyphicon-save"></span>Save Changes</Button> Part III: Creating a Master File
<!DOCTYPE HTML><HTMLNg-app=""><Linkrel= "stylesheet"href= "Http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><Scriptsrc= "Http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></Script><BodyNg-controller= "Userctrl"><Divclass= "Container"><DivNg-include= "' myusers_list.htm '"></Div><DivNg-include= "' myusers_form.htm '"></Div></Div><Scriptsrc= "Myusers.js"></Script></Body></HTML>Previous chapter-Angularjs Quick Start Guide 16:bootstrap Next chapter-Angularjs Quick Start Guide 18:application
Angularjs Quick Start Guide 17:includes
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
