AngularJS Bootstrap Introdução detalhada e código de exemplo

Autor：Eve Cole Data da Última Atualização：2025-07-27 18:48:01

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>:

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:

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.