Latest web development tutorials

AngularJS Bootstrap

AngularJS bevorzugte Stylesheet ist Twitter Bootstrap, Twitter Bootstrap ist die beliebteste Front-End-Rahmen.

Siehe Tutorial Bootstrap .


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>

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;
}
};

});


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