¿Qué es AngularJS?
AngularJS es un marco estructural diseñado para aplicaciones web dinámicas. Le permite usar HTML como lenguaje de plantilla, y al extender la sintaxis HTML, puede construir los componentes de su aplicación de manera más clara y concisa. Su innovación es que utiliza la vinculación de datos y la inyección de dependencia, lo que elimina la necesidad de escribir mucho código. Todos estos se implementan a través de JavaScript del lado del navegador, lo que también lo hace perfectamente combinado con cualquier tecnología del lado del servidor.
AngularJS está diseñado para superar las deficiencias de HTML en aplicaciones de construcción. HTML es un buen lenguaje declarativo diseñado para la pantalla de texto estático, pero será débil si desea crear aplicaciones web. Así que hice algo de trabajo (podrías pensar que fue un pequeño truco) para que el navegador haga lo que quiero. formatear
Por lo general, utilizamos las siguientes tecnologías para resolver las deficiencias de la tecnología web estática en la creación de aplicaciones dinámicas:
1. Biblioteca de clases: la biblioteca de clases es una colección de funciones que pueden ayudarlo a escribir aplicaciones web. Es su código el que lo lleva, y depende de usted decidir cuándo usar la biblioteca de clases. Las bibliotecas de clases incluyen: jQuery, etc.
2. Framework: el marco es una aplicación web especial e implementada, solo necesita completar la lógica comercial específica. El marco juega un papel principal aquí, y llama a su código en función de la lógica de aplicación específica. Los marcos incluyen: Knockout, Sproutcore, etc.
AngularJS utiliza un enfoque diferente, que trata de compensar las deficiencias de HTML en las aplicaciones de construcción. AngularJS permite a los navegadores reconocer una nueva sintaxis mediante el uso de una estructura que llamamos identificadores. Por ejemplo:
1. Use la sintaxis {{}} {}} para la unión de datos;
2. Use la estructura de control DOM para iterar u ocultar fragmentos DOM;
3. Formularios de soporte y verificación de forma;
4. Ser capaz de asociar el código lógico a los elementos DOM relacionados;
5. Puede dividir HTML en componentes reutilizables.
Soluciones de extremo a extremo
AngularJS está tratando de convertirse en una solución de extremo a extremo en aplicaciones web. Esto significa que no es solo una pequeña parte de su aplicación web, sino una solución completa de extremo a extremo. Esto hará que Angularjs parezca "terco" al construir una aplicación que tenga Crud (Agregar creación, recuperación de consultas, actualizar actualizaciones, eliminar eliminar) (el texto original es obstinado, lo que significa que no hay muchas otras formas). Pero a pesar de su "terquedad", todavía garantiza que su "terquedad" esté justo en el punto de partida de construir su aplicación, y que aún puede cambiar de manera flexible. Algunas de las características sobresalientes de Angularjs son las siguientes:
1. Todos los contenidos posibles que se pueden usar para construir una aplicación CRUD incluyen: enlace de datos, identificadores de plantillas básicas, verificación de forma, enrutamiento, enlace profundo, reutilización de componentes e inyección de dependencia.
2. Los aspectos de prueba incluyen: pruebas unitarias, pruebas de extremo a extremo, simulación y marcos de prueba automatizados.
3. Aplicación de semillas con diseño de directorio y scripts de prueba como punto de partida.
La ternura de los angularesjs
AngularJS simplifica el desarrollo de aplicaciones al presentar un mayor nivel de abstracción para los desarrolladores. Al igual que otras técnicas abstractas, esto también pierde cierta flexibilidad. En otras palabras, no todas las aplicaciones son adecuadas para su uso con AngularJS. AngularJS considera principalmente la construcción de aplicaciones CRUD. Afortunadamente, al menos el 90% de las aplicaciones web son aplicaciones CRUD. Pero para comprender lo que es adecuado para construir con angularjs, debe comprender lo que no es adecuado para construir con angularjs.
Como los juegos y los editores de interfaz gráficos, las aplicaciones con operaciones DOM frecuentes y complejas son muy diferentes de las aplicaciones CRUD. No son adecuados para construir con angularjs. Puede ser mejor usar algunas técnicas más ligeras y simples como jQuery como esta.
Una simple instancia de Angularjs
A continuación se muestra una aplicación CRUD típica que contiene un formulario. El valor del formulario se verifica primero y luego se usa para calcular el valor total, que se formateaba en el estilo local. Aquí hay algunos conceptos comunes para los desarrolladores, primero debe comprender:
1. Asociar el modelo de datos (modelo de datos) a la vista (UI);
2. Escriba, lea y verifique la entrada del usuario;
3. Calcule nuevos valores basados en el modelo;
4. Localice el formato de salida.
index.html:
La copia del código es la siguiente:
<! Doctype html>
<html ng-app>
<Evista>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<script src = "script.js"> </script>
</ablo>
<Body>
<div ng-confontroller = "invoiceCntl">
<b> factura: </b>
<br>
<br>
<Table>
<tr> <td> cantidad </td> <td> costo </td> </tr>
<tr>
<TD> <input type = "Integer" min = "0" ng-model = "Qty" requerido> </td>
<td> <input type = "number" ng-model = "costo" requerido> </td>
</tr>
</table>
<hr>
<b> Total: </b> {{Qty * Costo | divisa}}
</div>
</body>
</html>
script.js:
La copia del código es la siguiente:
función invoicecntl ($ alcope) {
$ scope.qty = 1;
$ scope.cost = 19.95;
}
Prueba de extremo a extremo:
La copia del código es la siguiente:
it ('debería mostrar de unión angular', function () {
Espere (vinculante ('Qty * costo')). Toqual ('$ 19.95');
entrada ('Qty'). Enter ('2');
entrada ('costo'). Ingrese ('5.00');
Espere (vinculante ('Qty * costo')). Toqual ('$ 10.00');
});
función invoicecntl ($ scope) {$ scope.qty = 1; $ scope.cost = 19.95;}
Efecto de ejecución:
La copia del código es la siguiente:
Factura:
Costo de la cantidad
Total: {{Qty * Costo | divisa}}
Pruebe el ejemplo anterior y echemos un vistazo a cómo funciona este ejemplo juntos. En la etiqueta ``, utilizamos un identificador `Ng-App` para indicar que esta es una aplicación AngularJS. Este identificador `Ng-App` hará que AngularJS ** inicialice automáticamente su aplicación. Usamos la etiqueta `` para cargar el script Angularjs: <script src = "http://code.angularjs.org/angular-1.1.0.min.js">
Al establecer la propiedad del modelo NG en la etiqueta <put>, AngularJS vinculará automáticamente los datos en dos vías. También realizamos algunas verificaciones de datos simples al mismo tiempo:
La copia del código es la siguiente:
Cantidad: <input type = "entero" min = "0" ng-model = "Cant." Requerido>
Costo: <input type = "número" ng-model = "costo" requerido>
El widget de este cuadro de entrada parece ordinario, pero no es ordinario si reconoce los siguientes puntos:
1. Cuando la página está cargada, AngularJS generará variables con el mismo nombre de acuerdo con el nombre del modelo (Cant, costo) declarado en el widget. Puede pensar en estas variables como M (modelo) en el patrón de diseño MVC;
2. Tenga en cuenta que la entrada en el widget anterior tiene habilidades especiales. Si no ingresa datos o los datos de entrada no son válidos, este cuadro de entrada de entrada se pondrá en rojo automáticamente. Esta nueva característica del cuadro de entrada facilita a los desarrolladores implementar las funciones comunes de verificación de campo en aplicaciones CRUD.
Finalmente, podemos echar un vistazo a los misteriosos tirantes dobles:
La copia del código es la siguiente:
Total: {{Qty * Costo | divisa}}
Esta etiqueta {{Expression}} es la unión de datos AngularJS. Las expresiones en ella pueden ser una combinación de una expresión y un filtro ({{expresión | filtro}}). AngularJS proporciona filtros para formatear datos de entrada y salida.
En el ejemplo anterior, la expresión en {{}} le pide a AngularJS que multiplique los datos obtenidos del cuadro de entrada, luego formatea el resultado de multiplicación al estilo de moneda local y luego los emite a la página.
Vale la pena mencionar que no llamamos a ningún método AngularJS ni escribimos una lógica específica como usar un marco, pero hemos completado las funciones anteriores. Detrás de esta implementación está que el navegador hace más trabajo que antes para generar páginas estáticas, lo que le permite satisfacer las necesidades de aplicaciones web dinámicas. AngularJS reduce el umbral de desarrollo para aplicaciones web dinámicas hasta el punto en que no hay necesidad de bibliotecas o marcos de clases.
"Zen Tao (concepto)" de Angularjs
Angular cree que al construir vistas (UI) y escribir lógica de software, el código declarativo será mucho mejor que el código imperativo, aunque el código imperativo es muy adecuado para expresar la lógica comercial.
1. Desacoplar las operaciones DOM y la lógica de la aplicación es una muy buena idea, que puede mejorar en gran medida la sintonizabilidad del código;
2. Es una muy, muy buena idea tratar las pruebas y el desarrollo por igual. La dificultad de las pruebas depende en gran medida de la estructura del código;
3. Desacoplar el lado del cliente y el servidor es una práctica particularmente buena. Puede permitir que ambas partes se desarrollen en paralelo y permitan la reutilización de ambos lados;
4. Si el marco puede guiar a los desarrolladores a lo largo de todo el proceso de desarrollo: desde el diseño de la interfaz de usuario, escribir lógica comercial y luego probar, será de gran ayuda para los desarrolladores;
5. Siempre es bueno "simplificar el complejo en simplificación y simplificarlo en cero".
Angularjs puede liberarte de la siguiente pesadilla:
1. Use devoluciones de llamada: el uso de devoluciones de llamada interrumpirá la legibilidad de su código, hará que su código se fragmente y es difícil ver la lógica comercial original. Es bueno eliminar algún código común, como devoluciones de llamada. Una reducción drástica del código que tiene que escribir debido al diseño del lenguaje JavaScript puede permitirle ver la lógica de su aplicación más claramente.
2. Escriba manualmente código para operar elementos DOM: Operar DOM es una parte muy básica de las aplicaciones AJAX, pero siempre es "engorrosa" y propensa a errores. La interfaz de la interfaz de usuario descrita de manera declarativa puede cambiar con el cambio de estado de la aplicación, lo que le permite liberarte de escribir código de operación DOM de bajo nivel. En la mayoría de las aplicaciones escritas en AngularJS, los desarrolladores ya no necesitan escribir códigos que operen DOM por sí mismos, pero aún puede escribirlas si lo desea.
3. Lea y escriba datos en la interfaz de la interfaz de usuario: una gran parte de las aplicaciones AJAX son las operaciones CRUD. Un proceso clásico es formar los datos del servidor en objetos internos, luego compilar el objeto en formularios HTML y el usuario modifica el formulario y luego verifique el formulario. Si hay algún error, mostrará el error y luego reorganizará los datos en objetos internos y los devuelve al servidor. Hay demasiado código para repetirse en este proceso, lo que hace que el código siempre parezca describir todo el proceso de ejecución de la aplicación, en lugar de la lógica comercial específica y los detalles comerciales.
4. Debe escribir mucho código básico antes de comenzar: por lo general, debe escribir mucho código básico para implementar una aplicación "Hello World". Con AngularJS, proporcionará algunos servicios que le permitirán comenzar a escribir su aplicación fácilmente, y estos servicios se agregan automáticamente a su aplicación con una inyección de dependencia de inyección de dependencia de dependencia de dependencia de Guice, que le permite ingresar rápidamente el desarrollo específico de su aplicación. Lo que es especialmente cierto es que puede comprender completamente el proceso de inicialización de las pruebas automatizadas.