Angularjs bootstrap
La hoja de estilo preferido de AngularJS es Twitter Bootstrap, que es el marco front-end más popular en la actualidad.
Echa un vistazo al tutorial de Bootstrap.
Oreja
Puede agregar Twitter Bootstrap a su aplicación AngularJS, y puede agregar el siguiente código a su elemento <Head>:
<Link rel = "Stylesheet" href = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Si el sitio está en el país, se recomienda usar Bootstrap de la biblioteca de recursos estáticos de Baidu, el código es el siguiente:
<Link rel = "Stylesheet" href = "// apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
La siguiente es una instancia HTML completa que usa la Directiva AngularJS y la clase Bootstrap.
Código HTML
< src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <cuerpo ng-app = "myapp" ng-controller = "userCtrl"> <div> <h3> usuarios </h3> <th> Last </th> </tr> </thead> <tbody> <tr ng-depheat = "user en usuarios"> <td> <botón ng-click = "edituser (user.id)"> <span> </span> edit </boton> </td> <td> {{user.fname}}}}} </td> <td> {{user.lname} </tr> </tbody> </table> <hr> <button ng-click = "edituser ('new')"> <span> </span> Cree un nuevo usuario </botón> <hr> <h3 ng-show = "editar"> crear un nuevo usuario: </h3> <h3 ng-hide = "editar" type = "text" ng-model = "fname" ng-disable = "! edit" placeholder = "name"> </div> </div> <div> <belet> asunto: </seleting> <div> <input type = "text" ng-model = "lname" ng-disable = "! editar" placeholder = "último"> </div> <iv> <iv> <<belep> type = "Password" Ng-Model = "Passw1" PlaceHolder = "Password"> </div> </div> <viv> <label> Repita la contraseña: </label> <div> <input type = "contraseña" ng-model = "passw2" placeholder = "repetir contraseña"> </div> </div> </form> <hr> <botin ng-disable = "error ||||||||| incompleto "> <span> </span> Modify </boton> </div> <script src =" myusers.js "> </script> </body> </html>Resultados de ejecución:
Análisis de instrucciones
| Directiva AngularJS | describir |
|---|---|
| <html ng-app | Defina una aplicación para el elemento <html> (sin nombre) |
| <cuerpo ng-controlador | Defina un controlador para el elemento <body> |
| <tr ng-repal | Bucles la matriz de objetos de usuarios, cada objeto de usuario se coloca en el elemento <tr>. |
| <botón ng-clic | Llame a la función edituser () al hacer clic en el elemento <botón> |
| <h3 ng-show | Si editar = true muestra el elemento <h3> |
| <h3 ng de color | Si editar = true oculta el elemento <h3> |
| <Ingrese Ng-Modelo | Atar elementos <input> para la aplicación |
| <botón ng-discapabled | Si ocurre un error o ncomplete = true deshabilita el elemento <botin> |
Análisis de clase de arranque
| elemento | Clase de arranque | definición |
|---|---|---|
| <div> | recipiente | Contenedor de contenido |
| <Table> | mesa | hoja |
| <Table> | rayado | Mesa con fondo rayado |
| <botón> | btn | Botón |
| <botón> | btn-tucés | Botón de éxito |
| <span> | glificón | Ícono del glifo |
| <span> | lápiz glificón | Icono de lápiz |
| <span> | usuario glificón | Icono de usuario |
| <span> | Glyphicon-Save | Guardar icono |
| <form> | forma oral | Mesa de nivel |
| <div> | grupo de forma | Grupo de formulario |
| <Tabel> | etiqueta de control | Etiquetas de controlador |
| <Tabel> | col-sm-2 | Que abarcan 2 columnas |
| <div> | Col-SM-10 | Que abarcan 10 columnas |
Código JavaScript
myusers.js
angular.module ('myApp', []). Controller ('UserCtrl', function ($ scope) {$ scope.fname = ''; $ scope.lname = ''; $ scope.passw1 = ''; $ scope.passw2 = '' '; $ scope.users = [{{fname:' hege ', lname: lname: "Pege," Id "," Id "," Id ",", "," ",", "," ",", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "". 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 ",", ",", ",", ",", "," Peter ",", "," Peter ",", ",", ",", "," peter "," Peter ",", ",", ",", ", 6," peter ", }]; $ 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 ();}); $ scope. $ watch ('lname', function () {$ scope.test ();}); {if ($ scope.passw1! == $ scope.passw2) {$ scope.error = true; ! $ scope.passw2.length)) {$ scope.incomplete = true;Análisis del código JavaScript
| Propiedades de alcance | usar |
|---|---|
| $ scope.fname | Variable de modelo (nombre de usuario) |
| $ scope.lname | Variables del modelo (apellido del usuario) |
| $ scope.passw1 | Variable de modelo (contraseña de usuario 1) |
| $ scope.passw2 | Variables del modelo (contraseña de usuario 2) |
| $ scope.users | Variables del modelo (matriz del usuario) |
| $ scope.Edit | Establecer en True cuando el usuario hace clic para crear un usuario. |
| $ alcance.error | Si Passw1 no es igual, passw2 se establece en verdadero |
| $ alcance. | Si cada campo está vacío (longitud = 0) se establece en verdadero |
| $ scope.edituser | Establecer variables del modelo |
| $ scope.watch | Monitorear variables del modelo |
| $ alcance.test | Verificar errores e integridad de las variables del modelo |
Lo anterior es una compilación de la información de bootstrap AngularJS. Continuaremos agregándolo más tarde. Espero que los estudiantes que puedan ayudar a programar Angularjs.