AngularJS contains


In AngularJS, you can include HTML files within HTML.

Including HTML files in HTML

The ability to include HTML files in HTML is not currently supported.

Server Side Includes

Most server side scripts support the include file function (SSI: Server Side Includes).

Using SSI, you can include HTML files in HTML and send it to the client browser.

PHP Example

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

Client-side inclusion

Via JavaScript There are many ways to include HTML files within HTML.

Usually we use http request (AJAX) to obtain data from the server. The returned data can be passed Use innerHTML to write to HTML elements.

AngularJS includes

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

Example

<body>

##<div class="container">
<div ng-include="'myUsers_List.htm'"></div>
<div ng-include="'myUsers_Form.htm'">< /div>
</div>

</body>
The steps are as follows:


Step 1: Create HTML list

Instance

<h3>用户</h3>

<table class="table table-striped">
  <thead><tr>
    <th>编辑</th>
    <th>名</th>
    <th>姓</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>

Run Instance»Click the "Run Instance" button to view the online instance

Step 2: Create HTML form

Example

<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>创建新用户
</button>
<hr>

<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">名:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
    </div>
  </div> 
  <div class="form-group">
    <label class="col-sm-2 control-label">姓:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">密码:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="密码">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">重复密码:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="重复密码">
    </div>
  </div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>保存
</button>

Run instance »

Click the "Run instance" button to view the online instance

步骤 3: 创建控制器

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.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;
  }
};
   })

步骤 4: 创建主页

实例

<!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="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" 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>

Run instance »

Click the "Run instance" button to view the online instance


←
→