AngularJS Bootstrap
AngularJS bevorzugte Stylesheet ist Twitter Bootstrap, Twitter Bootstrap ist die beliebteste Front-End-Rahmen.
Bootstrap
Sie können die Twitter Bootstrap Ihre AngularJS Anwendung kommen, können Sie den folgenden Code ein Element in Ihrem <head> hinzu:
<Link rel = "stylesheet" href = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Wenn die Website in dem Land, ist es empfehlenswert, Baidu statische Repository Bootstrap, den folgenden Code verwenden:
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
Nachfolgend finden Sie eine komplette HTML-Beispiel AngularJS und Bootstrap Klasse Anweisung verwendet.
HTML-Code
<! DOCTYPE html>
<Html>
<Link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body ng-app = "myApp " ng-Controller = "userCtrl">
<Div class = "container">
<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>
<Hr>
<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>
</ Div>
<Script src = "myUsers.js"> </ script>
</ Body>
</ Html>
<Html>
<Link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body ng-app = "myApp " ng-Controller = "userCtrl">
<Div class = "container">
<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>
<Hr>
<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>
</ Div>
<Script src = "myUsers.js"> </ script>
</ Body>
</ Html>
Versuchen »
Befehl Parsing
AngularJS Richtlinien | Beschreibung |
---|---|
<Html ng-App | Für das <html> Element definiert eine Anwendung (unbenannt) |
<Body ng-Controller | Für den <body> Element definiert einen Controller |
<Tr ng-repeat | Cycle-Benutzer eine Reihe von Objekten, die jeweils Benutzerobjekt in einem <tr> -Element. |
<Taste ng-Klick | Wenn die Funktion editUser Klick <button> Element, wenn () aufgerufen |
<H3 ng-Show | Wenn Sie bearbeiten = true Anzeige <h3> Element |
<H3 ng-hide | Wenn Sie bearbeiten = true versteckt <h3> -Element |
<Input ng-Modell | Die Bindung <input> -Element für die Anwendung |
<Taste ng-disabled | Wenn ein Fehler auftritt oder ncomplete = true Disable <button> Element |
Bootstrap Klasse der analytischen
Element | Bootstrap-Klasse | Begriffsbestimmungen |
---|---|---|
<Div> | Behälter | Der Inhalt des Behälters |
<Table> | Tabelle | Tabelle |
<Table> | Tisch-gestreift | Tabelle gestreiften Hintergrund |
<Button> | BTN | Taster |
<Button> | btn-Erfolg | Success-Taste |
<Span> | glyphicon | Winkel |
<Span> | glyphicon-Bleistift | Bleistift-Symbol |
<Span> | glyphicon-Benutzer | Benutzersymbol |
<Span> | glyphicon-save | Symbol Speichern |
<Form> | form horizontal | Horizontal Tisch |
<Div> | Form-Gruppe | Formular-Gruppe |
<Label> | Steuerzeichen | Controller Tags |
<Label> | col-sm-2 | Über zwei |
<Div> | col-sm-10 | Mehr als 10 |
JavaScript-Code
myUsers.js
angular.module ( 'myApp', [] ). Regler ( '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 == 'neuen') {
$ 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 $ Uhr ( 'passw1 ', function () {$ scope.test ();});
. $ Scope $ Uhr ( 'passw2 ', function () {$ scope.test ();});
. $ Scope $ Uhr ( 'fName ', function () {$ scope.test ();});
. $ Scope $ Uhr ( '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 == 'neuen') {
$ 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 $ Uhr ( 'passw1 ', function () {$ scope.test ();});
. $ Scope $ Uhr ( 'passw2 ', function () {$ scope.test ();});
. $ Scope $ Uhr ( 'fName ', function () {$ scope.test ();});
. $ Scope $ Uhr ( '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;
}
};
});
JavaScript-Code-Analyse
Scope Eigenschaften | Verwendung |
---|---|
$ Scope.fName | Modellvariablen (Benutzername) |
$ Scope.lName | Modellvariablen (Benutzername) |
$ Scope.passw1 | Modellvariablen (User-Passwort 1) |
$ Scope.passw2 | Modellvariablen (User-Passwort 2) |
$ Scope.users | Modellvariablen (Arrays von Benutzern) |
$ Scope.edit | Es wird auf true gesetzt, wenn der Benutzer einen Benutzer zu erstellen klickt. |
$ Scope.error | Wenn passw1 nicht gleich passw2 auf true gesetzt |
$ Scope.incomplete | Wenn jedes Feld leer ist (Länge = 0) auf true gesetzt |
$ Scope.editUser | Einstellen Modellvariablen |
$ Scope.watch | Monitor-Modellvariablen |
$ Scope.test | Validierungsfehler und Vollständigkeit der Modellvariablen |