AngularJS Bootstrap
AngularJS foglio di stile preferito è Twitter Bootstrap, Twitter Bootstrap è il quadro front-end più popolari.
Vedere Bootstrap esercitazione .
bootstrap
È possibile aderire al Twitter Bootstrap l'applicazione AngularJS, è possibile aggiungere il seguente codice nel tuo elemento <head>:
<Link rel = "stylesheet" href = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Se il sito nel paese, si raccomanda di usare Baidu repository statico Bootstrap, il seguente codice:
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
Quanto segue è un esempio HTML completo utilizzando AngularJS e l'istruzione di classe di bootstrap.
Il codice HTML
<! 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>
<Corpo ng-app = "myApp " ng-controllore = "userCtrl">
<Div class = "contenitore">
<H3> Utenti </ h3>
<Tabella class = "tavolo- tabella a strisce">
<Thead> <tr>
<Th> Modifica </ th>
<Th> Nome </ th >
<Th> Cognome </ th >
</ Tr> </ thead>
<TBODY> <tr NG-repeat = "utente in utenti">
<Td>
<Classe Button = "btn" ng -Click = "editUser (user.id)">
<Span class = "glyphicon glyphicon- matita"> </ span> & nbsp; & nbsp; Modifica
</ Button>
</ Td>
<Td> {{user.fName}} </ td>
<Td> {{user.lName}} </ td>
</ Tr> </ tbody>
</ Table>
<Hr>
<Classe Button = "btn btn- successo" ng-click = "editUser ( 'nuovo')">
<Span class = "glyphicon glyphicon- utente"> </ span> Crea nuovo utente
</ Button>
<Hr>
<H3 ng-show = "Modifica "> Crea un nuovo utente: </ h3>
<H3 ng-nascondere = "Modifica "> Modifica utente: </ h3>
<Classe Form = "form-orizzontale ">
<Div class = "forma-gruppo ">
<Classe Label = "col-sm -2 controllo-label"> Nome: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -model = "fName" ng-disabled = "! Modifica" segnaposto = "Nome">
</ Div>
</ Div>
<Div class = "forma-gruppo ">
<Classe Label = "col-sm -2 controllo-label"> Nome: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -model = "lname" ng-disabled = "! Modifica" segnaposto = "Cognome">
</ Div>
</ Div>
<Div class = "forma-gruppo ">
<Classe Label = "col-sm -2 controllo-label"> Password: </ label>
<Div class = "col-sm -10">
<Input type = "password" ng -model = "passw1" segnaposto = "password">
</ Div>
</ Div>
<Div class = "forma-gruppo ">
<Classe Label = "col-sm -2 controllo-label"> Ripeti: </ label>
<Div class = "col-sm -10">
<Input type = "password" ng -model = "passw2" segnaposto = "Ripeti password">
</ Div>
</ Div>
</ Form>
<Hr>
<Classe Button = "btn btn- successo" ng-disabled = "Errore || incompleta">
<Span class = "glyphicon glyphicon- salvare"> </ span> Salva modifiche
</ Button>
</ Div>
<Script src = "myUsers.js"> </ script>
</ Corpo>
</ 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>
<Corpo ng-app = "myApp " ng-controllore = "userCtrl">
<Div class = "contenitore">
<H3> Utenti </ h3>
<Tabella class = "tavolo- tabella a strisce">
<Thead> <tr>
<Th> Modifica </ th>
<Th> Nome </ th >
<Th> Cognome </ th >
</ Tr> </ thead>
<TBODY> <tr NG-repeat = "utente in utenti">
<Td>
<Classe Button = "btn" ng -Click = "editUser (user.id)">
<Span class = "glyphicon glyphicon- matita"> </ span> & nbsp; & nbsp; Modifica
</ Button>
</ Td>
<Td> {{user.fName}} </ td>
<Td> {{user.lName}} </ td>
</ Tr> </ tbody>
</ Table>
<Hr>
<Classe Button = "btn btn- successo" ng-click = "editUser ( 'nuovo')">
<Span class = "glyphicon glyphicon- utente"> </ span> Crea nuovo utente
</ Button>
<Hr>
<H3 ng-show = "Modifica "> Crea un nuovo utente: </ h3>
<H3 ng-nascondere = "Modifica "> Modifica utente: </ h3>
<Classe Form = "form-orizzontale ">
<Div class = "forma-gruppo ">
<Classe Label = "col-sm -2 controllo-label"> Nome: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -model = "fName" ng-disabled = "! Modifica" segnaposto = "Nome">
</ Div>
</ Div>
<Div class = "forma-gruppo ">
<Classe Label = "col-sm -2 controllo-label"> Nome: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -model = "lname" ng-disabled = "! Modifica" segnaposto = "Cognome">
</ Div>
</ Div>
<Div class = "forma-gruppo ">
<Classe Label = "col-sm -2 controllo-label"> Password: </ label>
<Div class = "col-sm -10">
<Input type = "password" ng -model = "passw1" segnaposto = "password">
</ Div>
</ Div>
<Div class = "forma-gruppo ">
<Classe Label = "col-sm -2 controllo-label"> Ripeti: </ label>
<Div class = "col-sm -10">
<Input type = "password" ng -model = "passw2" segnaposto = "Ripeti password">
</ Div>
</ Div>
</ Form>
<Hr>
<Classe Button = "btn btn- successo" ng-disabled = "Errore || incompleta">
<Span class = "glyphicon glyphicon- salvare"> </ span> Salva modifiche
</ Button>
</ Div>
<Script src = "myUsers.js"> </ script>
</ Corpo>
</ Html>
Prova »
parsing dei comandi
| AngularJS direttive | descrizione |
|---|---|
| <HTML ng-app | Per il <html> elemento definisce un programma (senza nome) |
| <Corpo ng-controllore | Per l'elemento <body> definisce un controller |
| <Tr ng-repeat | gli utenti Cycle un array di oggetti, ogni oggetto utente in un elemento <tr>. |
| <Pulsante ng-click | Quando la funzione è chiamata editUser click <tasto> elemento quando () |
| <H3 ng presentazione | Se si modifica = true display <h3> elemento |
| <H3 ng-pelle | Se si modifica = true nascosti <h3> elemento |
| <Ng-modello di ingresso | Binding <input> elemento per l'applicazione |
| <Pulsante ng-disabled | Se si verifica un errore o un Ncomplete = true Disabilita <tasto> elemento |
classe Bootstrap di analitica
| elemento | classe bootstrap | definizioni |
|---|---|---|
| <Div> | contenitore | Il contenuto del contenitore |
| <Table> | tavolo | tavolo |
| <Table> | tavolo a righe | Tabella sfondo a strisce |
| <Button> | btn | pulsante |
| <Button> | btn-successo | pulsante successo |
| <Span> | glyphicon | gallone |
| <Span> | glyphicon-matita | icona della matita |
| <Span> | glyphicon-utente | icona utente |
| <Span> | glyphicon-save | Salva icona |
| <Form> | modulo-orizzontale | tavola orizzontale |
| <Div> | forma-gruppo | Gruppo modulo |
| <Label> | il controllo di qualità ecologica | controller Tags |
| <Label> | col-sm-2 | Oltre due |
| <Div> | Col-SM-10 | Oltre 10 |
codice JavaScript
myUsers.js
angular.module ( 'myApp', [] ). controllore ( 'userCtrl', function ($ portata) {
$ 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 == 'nuova') {
$ 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;
}
};
. $ Portata $ orologio ( 'passw1 ', function () {$ scope.test ();});
. $ Portata $ orologio ( 'passw2 ', function () {$ scope.test ();});
. $ Orologio $ portata ( 'fName ', function () {$ scope.test ();});
. $ Orologio $ portata ( '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 == 'nuova') {
$ 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;
}
};
. $ Portata $ orologio ( 'passw1 ', function () {$ scope.test ();});
. $ Portata $ orologio ( 'passw2 ', function () {$ scope.test ();});
. $ Orologio $ portata ( 'fName ', function () {$ scope.test ();});
. $ Orologio $ portata ( '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;
}
};
});
analisi del codice JavaScript
| Proprietà Ambito di applicazione | uso |
|---|---|
| $ Scope.fName | le variabili di modello (nome utente) |
| $ Scope.lName | le variabili del modello (nome utente) |
| $ Scope.passw1 | le variabili di modello (password utente 1) |
| $ Scope.passw2 | le variabili di modello (password dell'utente 2) |
| $ Scope.users | le variabili di modello (array di utenti) |
| $ Scope.edit | Si è impostata su true quando l'utente fa clic per creare un utente. |
| $ Scope.error | Se passw1 diverso passw2 impostata su true |
| $ Scope.incomplete | Se ogni campo è vuoto (lunghezza = 0) è impostata su true |
| $ Scope.editUser | Impostazione delle variabili modello |
| $ Scope.watch | variabili modello di monitor |
| $ Scope.test | Gli errori di convalida, e la completezza delle variabili del modello |