AngularJS Bootstrap
AngularJS 'bevorzugter Stylesheet ist Twitter Bootstrap, das derzeit beliebteste Front-End-Front-End-Front-End-Rahmen ist.
Schauen Sie sich das Bootstrap -Tutorial an.
Bootstrap
Sie können Ihre AngularJS -Anwendung Twitter Bootstrap hinzufügen und Ihrem <kopf> -Element den folgenden Code hinzufügen:
<link rel = "styleSheet" href = "// maxcdn.bootStrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Wenn sich die Website im Land befindet, wird empfohlen, Bootstrap der statischen Ressourcenbibliothek von Baidu zu verwenden, der Code ist wie folgt:
<link rel = "stylesheet" href = "// Apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
Das Folgende ist eine vollständige HTML -Instanz mit der AngularJS -Direktive und der Bootstrap -Klasse.
HTML -Code
<! 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"><div><h3>Users</h3><table> <thead> <tr> <th>Edit</th> <th>Name</th> <Th> Last </th> </tr> </thead> <tbody> <tr ng-repeat = "Benutzer in Benutzern"> <td> <button ng-klick = "editUser (user.id)"> <span> </span> bearbeiten </td> </td> <td> {{{user.fname}}}} </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </tr> </tbody></table><hr><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 Typ = "Passwort" ng-model = "passw1" placeholder = "password"> </div> </div> <div> <label> Wiederholungspassage Kennwort: </label> <div> <Eingabe type = "Passwort" ng-model = "passw2" placeholder = "Wiederholungskennwort"> </div> </div> </form> <hr> <button <button unvollständig "> <span> </span> modifizieren Sie </button> </div> <script src =" myusers.js "> </script> </body> </html>Auslaufergebnisse:
Anlehnunganalyse
| AngularJS -Richtlinie | beschreiben |
|---|---|
| <html ng-App | Definieren Sie eine Anwendung für das <html> Element (unbenannt) |
| <Body NG-Controller | Definieren Sie einen Controller für das <body> -Element |
| <Tr ng-Wiederholung | Schleifen Sie das Array der Benutzerobjekte, jedes Benutzerobjekt wird im <tr> -Element platziert. |
| <Schaltfläche NG-Klick | Rufen Sie die Funktion edituser () auf, wenn Sie auf das Element <Staste> klicken |
| <H3 Ng-Show | Wenn edit = true das Element <h3> zeigt |
| <H3 ng-Hide | Wenn edit = true das <h3> Element verbirgt |
| <Eingabe ng-modell | Binden Sie <eingabe> Elemente für die Anwendung |
| <Schaltfläche NG-Behinderung | Wenn ein Fehler auftritt oder nComplete = true das <taste> -Element deaktiviert |
Bootstrap -Klassenanalyse
| Element | Bootstrap -Klasse | Definition |
|---|---|---|
| <div> | Container | Inhaltsbehälter |
| <tabelle> | Tisch | Blatt |
| <tabelle> | Tischstreifen | Tabelle mit gestreiften Hintergrund |
| <tasten> | Btn | Taste |
| <tasten> | BTN-SUCCESS | Erfolgsknopf |
| <spann> | Glyphicon | Glyphikone |
| <spann> | Glyphicon-Stift | Bleistiftsymbol |
| <spann> | Glyphicon-Benutzer | Benutzersymbol |
| <spann> | Glyphicon-Save | Symbol speichern |
| <form> | Form-Horizontal | Levelstabelle |
| <div> | Formgruppe | Formgruppe |
| <Label> | Kontrollmarken | Controller -Tags |
| <Label> | col-sm-2 | 2 Spalten überspannen |
| <div> | col-sm-10 | 10 Spalten überspannen |
JavaScript -Code
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! !JavaScript Code Parsing
| Umfangseigenschaften | verwenden |
|---|---|
| $ scope.fname | Modellvariable (Benutzername) |
| $ scope.lname | Modellvariablen (Benutzer nach dem Nachnamen) |
| $ scope.passw1 | Modellvariable (Benutzerkennwort 1) |
| $ scope.passw2 | Modellvariablen (Benutzerkennwort 2) |
| $ scope.users | Modellvariablen (Array des Benutzers) |
| $ scope.edit | Setzen Sie auf True, wenn der Benutzer klickt, um einen Benutzer zu erstellen. |
| $ scope.Error | Wenn PASSW1 nicht gleich passw2 ist auf true eingestellt ist |
| $ scope.inplete | Wenn jedes Feld leer ist (Länge = 0) ist auf true eingestellt |
| $ scope.edituser | Modellvariablen einstellen |
| $ scope.watch | Modellvariablen überwachen |
| $ scope.test | Überprüfen Sie die Fehler und die Integrität von Modellvariablen |
Das obige ist eine Zusammenstellung von AngularJS -Bootstrap -Informationen. Wir werden es später weiter hinzufügen. Ich hoffe, dass Schüler, die helfen können, AngularJs zu programmieren.