Latest web development tutorials

AngularJS contient

Dans AngularJS, vous pouvez inclure des fichiers HTML au format HTML.

Il contient le fichier HTML au format HTML

En HTML, cela est pas pris en charge par le fichier HTML contenant la fonction.

Côté service comprend

La plupart des fonctions de support de script côté serveur incluent le fichier (SSI: Server Side Includes).

Utilisation de SSI, vous pouvez être inclus dans le fichier HTML dans le code HTML envoyé au navigateur client.

Des exemples de PHP

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

client contient

Il existe de nombreuses façons par JavaScript peuvent contenir fichier HTML dans le code HTML.

Habituellement , nous utilisons requête http (AJAX) pour obtenir des données à partir du serveur, on peut écrire les données renvoyées en utilisant innerHTML à l'élément HTML.

AngularJS contient

Utilisez AngularJS, vous pouvez utiliser ng-incluez directive pour inclure le contenu HTML:

Exemples

<Body>

<Class Div = "container">
<Div ng-include = " ' myUsers_List.htm'"> </ div>
<Div ng-include = " ' myUsers_Form.htm'"> </ div>
</ Div>

</ Body>

Procédez comme suit:

Étape 1: Créer des listes HTML

myUsers_List.html

<H3> Utilisateurs </ h3>

<Table class = "Table- Table rayée">
<Thead> <tr>
<Th> Modifier </ th>
<Th> Prénom </ th >
<Th> Nom </ th >
</ Tr> </ thead>
<TBODY> <tr ng-repeat = "user utilisateurs">
<Td>
<Classe Button = "btn" ng -cliquez = "editUser (user.id)">
<Span class = "glyphicon glyphicon- crayon"> </ span> & nbsp; & nbsp; Modifier
</ Button>
</ Td>
<Td> {{user.fName}} </ td>
<Td> {{user.lName}} </ td>
</ Tr> </ tbody>
</ Table>

Essayez »

Étape 2: Création d'un formulaire HTML

myUsers_Form.html

<Classe Button = "btn btn- succès" ng-cliquez sur = "editUser ( 'new')">
<Span class = "glyphicon glyphicon- utilisateur"> </ span> Créer un nouvel utilisateur
</ Button>
<Hr>

<H3 ng-show = "modifier "> Créer un nouvel utilisateur: </ h3>
<H3 ng-hide = "modifier "> Modifier l' utilisateur: </ h3>

<Classe Form = "form-horizontal ">
<Class Div = "form-groupe ">
<Classe Label = "col-sm -2 contrôle-label"> Prénom: </ label>
<Class Div = "col-sm -10">
<Input type = "text" ng -modèle = "fName" ng-disabled = "! Edit" espace réservé = "Prénom">
</ Div>
</ Div>
<Class Div = "form-groupe ">
<Classe Label = "col-sm -2 contrôle-label"> Nom: </ label>
<Class Div = "col-sm -10">
<Input type = "text" ng -modèle = "lName" ng-disabled = "! Edit" espace réservé = "Nom">
</ Div>
</ Div>
<Class Div = "form-groupe ">
<Classe Label = "col-sm -2 commande label"> Mot de passe: </ label>
<Class Div = "col-sm -10">
<Input type = "password" ng -modèle = "passw1" espace réservé = "Mot de passe">
</ Div>
</ Div>
<Class Div = "form-groupe ">
<Classe Label = "col-sm -2 commande label"> Répétition: </ label>
<Class Div = "col-sm -10">
<Input type = "password" ng -modèle = "passw2" espace réservé = "Mot de passe Répéter">
</ Div>
</ Div>
</ Form>

<Hr>
<Classe Button = "btn btn- succès" ng-disabled = "erreur || incomplète">
<Span class = "glyphicon glyphicon- sauver"> </ span> Enregistrer les modifications
</ Button>

Essayez »

Étape 3: Créer 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.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 ;
  }
};
})

Étape 4: Créer une page d'accueil

myUsers.html

<! DOCTYPE html>
<Html>
<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-app = "myApp ng-contrôleur" = "userCtrl">

<Class Div = "container">
<Div ng-include = " ' myUsers_List.htm'"> </ div>
<Div ng-include = " ' myUsers_Form.htm'"> </ div>
</ Div>

<Script src = "myUsers.js"> </ script>

</ Body>

</ Html>

Essayez »