AngularJS Bootstrap
AngularJS feuille de style préféré est Twitter Bootstrap, Twitter Bootstrap est le cadre le plus populaire front-end.
Bootstrap
Vous pouvez rejoindre le Twitter Bootstrap votre application AngularJS, vous pouvez ajouter l'élément de code suivant dans votre <head>:
<Link rel = "stylesheet" href = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Si le site dans le pays, il est recommandé d'utiliser Baidu référentiel statique Bootstrap, le code suivant:
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
Ce qui suit est un exemple de HTML complet en utilisant AngularJS et instruction de classe Bootstrap.
Le code 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>
<Body ng-app = "myApp ng-contrôleur" = "userCtrl">
<Class Div = "container">
<H3> Utilisateurs </ h3>
<Table class = "Table- Table rayée">
<Thead> <tr>
<Th> Modifier </ th>
<Th> Prénom </ th >
<Th> Nom </ th >
</ Tr> </ thead>
<TBODY> <tr ng-repeat = "user utilisateurs">
<Td>
<Classe Button = "btn" ng -cliquez = "editUser (user.id)">
<Span class = "glyphicon glyphicon- crayon"> </ span> & nbsp; & nbsp; Modifier
</ Button>
</ Td>
<Td> {{user.fName}} </ td>
<Td> {{user.lName}} </ td>
</ Tr> </ tbody>
</ Table>
<Hr>
<Classe Button = "btn btn- succès" ng-cliquez sur = "editUser ( 'new')">
<Span class = "glyphicon glyphicon- utilisateur"> </ span> Créer un nouvel utilisateur
</ Button>
<Hr>
<H3 ng-show = "modifier "> Créer un nouvel utilisateur: </ h3>
<H3 ng-hide = "modifier "> Modifier l' utilisateur: </ h3>
<Classe Form = "form-horizontal ">
<Class Div = "form-groupe ">
<Classe Label = "col-sm -2 contrôle-label"> Prénom: </ label>
<Class Div = "col-sm -10">
<Input type = "text" ng -modèle = "fName" ng-disabled = "! Edit" espace réservé = "Prénom">
</ Div>
</ Div>
<Class Div = "form-groupe ">
<Classe Label = "col-sm -2 contrôle-label"> Nom: </ label>
<Class Div = "col-sm -10">
<Input type = "text" ng -modèle = "lName" ng-disabled = "! Edit" espace réservé = "Nom">
</ Div>
</ Div>
<Class Div = "form-groupe ">
<Classe Label = "col-sm -2 commande label"> Mot de passe: </ label>
<Class Div = "col-sm -10">
<Input type = "password" ng -modèle = "passw1" espace réservé = "Mot de passe">
</ Div>
</ Div>
<Class Div = "form-groupe ">
<Classe Label = "col-sm -2 commande label"> Répétition: </ label>
<Class Div = "col-sm -10">
<Input type = "password" ng -modèle = "passw2" espace réservé = "Mot de passe Répéter">
</ Div>
</ Div>
</ Form>
<Hr>
<Classe Button = "btn btn- succès" ng-disabled = "erreur || incomplète">
<Span class = "glyphicon glyphicon- sauver"> </ span> Enregistrer les modifications
</ 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-contrôleur" = "userCtrl">
<Class Div = "container">
<H3> Utilisateurs </ h3>
<Table class = "Table- Table rayée">
<Thead> <tr>
<Th> Modifier </ th>
<Th> Prénom </ th >
<Th> Nom </ th >
</ Tr> </ thead>
<TBODY> <tr ng-repeat = "user utilisateurs">
<Td>
<Classe Button = "btn" ng -cliquez = "editUser (user.id)">
<Span class = "glyphicon glyphicon- crayon"> </ span> & nbsp; & nbsp; Modifier
</ Button>
</ Td>
<Td> {{user.fName}} </ td>
<Td> {{user.lName}} </ td>
</ Tr> </ tbody>
</ Table>
<Hr>
<Classe Button = "btn btn- succès" ng-cliquez sur = "editUser ( 'new')">
<Span class = "glyphicon glyphicon- utilisateur"> </ span> Créer un nouvel utilisateur
</ Button>
<Hr>
<H3 ng-show = "modifier "> Créer un nouvel utilisateur: </ h3>
<H3 ng-hide = "modifier "> Modifier l' utilisateur: </ h3>
<Classe Form = "form-horizontal ">
<Class Div = "form-groupe ">
<Classe Label = "col-sm -2 contrôle-label"> Prénom: </ label>
<Class Div = "col-sm -10">
<Input type = "text" ng -modèle = "fName" ng-disabled = "! Edit" espace réservé = "Prénom">
</ Div>
</ Div>
<Class Div = "form-groupe ">
<Classe Label = "col-sm -2 contrôle-label"> Nom: </ label>
<Class Div = "col-sm -10">
<Input type = "text" ng -modèle = "lName" ng-disabled = "! Edit" espace réservé = "Nom">
</ Div>
</ Div>
<Class Div = "form-groupe ">
<Classe Label = "col-sm -2 commande label"> Mot de passe: </ label>
<Class Div = "col-sm -10">
<Input type = "password" ng -modèle = "passw1" espace réservé = "Mot de passe">
</ Div>
</ Div>
<Class Div = "form-groupe ">
<Classe Label = "col-sm -2 commande label"> Répétition: </ label>
<Class Div = "col-sm -10">
<Input type = "password" ng -modèle = "passw2" espace réservé = "Mot de passe Répéter">
</ Div>
</ Div>
</ Form>
<Hr>
<Classe Button = "btn btn- succès" ng-disabled = "erreur || incomplète">
<Span class = "glyphicon glyphicon- sauver"> </ span> Enregistrer les modifications
</ Button>
</ Div>
<Script src = "myUsers.js"> </ script>
</ Body>
</ Html>
Essayez »
parsing de commande
| AngularJS directives | description |
|---|---|
| <Html ng-app | Pour l'élément <html> définit une application (sans nom) |
| <Ng-contrôleur de corps | Pour l'élément <body> définit un contrôleur |
| <Tr ng-repeat | Les utilisateurs du cycle d'un array d'objets, chaque objet utilisateur dans un élément <tr>. |
| <Bouton ng-clic | Lorsque la fonction est appelée editUser clic bouton <> élément lorsque () |
| <H3 ng-show | Si vous modifiez = true Affichage <h3> élément |
| <H3 ng-hide | Si vous modifiez = true <h3> cachés élément |
| <Entrée ng-modèle | Reliure élément <input> pour l'application |
| <Bouton ng-handicapés | Si une erreur se produit ou ncomplete = true Désactiver élément <button> |
classe Bootstrap d'analyse
| élément | classe Bootstrap | Définitions |
|---|---|---|
| <Div> | récipient | Le contenu du récipient |
| <Table> | table | table |
| <Table> | table rayé | Tableau fond rayé |
| <Button> | btn | Bouton poussoir |
| <Button> | btn-succès | bouton Success |
| <Span> | glyphicon | chevron |
| <Span> | glyphicon-crayon | Pencil icon |
| <Span> | glyphicon utilisateur | icône de l'utilisateur |
| <Span> | glyphicon-save | Enregistrer icône |
| <Form> | forme horizontale | Table Horizontal |
| <Div> | form-groupe | Formulaire Groupe |
| <Label> | contrôle-label | Controller tags |
| <Label> | col-sm-2 | Plus de deux |
| <Div> | col-sm-10 | Plus de 10 |
code JavaScript
myUsers.js
angular.module ( 'myApp', [] ). contrôleur ( 'userCtrl', function ($ portée) {
$ 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;
}
};
. $ Portée $ montre ( 'passw1 ', function () {$ scope.test ();});
. $ Portée $ montre ( 'passw2 ', function () {$ scope.test ();});
. $ Portée $ montre ( 'fName ', function () {$ scope.test ();});
. $ Portée $ montre ( '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;
}
};
. $ Portée $ montre ( 'passw1 ', function () {$ scope.test ();});
. $ Portée $ montre ( 'passw2 ', function () {$ scope.test ();});
. $ Portée $ montre ( 'fName ', function () {$ scope.test ();});
. $ Portée $ montre ( '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 analyse de code
| Propriétés Portée | utilisation |
|---|---|
| $ Scope.fName | Les variables du modèle (nom d'utilisateur) |
| $ Scope.lName | Les variables du modèle (nom d'utilisateur) |
| $ Scope.passw1 | Les variables de modèle (utilisateur de mot de passe 1) |
| $ Scope.passw2 | Les variables de modèle (utilisateur de mot de passe 2) |
| $ Scope.users | variables du modèle (tableaux d'utilisateurs) |
| $ Scope.edit | Il est à true lorsque l'utilisateur clique pour créer un utilisateur. |
| $ Scope.error | Si passw1 pas égal passw2 la valeur true |
| $ Scope.incomplete | Si chaque champ est vide (longueur = 0) est définie sur true |
| $ Scope.editUser | Définition des variables du modèle |
| $ Scope.watch | variables du modèle de moniteur |
| $ Scope.test | Les erreurs de validation, et l'exhaustivité des variables du modèle |