AngularJS enthält
In AngularJS, können Sie HTML-Dateien im HTML enthalten.
Es enthält die HTML-Datei in HTML
In HTML wird dies nicht durch die HTML-Datei mit der Funktion unterstützt.
Service-Side Includes
Die meisten Server-Side - Scripting - Support - Funktionen umfassen Datei (SSI: Server Side Includes).
Mit SSI, Sie können in der HTML-Code in der HTML-Datei enthalten sein, um den Client-Browser gesendet.
PHP Beispiele
<? Php require ( "navigation.php" );?>
-Client enthält
Es gibt viele Möglichkeiten von JavaScript können HTML-Datei im HTML enthalten.
Normalerweise verwenden wir HTTP - Anforderung (AJAX) , um Daten von dem Server zu erhalten, können wir die Daten schreiben zurückgegeben durch innerHTML- auf das HTML - Element verwenden.
AngularJS enthält
Verwenden Sie AngularJS, können Sie ng-Include - Direktive HTML - Inhalte umfassen:
Beispiele
<Body>
<Div class = "container">
<Div ng-include = " ' myUsers_List.htm" "> </ div>
<Div ng-include = " ' myUsers_Form.htm" "> </ div>
</ Div>
</ Body>
<Div class = "container">
<Div ng-include = " ' myUsers_List.htm" "> </ div>
<Div ng-include = " ' myUsers_Form.htm" "> </ div>
</ Div>
</ Body>
Gehen Sie wie folgt vor:
Schritt 1: HTML-Listen erstellen
myUsers_List.html
<H3> Benutzer </ h3>
<Table class = "Tabelle Tabellen- gestreift">
<Thead> <tr>
<Th> Bearbeiten </ th>
<Th> Vorname </ th >
<Do> Nachname </ th >
</ Tr> </ thead>
<Tbody> <tr ng-repeat = "Benutzer in Benutzer">
<Td>
<Taste class = "BTN" ng -Klick = "editUser (user.id)">
<Span class = "glyphicon glyphicon- Bleistift"> </ span> & nbsp; & nbsp; Bearbeiten
</ Button>
</ Td>
<Td> {{user.fName}} </ td>
<Td> {{user.lName}} </ td>
</ Tr> </ tbody>
</ Table>
<Table class = "Tabelle Tabellen- gestreift">
<Thead> <tr>
<Th> Bearbeiten </ th>
<Th> Vorname </ th >
<Do> Nachname </ th >
</ Tr> </ thead>
<Tbody> <tr ng-repeat = "Benutzer in Benutzer">
<Td>
<Taste class = "BTN" ng -Klick = "editUser (user.id)">
<Span class = "glyphicon glyphicon- Bleistift"> </ span> & nbsp; & nbsp; Bearbeiten
</ Button>
</ Td>
<Td> {{user.fName}} </ td>
<Td> {{user.lName}} </ td>
</ Tr> </ tbody>
</ Table>
Versuchen »
Schritt 2: Erstellen Sie ein HTML-Formular
myUsers_Form.html
<Taste class = "btn btn- Erfolg" ng-Klick = "editUser (" neuen ")">
<Span class = "glyphicon glyphicon- Benutzer"> </ span> Neuen Benutzer erstellen
</ Button>
<Hr>
<H3 ng-show = "edit "> Neuen Benutzer erstellen: </ h3>
<H3 ng-hide = "edit "> Benutzer bearbeiten: </ h3>
<Form class = "form horizontal ">
<Div class = "form-Gruppe ">
<Label - class = "col-sm -2 Steuer-label"> Vorname: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -Modell = "fName" ng-disabled = "! Edit" Platzhalter = "Vorname">
</ Div>
</ Div>
<Div class = "form-Gruppe ">
<Label - class = "col-sm -2 Steuer-label"> Nachname: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -Modell = "lName" ng-disabled = "! Edit" Platzhalter = "Nachname">
</ Div>
</ Div>
<Div class = "form-Gruppe ">
<Label - class = "col-sm -2 Steuer-label"> Kennwort: </ label>
<Div class = "col-sm -10">
<Input type = "password" ng -Modell = "passw1" Platzhalter = "Passwort">
</ Div>
</ Div>
<Div class = "form-Gruppe ">
<Label - class = "col-sm -2 Steuer-label"> Repeat: </ label>
<Div class = "col-sm -10">
<Input type = "password" ng -Modell = "passw2" Platzhalter = "Passwort wiederholen">
</ Div>
</ Div>
</ Form>
<Hr>
<Taste class = "btn btn- Erfolg" ng-disabled = "Fehler || unvollständig">
<Span class = "glyphicon glyphicon- speichern"> </ span> Änderungen speichern
</ Button>
<Span class = "glyphicon glyphicon- Benutzer"> </ span> Neuen Benutzer erstellen
</ Button>
<Hr>
<H3 ng-show = "edit "> Neuen Benutzer erstellen: </ h3>
<H3 ng-hide = "edit "> Benutzer bearbeiten: </ h3>
<Form class = "form horizontal ">
<Div class = "form-Gruppe ">
<Label - class = "col-sm -2 Steuer-label"> Vorname: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -Modell = "fName" ng-disabled = "! Edit" Platzhalter = "Vorname">
</ Div>
</ Div>
<Div class = "form-Gruppe ">
<Label - class = "col-sm -2 Steuer-label"> Nachname: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -Modell = "lName" ng-disabled = "! Edit" Platzhalter = "Nachname">
</ Div>
</ Div>
<Div class = "form-Gruppe ">
<Label - class = "col-sm -2 Steuer-label"> Kennwort: </ label>
<Div class = "col-sm -10">
<Input type = "password" ng -Modell = "passw1" Platzhalter = "Passwort">
</ Div>
</ Div>
<Div class = "form-Gruppe ">
<Label - class = "col-sm -2 Steuer-label"> Repeat: </ label>
<Div class = "col-sm -10">
<Input type = "password" ng -Modell = "passw2" Platzhalter = "Passwort wiederholen">
</ Div>
</ Div>
</ Form>
<Hr>
<Taste class = "btn btn- Erfolg" ng-disabled = "Fehler || unvollständig">
<Span class = "glyphicon glyphicon- speichern"> </ span> Änderungen speichern
</ Button>
Versuchen »
Schritt 3: Erstellen-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 ;
}
};
})
$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 ;
}
};
})
Schritt 4: Erstellen einer Homepage
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-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>
<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-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>
Versuchen »