AngularJs enthält
In AngularJS können Sie HTML -Dateien in HTML aufnehmen.
Fügen Sie HTML -Dateien in HTML ein
In HTML wird die Funktionalität, die HTML -Dateien enthält, derzeit nicht unterstützt.
Der Server enthält
Die meisten serverseitigen Skripte unterstützen die Funktionsfunktion integrieren (SSI: Server-Seite inklusive).
Mit SSI können Sie HTML -Dateien in HTML aufnehmen und an den Client -Browser senden.
PHP -Instanz
<? Php benötigt ("navigation.php"); ?>
Kunde umfasst
Es gibt viele Möglichkeiten, HTML -Dateien in HTML mit JavaScript aufzunehmen.
Normalerweise verwenden wir die HTTP -Anforderung (AJAX), um Daten vom Server zu erhalten, und können die zurückgegebenen Daten mit InnerHTML in HTML -Elemente schreiben.
AngularJs enthält
Mit AngularJS können Sie die NG-include-Anweisung verwenden, um HTML-Inhalte einzuschließen:
Beispiel
<body> <div> <div ng-include = "'myusers_list.htm'"> </div> <div ng-include = "'myusers_form.htm'"> </div> </div>
Die Schritte sind wie folgt:
Schritt 1: Erstellen Sie eine HTML -Liste
myusers_list.html
<h1> Benutzer </h1> <table> <thead> <TR> <TH> Bearbeiten </th> <Th> Name </th> <Th> Name </th> </tr> </thead> <tbody> <tr ng-repeat = "Benutzer in Benutzern"> <td> <taste ng-click = "bearbeiten (user. user.fname}} </td> <td> {{user.lname}} </td> </tr> </tbody> </table>Auslaufergebnisse:
Benutzer
| bearbeiten | Name | Nachname |
|---|---|---|
| {{user.fname}} | {{user.lname}} |
Schritt 2: HTML -Form erstellen
myusers_form.html
<button ng-click="editUser('new')"><span></span>Create a new user</button><hr><h3 ng-show="edit">Create a new user:</h3><h3 ng-hide="edit">Editor user:</h3><form> <div> <label>Name:</label> <div> <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="name"> </div> </div> <div> <label>Subject:</label> <div> <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last"> </div> </div> <div> <label>Password:</label> <div> <input type="password" ng-model="passw1" Placeholder = "Passwort"> </div> </div> <div> <label> Wiederholungskennwort: </label> <div> <Eingabe type = "password" ng-model = "passw2" placeholder = "passwort wiederholen"> </div> </div> </Form> <hr> <button ng-disabled = "Fehler | |Auslaufergebnisse:
Schritt 3: Erstellen Sie einen Controller
myusers.js
Angular.module ('MyApp', []). Controller ('UserCrTR', Funktion ($ scope) {$ scope.fname = ''; $ scope.lname = ''; $ scope.passw1 = ''; 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.fname = $ scope.users [id-1] .fname; {$ scope.test ();}); $ scope. $ watch ('fname', function () {$ scope.test ();}); {if ($ scope.passw1! !Schritt 4: Erstellen Sie eine Startseite
myusers.html
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <link rel = "styleSheet" href = "// apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"><Sscript src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "myapp" ng-controller = "userctrl" ng-include = "'myusers_form.htm'"> </div> </div> <script src = "myusers.js"> </script> </body> </html>
Auslaufergebnisse:
Das obige ist eine Zusammenstellung von AngularJS -Informationen. Ich hoffe, es kann AngularJS -Programmierfreunden helfen.