Créez des applications Web ultramodernes avec du matériel angulaire

Lors de la conférence Google I/O en 2014, Google a annoncé Material Design, son nouveau langage de conception. Ils ont depuis converti une grande partie de leurs applications populaires pour adhérer à cette nouvelle spécification dans le but de fournir une expérience cohérente. Maintenant, ils essaient de vous convaincre de suivre également.

Qu'est-ce que la conception matérielle ?

Après une visite à la spécification officielle de Material Design, vous aurez immédiatement une sensation de minimalisme ultra-moderne. Les formes de base et les couleurs plates sont le thème ici. Parcourir la documentation est toute une expérience. Je vous recommande de jeter un coup d'œil par vous-même, mais je vais le résumer ici.

But

Le but est de créer un langage visuel qui synthétise les principes classiques d'un bon design avec l'innovation et les possibilités de la technologie et de la science. Également pour développer un système sous-jacent unique qui permet une expérience unifiée sur différentes plates-formes et tailles d'appareils.

Des principes

Le Material Design est fondé sur trois principes.

Le matériel est la métaphore

Inspiré par l'étude du papier et de l'encre, le matériau vit dans l'espace 3D et est ancré dans la réalité tactile. Il donne l'illusion d'espace en utilisant des ombres réalistes. Le matériau papier doit respecter les lois de la physique (c'est-à-dire que deux morceaux de papier ne peuvent pas se traverser), mais peut remplacer le monde physique (c'est-à-dire qu'un papier peut grossir ou rétrécir).

Audacieux, Graphique, Intentionnel

Des choix de couleurs délibérés, des images bord à bord, une typographie à grande échelle et un espace blanc intentionnel créent une interface audacieuse et graphique qui plonge l'utilisateur dans l'expérience. Le bouton d'action flottant, ou FAB, est un excellent exemple de ce principe. Avez-vous remarqué ce petit cercle avec le symbole "plus" flottant dans votre application Google Inbox ? Material Design rend très évident qu'il s'agit d'un bouton important.

Le mouvement donne du sens

Le mouvement est significatif et approprié, servant à concentrer l'attention et à maintenir la continuité. Les commentaires sont subtils mais clairs. Les transitions sont efficaces mais cohérentes. Le point principal ici est de n'animer que lorsqu'il a un but et de ne pas en faire trop.

Comment AngularJS s'intègre-t-il dans la conception de matériaux ?

AngularJS, le "Superheroic JavaScript MVW Framework" de Google, répond à de nombreux défis rencontrés dans le développement d'applications monopage (SPA). Il fournit le cadre nécessaire à la création d'applications Web modernes qui se connectent aux API et n'ont jamais besoin d'actualiser la page.

AngularJS : une nouvelle approche

Angular est ce que HTML aurait été s'il avait été conçu pour les applications. HTML est un excellent langage déclaratif pour les documents statiques, mais pas tellement pour la création d'applications dynamiques.

La création d'applications dynamiques avec HTML a toujours été un exercice consistant à inciter le navigateur à faire des choses qu'il n'était pas censé faire. Il existe plusieurs approches pour y parvenir.

1. Bibliothèque - une collection de fonctions. (jQuery)
2. Framework - le code remplit dynamiquement les éléments statiques si nécessaire. (Durandal, Braise)

Angular adopte une approche différente pour résoudre ce problème. Au lieu de se débattre avec le code HTML qui lui est fourni, il crée de nouvelles constructions HTML. Angular enseigne au navigateur une nouvelle syntaxe HTML via une construction appelée "directives". Angular est livré avec un ensemble de ces directives intégrées, mais vous permet également de créer des directives personnalisées, ce qui vous permet d'écrire vos propres éléments HTML.

Ne serait-il pas intéressant que Google crée un ensemble de directives basées sur les principes du Material Design ?

Présentation du matériau angulaire

Google développe activement Angular Material, une implémentation de Material Design dans AngularJS. Angular Material fournit un ensemble de composants d'interface utilisateur réutilisables basés sur le système Material Design. Angular Material est composé de plusieurs pièces. Il dispose d'une bibliothèque CSS pour la typographie et d'autres éléments, il fournit une approche JavaScript intéressante pour la thématisation et sa mise en page réactive utilise une grille flexible. Mais la caractéristique la plus attrayante de Angular Material est son incroyable collection de directives.

Commencer

J'ai créé un projet open source pour vous aider à démarrer votre prochain projet Angular Material. Le but de ce projet est de donner un exemple de tout ce que Angular Material a à offrir, le tout sous un même toit. La navigation, la pagination, la thématisation et toute la collection de directives sont prêtes à l'emploi, tout ce que vous avez à faire est d'alimenter vos données et de les lier au HTML.

Jetez un œil à la démo ici ou bifurquez le code sur GitHub.

Directives

Les directives sont une fonctionnalité angulaire essentielle. Angular est livré avec plusieurs directives que vous utilisez tout le temps comme ng-model ou ng-repeat. Ils sont un élément très important d'Angular qui fait fonctionner le framework comme il se doit.

Comment utiliser une directive de matériau angulaire

Angular Material étend cette bibliothèque de directives avec un ensemble de belles directives inspirées de Material Design. Les directives Angular Material sont des balises HTML qui commencent par 'md'; abréviation de Material Design. Ils ne pourraient pas être beaucoup plus faciles à utiliser. Par exemple, regardons le bon vieux bouton.

Un bouton HTML standard pourrait ressembler à ceci.

 <button>Click Me</button>

Un bouton de matériau angulaire ressemble à ceci.

 <md-button>Click Me</md-button>

Et c'est tout ce qui est nécessaire pour créer un bouton Material. Maintenant, il existe plusieurs autres options disponibles pour cette directive, telles que la thématiser et l'élever de la surface pour impliquer l'importance.

 <md-button class="md-raised md-primary md-hue-1">Click Me</md-button>

Prestations de service

Les services sont également au cœur de la fonctionnalité angulaire. Ils sont utilisés pour partager du code dans l'application. Un service de base commun comme $ http est utilisé et réutilisé pour les appels de données dans les applications angulaires.

Les services angulaires sont :

1. Instancié paresseusement - Angular n'instancie un service que lorsqu'un composant d'application en dépend.
2. Singletons – Chaque composant dépendant d'un service obtient une référence à l'instance unique générée par la fabrique de services.

Comment utiliser un service de matériau angulaire

Angular Material est fourni avec certains services qui fournissent des fonctionnalités supplémentaires à l'application. Ils contribuent également à l'exécution de certaines des directives. Un bon exemple d'un service est le «toast».

Un toast est une petite notification qui glisse du haut de l'écran et disparaît après quelques secondes. L'utilisation de ce service est facile.

En JavaScript,

 $mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );

Cet exemple montre un toast simple qui apparaît en bas à gauche de l'écran et se retire après 3 secondes.

Certains services peuvent être personnalisés avec des modèles personnalisés. Dans ce cas, le service $mdToast peut utiliser un modèle HTML personnalisé en utilisant la directive md-toast.

Thématisation

Le Material Design est un langage visuel où les thèmes véhiculent un sens à travers la couleur, les tons et le contraste. Ces thèmes sont exprimés dans tous les composants de l'ensemble de l'application pour fournir une sensation plus unifiée.

Selon les directives de Material Design, vous devez "limiter votre sélection de couleurs en choisissant trois teintes de couleur dans la palette principale et une couleur d'accent dans la palette secondaire". Angular Material simplifie le suivi de cette directive en utilisant JavaScript pour configurer le thème. Mais d'abord, qu'est-ce qu'une palette et une teinte ?

• Teinte : Une teinte est une couleur unique dans une palette.
• Palette : Une palette est une collection de teintes.

Par exemple, une palette serait "verte" et une teinte est une nuance particulière de vert. Angular Material est fourni avec toutes les palettes valides de la spécification Material Design. Vous pouvez en savoir plus sur les palettes de couleurs valides ici.

Configuration du thème

Thématiser votre projet est un jeu d'enfant. Dans le fichier app.js, définissez les palettes et les teintes souhaitées à l'aide du service Theming Provider.

 angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('cyan', { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });

Utilisation du thème

Pour appliquer le thème aux composants, définissez la classe de l'élément sur la palette et la teinte souhaitées.

 <md-button class="md-primary">Click me</md-button> <md-button class="md-primary md-hue-1">Click me</md-button> <md-button class="md-primary md-hue-2">Click me</md-button> <md-button class="md-accent">or maybe me</md-button> <md-button class="md-warn">Careful</md-button>

Mise en page

Flexbox est le dernier et le plus grand ajout à la conception réactive et Angular Material est fourni avec. Si vous connaissez le système de grille Bootstrap, vous devriez pouvoir comprendre rapidement. En fait, Bootstrap passe à Flexbox dans sa prochaine version. Il a la disposition familière des lignes et des colonnes à laquelle vous êtes habitué, mais avec beaucoup plus. Apprenez à utiliser Flexbox avec ce tutoriel ou étudiez la documentation officielle.

Top 9 des meilleures directives de matériaux angulaires

Il y a trop de directives Angular Material pour toutes les énumérer, alors je voudrais partager avec vous mes préférées.

9. Progression linéaire

Souvent, dans les SPA, les pages ont besoin de temps pour charger les données du serveur. Si l'application affiche une page vierge pendant ce temps, les utilisateurs peuvent penser que l'application est cassée et vont partir. Informez les utilisateurs que les données se chargent avec la directive Progress Linear. Les utilisateurs sauront attendre lorsqu'ils verront une barre de progression animée indiquant que quelque chose se passe. Vous pouvez également utiliser la directive Progress Circular pour un indicateur rond.

8. Sélecteur de date

La directive Date Picker fait du choix d'une date une expérience propre et simple pour l'utilisateur et un véritable one-liner à écrire. Utilisez simplement md-datepicker et limitez éventuellement la plage avec md-min-date et md-max-date et c'est tout.

7. Saisie semi-automatique

La saisie semi-automatique offre une expérience utilisateur agréable en aidant l'utilisateur à choisir une option. C'est ce qui rend le moteur de recherche de Google le meilleur. La directive Autocomplete ajoute cette fonctionnalité à votre application en complétant les mots d'un utilisateur au fur et à mesure de leur saisie. Mais la meilleure partie de cette directive est la personnalisation. En remplissant votre autocomplete avec md-item-template vous pouvez donner plus de sens aux suggestions. Par exemple, si un utilisateur recherchait des noms dans une entreprise, la saisie semi-automatique pourrait afficher les noms correspondants avec leur image et leur rôle dans l'entreprise, offrant une expérience utilisateur plus robuste.

6. Feuille inférieure

La feuille inférieure est un petit menu qui glisse vers le haut depuis le bas de votre écran, couvrant le contenu et mettant l'accent. Initialement destinée à être utilisée uniquement pour les appareils mobiles, la feuille inférieure a gagné en popularité sur les écrans plus grands. Pour l'utiliser, créez un modèle avec md-bottom-sheet contenant soit un md-grid, soit un md-list pour une mise en page en grille ou en liste, respectivement. Appelez-le ensuite avec le service Bottom Sheet, $mdBottomSheet.show().

5. Entrée

Les formulaires de saisie sont ennuyeux et le sont depuis le début d'Internet. Mais ils n'ont pas à l'être ! Donnez du style à vos entrées avec la directive Input. Enveloppez votre balise d'entrée avec md-input-container et regardez-la prendre vie. Regardez votre espace réservé s'animer en une étiquette flottante. Validez facilement votre entrée avec des changements de couleur et des messages d'avertissement instantanés mais subtils. La directive d'entrée prend un élément qui devrait être ennuyeux et offre une agréable surprise.

4. Griller

L'expérience utilisateur la plus aggravante est de ne pas savoir ce que fait l'application. Nous atténuons cette aggravation avec des grille-pain ou de petites notifications discrètes. Autrefois, lorsque nous envoyions une demande au serveur, nous attendions sur cette page jusqu'à ce que la réponse revienne avant de pouvoir passer à autre chose. La durée d'attention de l'utilisateur a considérablement diminué depuis lors. Dans les SPA d'aujourd'hui, nous cliquons sur un bouton et nous nous attendons à avancer immédiatement, en traitant la réponse du serveur lorsqu'elle se présente. La directive Toast en fait un jeu d'enfant. Un grille-pain est invoqué en utilisant simplement le service Toast, $mdToast.show(), et en définissant le texte, la durée et le coin dans lequel il doit apparaître. Créez votre propre grille-pain personnalisé avec md-toast.

3. Grille de liste

Vos listes manquent de piquant ? Les listes en grille sont une alternative aux vues de liste standard. Une liste de grille est idéale pour présenter des images et est optimisée pour la compréhension visuelle. Il fonctionne en posant des carreaux de différentes tailles sur une grille, donnant une sensation dispersée et éclectique. La taille et la disposition des tuiles répondent alors à la taille de l'écran. Cette directive donnera à coup sûr à votre application un aspect excitant et amusant.

2. Cadre blanc

Le concept d'espace est au cœur du Material Design et de sa métaphore du papier. Deux feuilles de papier dans la même position z (ou profondeur) forment une couture et doivent se déplacer ensemble. Deux feuilles de papier qui se chevauchent, avec des positions z différentes, forment une marche. Ils se déplacent indépendamment les uns des autres. Pour suivre la conception, nous devons pouvoir déplacer des éléments le long de l'axe z. Angular Material fournit un moyen simple de le faire. À l'aide de la directive Whiteframe, définissez la classe sur md-whiteframe-z{x}, où x est les unités de profondeur à partir de l'arrière-plan. Plus le nombre est grand, plus l'ombre projetée par le papier est grande.

1. Sidenav

Créer un menu de navigation latéral n'a jamais été aussi facile. La directive Sidenav place un menu de navigation à gauche ou à droite de l'écran. En gardant à l'esprit le mobile, il glisse vers l'intérieur et l'extérieur comme prévu, ou par programmation en un clic de bouton. Un ajout intéressant est la fonction de verrouillage ouvert. La navigation latérale peut être configurée pour se verrouiller lorsque l'écran atteint une certaine taille. En définissant le paramètre md-is-locked-open="$mdMedia('gt-sm')", le menu sera caché sur le téléphone mais verrouillé ouvert sur la tablette et plus.

Conclusion

Google convertit ses applications les plus populaires en Material Design. Ils dirigent maintenant le développement de Angular Material, une implémentation de Material Design écrite en AngularJS. Material Design utilise une métaphore du papier, des intentions audacieuses et un mouvement significatif. AngularJS organise les applications d'une seule page. Angular Material applique les principes de Material Design aux applications AngularJS.

Material Design est là et Angular Material est un moyen fantastique d'appliquer la spécification de conception Material à vos applications d'une seule page. Si vous souhaitez créer votre propre application Angular Material, ne perdez pas votre temps à partir de zéro. Commencez plutôt avec une application entièrement fonctionnelle avec des démos des directives, une thématique déjà configurée, et une navigation et un routage prêts à l'emploi. Jetez un œil à la démo ici ou bifurquez le code sur GitHub. Bien sûr, vous pouvez également tout savoir sur Angular Material en visitant la documentation officielle.

Que pensez-vous de mes choix pour les meilleures directives sur les matériaux angulaires ? Est-ce que je les ai bien compris ? Quels sont vos favoris ?