matériel

Conception matérielle pour les applications AngularJS

Material Design est une spécification pour un système unifié de conception visuelle, de mouvement et d’interaction qui s’adapte à différents appareils. Notre objectif est de fournir un ensemble simple et léger d'éléments d'interface utilisateur natifs AngularJS qui implémentent la spécification de conception matérielle à utiliser dans les applications monopage (SPA) AngularJS.

AngularJS Material est une implémentation de la spécification Material Design de Google (2014-2017) pour les développeurs AngularJS (v1.x).

Pour une implémentation de la spécification Material Design (2018+), veuillez consulter le projet Angular Material qui est conçu pour les développeurs Angular (v2+).

Fin de vie

Le support matériel d'AngularJS a officiellement pris fin en janvier 2022. Découvrez ce que signifie la fin du support et lisez l'annonce de fin de vie. Visitez Material.angular.io pour le matériau angulaire activement pris en charge.

Trouvez des détails sur le signalement des problèmes de sécurité ici.

AngularJS Material comprend un riche ensemble de composants d'interface utilisateur réutilisables, bien testés et accessibles.

Liens rapides :

• API et démos
• Bâtiment
• Installation

Veuillez noter que l'utilisation de la dernière version d'AngularJS Material nécessite l'utilisation d' AngularJS 1.7.2 ou supérieur.

AngularJS Material prend en charge les versions de navigateur définies dans le champ browserslist de notre package.json. Apprenez-en davantage sur notre site de documentation.

AngularJS Material prend en charge les versions de lecteurs d'écran répertoriées ici.

Documentation et démos en ligne

• Visitez Material.angularjs.org en ligne pour passer en revue l'API, voir les composants en action via des démos en direct et pour lire nos guides détaillés qui incluent le système de mise en page, le système de thème, la typographie, etc.
• Ou vous pouvez créer la documentation et les démos localement ; voir Créer des documents et des démos pour plus de détails.

Bâtiment

Les développeurs peuvent créer du matériel AngularJS en utilisant NPM et gulp.

Installez ou mettez à jour d'abord les dépendances npm de votre projet local :

npm install

Installez Gulp v3 globalement :

npm install -g gulp@3

Exécutez ensuite les tâches gulp :

 # To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build

# To build the AngularJS Material Docs and Demos in `/dist/docs` directory
gulp docs

Pour le développement, utilisez le script docs:watch NPM pour l'exécuter en mode développement :

 # To build the AngularJS Material Source, Docs, and Demos in watch mode
npm run docs:watch

Pour plus de détails sur le fonctionnement du processus de construction et sur les commandes supplémentaires (disponibles pour les tests et le débogage), les développeurs doivent lire le Guide de construction.

Installation de Build (fichiers de distribution)

MNP

Pour les développeurs qui ne sont pas intéressés par la création de la bibliothèque de matériaux AngularJS... utilisez NPM pour installer et utiliser les fichiers de distribution AngularJS Material.

Accédez au répertoire racine de votre projet.

 # To get the latest stable version, use NPM from the command line.
npm install angular-material --save

# To get the most recent, latest committed-to-master version use:
npm install http://github.com/angular/bower-material#master --save

Autres gestionnaires de dépendances

Visitez notre référentiel de distribution pour plus de détails sur la façon d'installer et d'utiliser les fichiers de distribution AngularJS Material dans votre projet local.

CDN

Des versions CDN d'AngularJS Material sont disponibles.

Avec le CDN de Google, vous n'aurez pas besoin de télécharger des copies locales des fichiers de distribution. Au lieu de cela, référencez simplement les URL du CDN pour utiliser facilement ces fichiers de bibliothèque distants. Ceci est particulièrement utile lorsque vous utilisez des outils en ligne tels que CodePen ou Plunker.

">

  < head >

    
   < link rel =" stylesheet " href =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.css " >

   head >
  < body >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " >  script >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.js " >  script >
   body >

Les développeurs recherchant les versions de build les plus récentes et les plus récentes peuvent utiliser GitCDN.xyz pour extraire directement de notre référentiel de distribution :

">

  < head >

    
    < link rel =" stylesheet " href =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.css " >

   head >
  < body >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " >  script >

    
    < script src =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.js " >  script >

   body >

Une fois que vous avez installé tous les éléments nécessaires, ajoutez ngMaterial et ngMessages comme dépendances pour votre application :

 angular . module ( 'myApp' , [ 'ngMaterial' , 'ngMessages' ] ) ;