Share
AngularJS es un excelente marco de JavaScript que tiene algunas características muy atractivas no solo para desarrolladores, sino también para diseñadores. En este tutorial, cubriremos lo que considero las características más esenciales y cómo pueden ayudar a que su próxima aplicación web sea impresionante..
Para tener una idea de lo que puede hacer con AngularJS, consulte la gama de artículos de AngularJS en Envato Market. Puede encontrar un recortador de imágenes, una aplicación web de comercio electrónico, un editor JSON y mucho más..
Artículos AngularJS en Envato Market AngularJS es una nueva y poderosa tecnología del lado del cliente que proporciona una manera de lograr cosas realmente poderosas de una manera que abarca y amplía HTML, CSS y JavaScript, al tiempo que apunta algunas de sus deficiencias evidentes. Es lo que habría sido HTML si se hubiera creado para contenido dinámico.
En este artículo, cubriremos algunos de los conceptos más importantes de AngularJS para obtener el "panorama general". Mi objetivo es que, después de ver algunas de estas características, esté lo suficientemente emocionado como para construir algo divertido con AngularJS..
Piense en su modelo como la única fuente de verdad para su aplicación. Tu modelo es donde vas a leer o actualizar cualquier cosa en tu aplicación..
El enlace de datos es probablemente la característica más interesante y útil de AngularJS. Le evitará escribir una cantidad considerable de código repetitivo. Una aplicación web típica puede contener hasta el 80% de su base de código, dedicada a atravesar, manipular y escuchar el DOM. El enlace de datos hace que este código desaparezca, para que pueda centrarse en su aplicación.
Piense en su modelo como la única fuente de verdad para su aplicación. Su modelo es donde usted lee o actualiza cualquier cosa en su aplicación. Las directivas de enlace de datos proporcionan una proyección de su modelo a la vista de la aplicación. Esta proyección es perfecta y se produce sin ningún esfuerzo por su parte..
Tradicionalmente, cuando el modelo cambia, el desarrollador es responsable de manipular manualmente los elementos y atributos DOM para reflejar estos cambios. Esta es una calle de doble sentido. En una dirección, el modelo cambia el cambio de unidad en los elementos DOM. En el otro, los cambios de elementos DOM requieren cambios en el modelo. Esto se complica aún más por la interacción del usuario, ya que el desarrollador es responsable de interpretar las interacciones, fusionarlas en un modelo y actualizar la vista. Este es un proceso muy manual y engorroso, que se vuelve difícil de controlar a medida que una aplicación crece en tamaño y complejidad..
¡Tiene que haber una mejor manera! El enlace de datos bidireccional de AngularJS maneja la sincronización entre el DOM y el modelo, y viceversa.
Aquí hay un ejemplo simple, que demuestra cómo vincular un valor de entrada a un elemento.
Hola, tuNombre!
Esto es extremadamente simple de configurar, y casi mágico ...
Es importante darse cuenta de que en ningún momento AngularJS manipula la plantilla como cadenas. Es todo el navegador DOM.
En AngularJS, una plantilla es simplemente HTML antiguo. Se amplía el vocabulario HTML para que contenga instrucciones sobre cómo debe proyectarse el modelo en la vista..
Las plantillas HTML son analizadas por el navegador en el DOM. El DOM se convierte entonces en la entrada al compilador AngularJS. AngularJS atraviesa la plantilla DOM para las instrucciones de representación, que se llaman directivas. En conjunto, las directivas son responsables de configurar el enlace de datos para la vista de la aplicación..
Es importante darse cuenta de que en ningún momento AngularJS manipula la plantilla como cadenas. La entrada a AngularJS es el navegador DOM y no una cadena HTML. Los enlaces de datos son transformaciones de DOM, no concatenaciones de cadenas o internalHTML cambios El uso de DOM como entrada, en lugar de cadenas, es la mayor diferenciación que AngularJS tiene de sus marcos hermanos. Usar el DOM es lo que le permite ampliar el vocabulario de directivas y construir sus propias directivas, o incluso abstraerlas en componentes reutilizables!
Una de las mayores ventajas de este enfoque es que crea un flujo de trabajo estrecho entre diseñadores y desarrolladores. Los diseñadores pueden marcar su HTML como lo harían normalmente, y luego los desarrolladores toman la batuta y enganchan la funcionalidad a través de enlaces con muy poco esfuerzo.
Aquí hay un ejemplo donde estoy usando el ng-repetir directiva para recorrer el imagenes Arreglar y poblar lo que es esencialmente una img modelo.
function AlbumCtrl ($ scope) scope.images = ["thumbnail": "img / image_01.png", "description": "Image 01 description", "thumbnail": "img / image_02.png", " description ":" Image 02 description ", " thumbnail ":" img / image_03.png "," description ":" Image 03 description ", " thumbnail ":" img / image_04.png "," description " : "Descripción de la imagen 04", "imagen en miniatura": "img / image_05.png", "descripción": "Descripción de la imagen 05"];
También vale la pena mencionar, como nota al margen, que AngularJS no lo obliga a aprender una nueva sintaxis ni a extraer sus plantillas de su aplicación..
AngularJS incorpora los principios básicos detrás del patrón de diseño del software MVC original en la forma en que construye las aplicaciones web del lado del cliente.
El patrón MVC o Modelo-Vista-Controlador significa muchas cosas diferentes para diferentes personas. AngularJS no implementa MVC en el sentido tradicional, sino algo más cercano a MVVM (Model-View-ViewModel).
los modelo Es simplemente los datos en la aplicación. los modelo es simplemente objetos JavaScript antiguos. No es necesario heredar de las clases de marco, envolverlo en objetos proxy o usar métodos especiales de obtención / establecimiento para acceder a él. El hecho de que estemos tratando con JavaScript de vainilla es una característica realmente buena, que reduce el contenido de la aplicación..
UNA modelo de vista es un objeto que proporciona datos y métodos específicos para mantener vistas específicas.
los modelo de vista es el $ alcance Objeto que vive dentro de la aplicación AngularJS.. $ alcance es solo un objeto JavaScript simple con una pequeña API diseñada para detectar y transmitir cambios a su estado.
los controlador Es responsable de establecer el estado inicial y aumentar. $ alcance Con métodos para controlar el comportamiento. Vale la pena señalar que la controlador no almacena el estado y no interactúa con los servicios remotos.
los ver es el HTML que existe después de que AngularJS haya analizado y compilado el HTML para incluir marcas y enlaces renderizados.
Esta división crea una base sólida para diseñar su aplicación. los $ alcance tiene una referencia a los datos, la controlador define el comportamiento, y la ver Maneja la distribución y entrega la interacción a la controlador para responder en consecuencia.
AngularJS tiene un subsistema de inyección de dependencias incorporado que ayuda al desarrollador al hacer que la aplicación sea más fácil de desarrollar, comprender y probar..
La inyección de dependencia (DI) le permite solicitar sus dependencias, en lugar de tener que buscarlas o hacerlas usted mismo. Piense en ello como una manera de decir "Hola, necesito X", y el DI es responsable de crearlo y proporcionárselo..
Para obtener acceso a los servicios centrales de AngularJS, es simplemente una cuestión de agregar ese servicio como un parámetro; AngularJS detectará que necesita ese servicio y le proporcionará una instancia.
function EditCtrl ($ scope, $ location, $ routeParams) // Algo inteligente aquí ...
También puede definir sus propios servicios personalizados y hacer que estén disponibles para inyección..
Accentsconagua
angular. módulo ('MyServiceModule', []). factory ('notificar', ['$ window', function (win) return function (msg) win.alert (msg);;]); function myController (scope, notifyService) scope.callNotify = function (msg) notifyService (msg); ; myController. $ inject = ['$ scope', 'notificar']; Las directivas son mi característica personal favorita de AngularJS. ¿Alguna vez has deseado que tu navegador te haga nuevos trucos? Bueno, ahora puede! Esta es una de mis partes favoritas de AngularJS. También es probablemente el aspecto más desafiante de AngularJS.
Las directivas se pueden usar para crear etiquetas HTML personalizadas que sirven como nuevos widgets personalizados. También se pueden usar para "decorar" elementos con comportamiento y manipular atributos DOM de formas interesantes.
Aquí hay un ejemplo simple de una directiva que escucha un evento y actualiza su $ alcance, en consecuencia.
myModule.directive ('myComponent', function (mySharedService) return restringir: 'E', controller: function ($ scope, $ attrs, mySharedService) $ scope. $ on ('handleBroadcast', function () $ scope .message = 'Directiva:' + mySharedService.message;);, replace: true, template: ''; ); A continuación, puede utilizar esta directiva personalizada, como así.
Crear su aplicación como una composición de componentes discretos hace que sea increíblemente fácil agregar, actualizar o eliminar la funcionalidad según sea necesario.
El equipo de AngularJS cree firmemente que cualquier código escrito en JavaScript debe venir con un conjunto sólido de pruebas. Han diseñado AngularJS teniendo en cuenta la capacidad de prueba, por lo que hace que la prueba de sus aplicaciones AngularJS sea lo más fácil posible. Así que no hay excusa para no hacerlo..
Dado que JavaScript es dinámico e interpretado, en lugar de compilado, es extremadamente importante para los desarrolladores adoptar una mentalidad disciplinada para escribir pruebas..
AngularJS está escrito completamente desde cero para ser comprobable. Incluso viene con una configuración de corredor de prueba de extremo a extremo y de unidad. Si desea ver esto en acción, vaya a ver el proyecto de semilla angular en https://github.com/angular/angular-seed.
Una vez que tienes el proyecto semilla, es muy fácil ejecutar las pruebas en su contra. Aquí es cómo se ve la salida:
La documentación de la API está llena de pruebas de extremo a extremo que hacen un trabajo increíble al ilustrar cómo debería funcionar una determinada parte del marco. Después de un tiempo, me encontré yendo directamente a las pruebas para ver cómo funcionaba algo, y luego tal vez leía el resto de la documentación para descubrir algo..
Hemos cubierto seis de las muchas características de AngularJS que me encantan. Creo que estas seis características son esenciales no solo para comenzar a utilizar AngularJS, sino también para armar su aplicación de una manera que sea mantenible y extensible..
El sitio web de AngularJS, http://angularjs.org, tiene muchos ejemplos prácticos y una documentación excelente. También recomiendo visitar la increíble comunidad en la lista de correo de AngularJS.
Déjame saber lo que piensas!
