En la Conferencia Google I / O de 2014, la firma anunció Material Design, su nuevo lenguaje de diseño. Desde entonces, han adherido la mayor parte de sus aplicaciones más populares a esta nueva especificación en un esfuerzo por proporcionar una experiencia coherente. Es un lenguaje visual que sintetiza los principios clásicos de buen diseño con la innovación y las posibilidades que entrega la tecnología y la ciencia. Además de desarrollar un único sistema subyacente que permite una experiencia unificada, a través de diversas plataformas y tamaños de los dispositivos. ¿Cómo se integra AngularJS en Material Design?
AngularJS aborda muchos de los problemas encontrados en el desarrollo de aplicaciones de una sola página (SPA). Proporciona el marco necesario para la creación de aplicaciones web modernas que se conectan a las API y nunca necesitan la página para actualizarse. De cierto modo, Angular es lo que HTML habría sido si hubiera sido diseñado para aplicaciones. HTML es un gran lenguaje declarativo para documentos estáticos, pero queda corto para la creación de aplicaciones dinámicas. De hecho, la creación de aplicaciones dinámicas con HTML siempre ha sido un ejercicio sobre engañar al navegador para que éste haga cosas que no estaba destinado a hacer. Hay un par de enfoques para hacer esto.
- Library: Una colección de funciones. (jQuery) 2. Framework: Un código que llena dinámicamente elementos estáticos cuando sea necesario. (Durandal, Ember) AngularJS adopta un enfoque diferente para resolver este problema. En lugar de luchar con el HTML que es dado, crea nuevas construcciones HTML. Para ello, enseña la nueva sintaxis HTML al navegador a través de una construcción llamada "directivas". AngularJS viene con un conjunto de estas directivas incorporadas, pero también puede crear directivas personalizadas, lo que le permite escribir sus propios elementos HTML.
Presentando a Angular Material Google está desarrollando activamente Angular Material, una implementación de Material Design en AngularJS. Angular Material ofrece un conjunto de componentes de interfaz de usuario reutilizables y basados en el sistema de Material Design.
Esta implementación se compone de varias piezas: cuenta con una biblioteca CSS para la tipografía y otros elementos, proporciona un enfoque interesante JavaScript para tematización y su diseño responsive utiliza una rejilla flexible. Pero la característica más atractiva de Material Angular es su increíble colección de directivas.
Directivas Las directivas son el núcleo de las características de Angular. Éste viene con varias directivas que se utilizan todo el tiempo, como ng-model o ng-repeat. Se trata de una pieza muy importante de Angular.
Angular Material extiende esta biblioteca de directivas con un conjunto de hermosas directrices inspiradas en Material Design. Las directivas de Angular Material son etiquetas HTML que comienzan con 'md'; abreviatura de “Material Design”.
Servicios
Los servicios también son la base de la funcionalidad de Angular. Se utilizan para compartir código a través de la aplicación. Un servicio básico común como $http se usa y se reutiliza para las llamadas de datos en aplicaciones angular. Los servicios de Angular son: 1. Lazily instantiated: Angular solo instancia un servicio cuando un componente de aplicación depende de ello. 2. Singletons - Cada componente dependiente en un servicio para crear una referencia de la única instancia generada por la fábrica de servicio.
Tematización Material Design es un lenguaje visual donde los temas transmiten el significado a través del color, los tonos y el contraste. Estos temas se expresan a través de componentes en toda la aplicación para ofrecer una sensación más unificada.
De acuerdo con las directrices de diseño de materiales, se debe "limitar su selección de colores eligiendo tres tonos de color de la paleta de primaria y otro color de acento de la paleta secundaria. Angular Material sigue esta directriz sencilla mediante el uso de JavaScript para configurar el tema. Pero primero, ¿Qué es una paleta y un tono?
- Matiz: Un matiz es un solo color en una paleta. • Paleta: Una paleta es una colección de tonos.
Diseño Flexbox es la última y más grande adición del diseño responsivo que viene empaquetado con Angular Material. Si está familiarizado con el sistema de red Bootstrap, entonces deberías ser capaz de entenderlo rápidamente. De hecho, Bootstrap cambiará a Flexbox en su próximo lanzamiento. Tiene las filas familiares y columnas de diseño acostumbradas, pero también mucho más.
Material Design está aquí y Angular Material es una fantástica manera de aplicar las especificaciones de diseño de materiales para sus aplicaciones de una sola página. Si desea crear su propia aplicación en Angular Material, no es necesario partir de cero. Más bien, empezar con una aplicación totalmente funcional con demostraciones de las directivas, tematización ya establecido, y la navegación y enrutamiento listo.
