AngularJS contient


Dans AngularJS, vous pouvez inclure des fichiers HTML dans HTML.

Inclure des fichiers HTML dans HTML

L'inclusion de fichiers HTML dans HTML n'est actuellement pas prise en charge.

Inclure côté serveur

La plupart des scripts côté serveur prennent en charge la fonction d'inclusion de fichier (SSI : Inclut côté serveur).

En utilisant SSI, vous pouvez inclure des fichiers HTML dans HTML et les envoyer au navigateur client.

Instance PHP

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

Inclusions côté client

Via JavaScript Il existe de nombreuses façons d'inclure des fichiers HTML dans HTML.

Habituellement, nous utilisons la requête http (AJAX) pour obtenir les données du serveur. Les données renvoyées peuvent être transmises. Utilisez innerHTML pour écrire dans des éléments HTML.

AngularJS inclut

Avec AngularJS, vous pouvez utiliser la directive ng-include pour inclure du contenu HTML :

Exemple

<corps>

<div class="conteneur">
<div ng-include="'myUsers_List.htm'"></div>
<div ng-include="'myUsers_Form.htm'">< ; /div>
</div>

</body>

Les étapes sont les suivantes :

Étape 1 : Créer une liste HTML

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>

Exécuter l'instance»

Cliquez sur « Exécuter l'instance " bouton pour afficher l'instance en ligne

Étape 2 : Créer un formulaire HTML

Instance

<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>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

步骤 3 : 创建控制器

myUsers.js

angulaire.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName    = '';
$scope.lName = '';
$scope.passw1 = '';
$scope. passw2 = '';
   $scope.users = [
{id:1, fName:'Hege',lName:"Pege" },
{id :2, fNom :'Kim',lNom :"Pim"    },
{id :3, fName :'Sal',lName :"Smith" },
{id: 4, fNom :'Jack',lNom :"Jones"    },
{id :5, fName :'John',lName :"Doe" },
{id: 6, fNom :'Pierre',lNom :"Pan"    }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete    = faux;
$scope.editUser = function(id) {
  if (id == 'new') {
    $scope. modifier    = true;
    $scope.incomplete = true;
    $scope.fName = '';
    $scope.lName =    '';
    } else {
    $scope.edit = false;
    $scope.fName = $scope.users[ id-1].fNom;
          $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>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne