Angularjs contient
Dans AngularJS, vous pouvez inclure des fichiers HTML dans HTML.
Inclure des fichiers HTML dans HTML
Dans HTML, la fonctionnalité contenant des fichiers HTML n'est pas actuellement prise en charge.
Le serveur contient
La plupart des scripts côté serveur prennent en charge la fonction de fichier inclue (SSI: côté serveur comprend).
En utilisant SSI, vous pouvez inclure des fichiers HTML dans HTML et les envoyer au navigateur client.
Instance PHP
<? Php nécessite ("navigation.php"); ?>
Le client comprend
Il existe de nombreuses façons d'inclure des fichiers HTML dans HTML avec JavaScript.
Habituellement, nous utilisons la demande HTTP (AJAX) pour obtenir des données du serveur, et nous pouvons écrire les données renvoyées dans des éléments HTML en utilisant InnerHTML.
Angularjs contient
En utilisant AngularJS, vous pouvez utiliser la directive NG-include pour inclure le contenu HTML:
Exemple
<body> <div> <div ng-include = "'myusers_list.htm'"> </div> <div ng-include = "'myusers_form.htm'"> </div> </div>
Les étapes sont les suivantes:
Étape 1: Créez une liste HTML
myusers_list.html
<h1> utilisateur </h1> <s tablel> <thead> <tr> <th> modifier </th> <th> name </ th> <th> name </th> </tr> </thead> <tbody> <tr ng-repeat = "utilisateur dans les utilisateurs"> <pd> <bouton ng-click = "edituser (user.id)"> <pander> <td> {{user.fname}} </td> <td> {{user.lname}} </td> </tr> </tbody> </ table>Résultats en cours:
utilisateur
| modifier | nom | nom de famille |
|---|---|---|
| {{user.fname}} | {{user.lname}} |
Étape 2: Créer un formulaire HTML
myusers_form.html
<Button ng-Click = "EditUser ('new')"> <span> </span> Créer un nouvel utilisateur </futton> <hr> <h3 ng-show = "edit"> Éditeur User un utilisateur: </h3> <form> <div> <label> name: </vabeg> <v> <ving Type = Text = Text = Text = ng-model = "fname" ng-disabled = "! éditer" placeholder = "name"> </div> </div> <div> <label> sujet: </ label> <div> <entrée type = "text" ng-model = "lname" ng-diseabled = "! edit" placeholder = "last"> </v> </v> </v> </v> </ div> </v> </v> </vish> <vac type = "mot de passe" ng-model = "passw1" placeholder = "mot de passe"> </ div> </ div> <div> <vabe> répéter le mot de passe: </vabe> <div> <entrée type = "mot de passe" ng-model = "passw2" placeholder = "répéter le mot de passe"> </ div> </ div> </ form> <hr> <bouton ng-disabled = "error || incomplet "> <span> </span> Enregistrer </button>Résultats en cours:
Étape 3: Créez un contrôleur
myusers.js
angular.module ('myApp', []). Controller ('userrtrl', function ($ scope) {$ scope.fname = ''; $ scope.lname = ''; $ scope.passw1 = ''; $ scope.passw2 = '; }, {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.inccomplete = false; {$ scope.edit = false; $ scope.fname = $ scope.users [id-1] .fname; {$ scope.test ();}); $ scope. $ watch ('fname', function () {$ scope.test ();}); $ scope. $ watch ('lname', function () {$ scope.test ();}); $ scope.); $; {if ($ scope.passw1! == $ scope.passw2) {$ scope.error = true;} else {$ scope.error = false; ! $ scope.passw2.length)) {$ scope.incomplete = true;}};})Étape 4: Créez une page d'accueil
myusers.html
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <link rel = "stylesheet" href = "// apps.bdimg.com/libs/bootstrap/3.3.4/css/bootsstrap.min.css"><Script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-app="myApp" ng-controller="userCtrl"><div> <div ng-include="'myUsers_List.htm'"></div> <div ng-include = "'myusers_form.htm'"> </ div> </div> <script src = "myusers.js"> </ script> </ body> </html>
Résultats en cours:
Ce qui précède est une compilation d'informations AngularJS. J'espère que cela peut aider AngularJS à programmer des amis.