AngularJS Bootstrap
AngularJS hoja de estilo preferido es Twitter Bootstrap, Twitter Bootstrap es el marco de front-end más popular.
bootstrap
Usted puede unirse al Twitter Bootstrap su aplicación AngularJS, puede agregar el siguiente elemento de código en su <head>:
<Link rel = "stylesheet" href = "// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
Si el sitio en el país, se recomienda usar Baidu repositorio estático Bootstrap, el siguiente código:
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
El siguiente es un ejemplo de HTML completo utilizando AngularJS y la instrucción de la rutina de carga.
código 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>
<Cuerpo ng-app = "myApp " ng-controller = "userCtrl">
<Div class = "contenedor">
<H3> Usuarios </ h3>
<Tabla class = "mesa- mesa de rayas">
<Culata en T> <tr>
<TH> Editar </ th>
<TH> Nombre </ th >
<TH> Apellidos </ th >
</ Tr> </ culata en T>
<Tbody> <tr ng-repeat = "usuario en usuarios">
<Td>
<Clase Button = "btn" ng -clic = "editUser (user.id)">
<Span class = "glyphicon glyphicon- lápiz"> </ span> & nbsp; & nbsp; Editar
</ Button>
</ Td>
<Td> {{}} user.fName </ td>
<Td> {{}} user.lName </ td>
</ Tr> </ tbody>
</ Table>
<Hr>
<Clase Button = "btn btn- éxito" ng clic = "editUser (" nuevo ")">
<Class = "glyphicon glyphicon- Span usuario"> </ span> Crear nuevo usuario
</ Button>
<Hr>
<H3 ng-show = "editar "> Crear nuevo usuario: </ h3>
<H3-ng = ocultar "editar "> Editar usuario: </ h3>
<Clase Form = "forma horizontal ">
<Div class = "forma-grupo ">
<Clase Label = "col-sm -2 control de etiqueta"> Nombre: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -model = "fName" ng-disabled = "! Editar" marcador de posición = "Nombre">
</ Div>
</ Div>
<Div class = "forma-grupo ">
<Etiqueta class = "col-sm -2 control de etiqueta"> Apellido: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -model = "lName" ng-disabled = "! Editar" marcador de posición = "Apellido">
</ Div>
</ Div>
<Div class = "forma-grupo ">
<Etiqueta class = "col-sm -2 control de etiqueta"> Contraseña: </ label>
<Div class = "col-sm -10">
<Entrada type = "contraseña" ng -model = "passw1" marcador de posición = "contraseña">
</ Div>
</ Div>
<Div class = "forma-grupo ">
<Etiqueta class = "col-sm -2 control de etiqueta"> Repetir: </ label>
<Div class = "col-sm -10">
<Entrada type = "contraseña" ng -model = "passw2" marcador de posición = "Repetir contraseña">
</ Div>
</ Div>
</ Form>
<Hr>
<Clase Button = "btn btn- éxito" = "error || incompleta" ng-desactivado>
<Span class = "glyphicon glyphicon- guardar"> </ span> Guardar cambios
</ 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>
<Cuerpo ng-app = "myApp " ng-controller = "userCtrl">
<Div class = "contenedor">
<H3> Usuarios </ h3>
<Tabla class = "mesa- mesa de rayas">
<Culata en T> <tr>
<TH> Editar </ th>
<TH> Nombre </ th >
<TH> Apellidos </ th >
</ Tr> </ culata en T>
<Tbody> <tr ng-repeat = "usuario en usuarios">
<Td>
<Clase Button = "btn" ng -clic = "editUser (user.id)">
<Span class = "glyphicon glyphicon- lápiz"> </ span> & nbsp; & nbsp; Editar
</ Button>
</ Td>
<Td> {{}} user.fName </ td>
<Td> {{}} user.lName </ td>
</ Tr> </ tbody>
</ Table>
<Hr>
<Clase Button = "btn btn- éxito" ng clic = "editUser (" nuevo ")">
<Class = "glyphicon glyphicon- Span usuario"> </ span> Crear nuevo usuario
</ Button>
<Hr>
<H3 ng-show = "editar "> Crear nuevo usuario: </ h3>
<H3-ng = ocultar "editar "> Editar usuario: </ h3>
<Clase Form = "forma horizontal ">
<Div class = "forma-grupo ">
<Clase Label = "col-sm -2 control de etiqueta"> Nombre: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -model = "fName" ng-disabled = "! Editar" marcador de posición = "Nombre">
</ Div>
</ Div>
<Div class = "forma-grupo ">
<Etiqueta class = "col-sm -2 control de etiqueta"> Apellido: </ label>
<Div class = "col-sm -10">
<Input type = "text" ng -model = "lName" ng-disabled = "! Editar" marcador de posición = "Apellido">
</ Div>
</ Div>
<Div class = "forma-grupo ">
<Etiqueta class = "col-sm -2 control de etiqueta"> Contraseña: </ label>
<Div class = "col-sm -10">
<Entrada type = "contraseña" ng -model = "passw1" marcador de posición = "contraseña">
</ Div>
</ Div>
<Div class = "forma-grupo ">
<Etiqueta class = "col-sm -2 control de etiqueta"> Repetir: </ label>
<Div class = "col-sm -10">
<Entrada type = "contraseña" ng -model = "passw2" marcador de posición = "Repetir contraseña">
</ Div>
</ Div>
</ Form>
<Hr>
<Clase Button = "btn btn- éxito" = "error || incompleta" ng-desactivado>
<Span class = "glyphicon glyphicon- guardar"> </ span> Guardar cambios
</ Button>
</ Div>
<Script src = "myUsers.js"> </ script>
</ Body>
</ Html>
Trate »
análisis de comandos
| AngularJS directivas | descripción |
|---|---|
| <Html ng-app | Para el <html> define una aplicación (sin nombre) |
| <Body-ng controlador | Para las etiquetas <body> define un controlador |
| <Tr-ng repetición | usuarios de ciclo de un conjunto de objetos, cada objeto de usuario en un elemento <tr>. |
| <Botón ng-clic | Cuando la función se llama editUser clic <button> cuando () |
| <H3 ng-show | Si edita = verdadero elemento de visualización <h3> |
| <H3-ng ocultar | Si edita = true ocultos <h3> elemento |
| <Input-ng modelo | Encuadernación <input> elemento para la aplicación |
| <Botón-ng discapacitados | ncomplete = true <button> Si se produce un error o Desactivar |
la rutina de carga de la analítica
| elemento | la rutina de carga | definiciones |
|---|---|---|
| <Div> | envase | El contenido del recipiente |
| <Tabla> | mesa | mesa |
| <Tabla> | tabla de rayas | Tabla fondo de rayas |
| <Botón> | BTN | pulsador |
| <Botón> | btn-éxito | botón de éxito |
| <Span> | glyphicon | cheurón |
| <Span> | glyphicon-lápiz | icono del lápiz |
| <Span> | glyphicon-usuario | icono de usuario |
| <Span> | glyphicon-save | Guardar icono |
| <Forma> | forma horizontal | mesa horizontal |
| <Div> | forma de grupos | Grupo forma |
| <Label> | el control de etiqueta | Controller Tags |
| <Label> | col-sm-2 | Más de dos |
| <Div> | col-SM-10 | Más del 10 |
código JavaScript
myUsers.js
angular.module ( 'myApp', [] ). controlador ( 'userCtrl', function ($ ámbito de aplicación) {
$ 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) {
si (id == 'nueva') {
$ 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;
}
};
. $ $ Ámbito reloj ( 'passw1 ', function () {$ scope.test ();});
. $ $ Ámbito reloj ( 'passw2 ', function () {$ scope.test ();});
. $ $ Ámbito reloj ( 'fName ', function () {$ scope.test ();});
. $ $ Ámbito reloj ( '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) {
si (id == 'nueva') {
$ 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;
}
};
. $ $ Ámbito reloj ( 'passw1 ', function () {$ scope.test ();});
. $ $ Ámbito reloj ( 'passw2 ', function () {$ scope.test ();});
. $ $ Ámbito reloj ( 'fName ', function () {$ scope.test ();});
. $ $ Ámbito reloj ( '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;
}
};
});
análisis de código JavaScript
| Propiedades del ámbito | uso |
|---|---|
| $ Scope.fName | Las variables del modelo (nombre de usuario) |
| $ Scope.lName | Las variables del modelo (nombre de usuario) |
| $ Scope.passw1 | Las variables del modelo (contraseña de usuario 1) |
| $ Scope.passw2 | Las variables del modelo (contraseña del usuario 2) |
| $ Scope.users | Las variables del modelo (arrays) de los usuarios |
| $ Scope.edit | Se establece en true cuando el usuario hace clic para crear un usuario. |
| $ Scope.error | Si no es igual passw1 passw2 establece en true |
| $ Scope.incomplete | Si cada campo está vacío (longitud = 0) se establece en true |
| $ Scope.editUser | Configuración de las variables del modelo |
| $ Scope.watch | las variables del modelo de monitor |
| $ Scope.test | Los errores de validación, y la exhaustividad de las variables del modelo |