Le meilleur didacticiel AngularJS Bootstrap en 2024, dans ce didacticiel, vous pouvez apprendre
Bootstrap,Le code HTML,parsing de commande,classe Bootstrap d'analyse,code JavaScript,myUsers.js,JavaScript analyse de code,
AngularJS Bootstrap
AngularJS feuille de style préféré est Twitter Bootstrap, Twitter Bootstrap est le cadre le plus populaire front-end.
Voir Bootstrap tutoriel .
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>
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;
}
};
});
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 |