Bootstrap AngularJS
A folha de estilo preferida do AngularJS é o Twitter Bootstrap, que é a estrutura de front-end mais popular no momento.
Confira o tutorial de bootstrap.
Bootstrap
Você pode adicionar o Twitter Bootstrap ao seu aplicativo AngularJS e adicionar o seguinte código ao seu elemento <head>:
<link rel = "Stylesheet" href = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Se o site estiver no país, é recomendável usar o Bootstrap da Biblioteca de Recursos estáticos do Baidu, o código é o seguinte:
<link rel = "Stylesheet" href = "// apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
A seguir, é apresentada uma instância HTML completa usando a diretiva AngularJS e a classe Bootstrap.
Código HTML
<! Doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "Stylesheet" href = "// apps.bdimg.com/libs/bootstrap/3.4/css/bootstrap.min.css"><script 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> Nome </th> <th> Último </th> </tr> </thead> <tbody> <tr ng-repeat = "Usuário em usuários"> <td> <button ng-click = "editUser (user.id)"> <span> </span> edit </button> </td> <t> {{{user.fther.f> user.lname}} </td> </tr> </tbody> </tabela> <hr> <button ng-click = "editUser ('new')"> <pan> </span> Crie um novo usuário </button> <h3> <h3 ng-show = "edit"> crie um novo usuário: </h3> <h3> <div> <brety> Nome: </crety> <div> <input type = "text" ng-model = "fname" ng -Disabled = "! Edit" Planteholder = "name"> </div> </div> <div> <bel> sujeito: </cret> <div> <but typ = "" ng-model = "lame" ng "e" "" ng-model) </div> <div> <breting> Senha: </crety> <div> <input type = "senha" ng-model = "passw1" placeholder = "senha"> </div> </div> <div> <belt> repetir senha: </cret> <div> <div> <input type = "senha" ng-mod-model = "passw2" placender = " ng-Disabled = "Erro || incompleto"> <pan> </span> modificar </botão> </div> <script src = "myusers.js"> </script> </body> </html>Resultados em execução:
Análise de instrução
| Diretiva AngularJS | descrever |
|---|---|
| <html ng-app | Defina um aplicativo para o elemento <html> (sem nome) |
| <Body ng controlador | Defina um controlador para o elemento <body> |
| <tr ng-repeat | Loops a matriz de objetos de usuários, cada objeto de usuário é colocado no elemento <tr>. |
| <botão ng-clique | Ligue para a função editUser () ao clicar no elemento <butter> |
| <H3 ng-show | Se editar = true exibir o elemento <H3> |
| <H3 ng-hide | Se editar = true oculta o elemento <H3> |
| <Modelo Ng de entrada | Bind <input> elementos para o aplicativo |
| <Button ng-Disabled | Se ocorrer um erro ou ncomplete = true desativa o elemento <button> |
Análise de classe de bootstrap
| elemento | Classe de Bootstrap | definição |
|---|---|---|
| <div> | recipiente | Contêiner de conteúdo |
| <tabela> | mesa | folha |
| <tabela> | Tabela com listras | Mesa com fundo listrado |
| <butter> | btn | Botão |
| <butter> | Btn-success | Botão de sucesso |
| <pan> | glificon | Ícone de glifos |
| <pan> | Glyphicon-Pisish | Ícone de lápis |
| <pan> | Usuador de glificon | Ícone do usuário |
| <pan> | Glificon-Save | Salvar o ícone |
| <morm> | Form-Horizontal | Tabela de nível |
| <div> | grupo de formulários | Grupo de formulários |
| <Boel> | controle de controle | Tags do controlador |
| <Boel> | COL-SM-2 | Abrangendo 2 colunas |
| <div> | COL-SM-10 | Abrangendo 10 colunas |
Código JavaScript
myusers.js
angular.module ('myApp', []). 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.FNAME = $ SCOPE.USERS [ID-1] .FNAME; {$ scope.test ();}); $ scope. $ watch ('fname', function () {$ scope.test ();}); $ scope. $ watch ('lname', function () {$ scope.test ();}; {if ($ scope.passw1! == scope.passw2) {$ scope.error = true; ! $ scope.passw2.length)) {$ scope.incomplete = true;JavaScript Código Parsing
| Propriedades do escopo | usar |
|---|---|
| $ scope.fname | Variável de modelo (nome de usuário) |
| $ SCOPE.LNAME | Variáveis de modelo (sobrenome do usuário) |
| $ scope.passw1 | Variável de modelo (senha do usuário 1) |
| $ scope.passw2 | Variáveis de modelo (senha do usuário 2) |
| $ SCOPE.USERS | Variáveis de modelo (matriz do usuário) |
| $ scope.edit | Defina como true quando o usuário clicar para criar um usuário. |
| $ scope.error | Se o passw1 não for igual a passw2 é definido como true |
| $ SCOPE.INCIMENTO | Se cada campo estiver vazio (comprimento = 0) estiver definido como true |
| $ scope.edituser | Defina variáveis de modelo |
| $ scope.watch | Monitore as variáveis do modelo |
| $ scope.test | Verifique erros e integridade das variáveis do modelo |
O acima exposto é uma compilação de informações de bootstrap angularjs. Continuaremos a adicioná -lo mais tarde. Espero que os alunos que possam ajudar a programar o AngularJS.