AngularJS Tutorial（17）from w3school



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 >&nbsp;&nbsp;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 »