Construire une application de conception de matériaux avec angulaire 2

Sep 14, 2025

Comment

[dix] [dix] [dix]

[dix]

Le matériau angulaire est un cadre de composant UI qui implémente la spécification de la conception matérielle de Google pour l'angulaire 2 - la nouvelle mise en œuvre plus rapide de type angulaire, écrit dans Typecript. Bien que toujours dans l'alpha, le matériau angulaire fournisse déjà un ensemble de composants d'interface utilisateur réutilisables et accessibles basés sur la conception du matériau.

[dix]

Angulaire 2 elle-même est conçue pour une utilisation sur toutes les plates-formes (Web, mobile et bureau) et de nombreuses nouvelles technologies y sont associées. Au niveau JavaScript, nous avons la syntaxe supplémentaire de ECMAScript 2015 (ES6), de la saisie et de la prise en charge de l'interface de TypeScript, ainsi que de décorateurs de l'API de réflexion de métadonnées. Il utilise des observables à partir de la bibliothèque Extensions réactive pour gérer des séquences d'événements de manière fonctionnelle. Il utilise des zones pour encapsuler et intercepter une activité asynchrone afin de fournir une forme de stockage de fil-thread-local, permettant ainsi de répondre automatiquement à des modifications de données dans les événements asynchrones afin de maintenir des liaisons de données. Enfin, le chargement du module est géré par SystemJs.

Dans ce tutoriel, nous allons utiliser Angular 2 pour créer une application simple à faire avec quelques éléments de conception de matériaux de signature. Obtenez les fichiers source ici .

[dix]

Être mis en place

La mise en place de l'environnement initial peut être difficile. Il y a un Angular2-graines disponible, ainsi qu'un Angular2-Starter . Cependant, il y a quelque chose encore mieux: avec cli angulaire Vous pouvez configurer votre projet angulaire 2 avec une seule commande.

Non seulement cela s'occupera de la configuration de toutes les technologies que j'ai mentionnées dans la dernière section (via le nœud et NPM), il ajoutera également dans l'échafaudage pour les tests d'unité de jasmin, les tests de bout en bout de Protractor, plus les tests Tslint et Analyse de code statique de code Codelyzer de 2 dossiers angulaires. Bien que vous n'ayez pas à utiliser tous ceux-ci, vous devriez définitivement. C'est tellement simple à utiliser, vous vous demanderez comment vous y êtes jamais entendu sans cela.

[dix]

CLI angulaire est disponible sous forme de package NPM. Vous devrez donc installer le nœud et le NPM globalement sur votre ordinateur en utilisant. NPM Installer -g angular-cli . Créez maintenant une nouvelle application angulaire 2 avec ng nouveau matériau2-do . Vous allez devoir attendre un peu, car après avoir généré les fichiers nécessaires, cela initialise un repo git et un NPM Installer Pour télécharger tous les modules nécessaires dans nœud_modules / . Jeter un coup d'œil à la paquet.json et se familiariser avec les modules et les scripts là-bas.

Vous avez maintenant créé une nouvelle application angulaire 2 qui suit les meilleures pratiques officielles.

Ajouter des conceptions matérielles

L'application par défaut ne connaît rien sur la conception matérielle (surveillance que je suis sûr), nous devons donc nous ajouter nous-mêmes.

Il y a une liste de forfaits de conception de matériaux angulaires publiés dans le @ Angular2-matériau bibliothèque. Dans cet exemple, nous allons utiliser coeur (requis pour toutes les applications de matériau angulaire 2), ainsi que bouton , carte , case à cocher , icône , saisir , liste et barre d'outils :

npm install --save @angular2-material/{core,button,card,checkbox,icon,input,list,toolbar}@2.0.0-alpha.5

Pour que le fournisseur fonctionne, nous devons ajouter @ Angular2-matériau / ** / * au tableau de VendorPmfiles dans angulaire-cli-build.js . Nous devons également ajouter le chemin à @ Angular2-matériau à la Plans objet:

 Const Carte: Any = {
  '@ angular2-matériau': «Vendeur / @ angular2-matériau»
};

Laissez SystemJs savoir comment traiter de nouveaux modules en pointant vers les fichiers principaux de chacun des packages:

 CONSTORTURE DES PACKAGES: TOUT = {};

// mettre les noms de l'un de vos composants matériels ici
const matérielpkgs: chaîne [] = ['core', "bouton", "carte", "case",
"icône", "entrée", "liste", "barre d'outils"];

matérielpkgs.foreach ((pkg) = & gt; {
  Emballages [`@ angular2-matériau / $ {pkg}`] = {Main: {$ {pkg} .js`};
});

Il est maintenant temps de charger la police d'icône de la conception du matériau dans le de src / index.html . Toute police fonctionnera, mais nous utilisons les icônes de conception de matériel standard:

 & lt; link href = "https://font.googleappis.com/icon?family=Material+icons" rel = "stylesheet" & gt;

Créer une boîte de dialogue MD

Nous pouvons maintenant travailler avec la conception matérielle dans notre application pour faire. L'un des composants actuellement manquants de la conception des matériaux angulaires est une invite ou une boîte de dialogue, donc pour notre première tâche, nous en ferons un!

Créons un nouveau composant à l'aide d'une carte de conception de matériaux, d'une barre d'outils, d'une entrée et d'un couple de boutons. Dans le src / app Dossier de votre repo, type NG Générez une boîte de dialogue Composant . Cela génère un nouveau Dialogcomponant dans src / app / dialogue et ajoute un tonneau à système-config.ts Donc, SystemJs sait comment le charger.

Si vous regardez le généré dialog.component.ts Fichier, vous verrez la première ligne est la suivante: Importer {composant, oninit} de '@ angulaire / noyau'; . Composant est l'un des principaux blocs de construction de l'angulaire et Inaugurer est l'une des interfaces qu'il implémente. Cependant, afin d'avoir accès à la communication entre composants imbriqués, ainsi que les composants de conception des matériaux mentionnés ci-dessus, nous devons importer des intrants, Production et Emismitter de @ angulaire / noyau; et Mdcard , Mdinput , Mdtoolbar et Mdbutton de leurs modules correspondants dans le @ Angular2- matériau bibliothèque.

Pour rendre ces composants matériels, nous devons injecter les directives notre Dialogcomponant a besoin. Nous ajouterons les directives suivantes à la @Composants Métadonnées:

 templateurl: 'dialog.component.html',
Directives: [MdCard, MDToolbar, MDInput, MDButton],
STYSTERLS: ['' DIALOG.COMPONENT.CSS ']

Nous déclarons ensuite un certain nombre de @Saisir Variables ( Oktext , annuler et ainsi de suite) qui nous permettent de définir le contenu de la boîte de dialogue. Nous devons également ajouter un @Production Émetteur qui nous permet de déclencher une fonction avec une valeur dans le composant parent lorsque la boîte de dialogue est fermée.

Maintenant, nous pouvons remplacer le constructeur généré dans dialog.component.ts Avec le code suivant:

 constructeur () {
 cela.oktext = 'ok';
 ceci.canceltext = 'Annuler';
}

EMITVALUE (valeur) {
 cela.valueemited.emit (valeur);
}

Ainsi que d'utiliser le @Saisir variables à l'intérieur de notre Dialogcomponant dans le dialog.component.html modèle, le entrée MD nous permet d'accepter l'entrée de l'utilisateur:

 & lt; MD-Entrée Classe = "Largeur intégrale" [Placeholder] = "espace réservé"
        [(ngmodel)] = "valeur" #dialoginput
        (keyup.enter) = "Emitvalue (valeur)"
        (Keyup.escape) = "Emitvalue (null)" & gt; & lt; / MD-Input & GT;

Le MD-boutons Permettez à l'utilisateur de cliquer sur "OK", "Annuler" ou tout ce que vous décidez d'étiqueter ces boutons:

 & lt; bouton MD bouton (clic) = "EMITVALUE (NULLUE (NULL)" COLOR = "Primaire" & GT;
  {{annultetext}}
& lt; / button & gt;
et lt; bouton-bouton-bouton (clic) = "Emitvalue (valeur)" couleur = "primaire" & gt;
  {{oktext}}
& lt; / button & gt;

[dix]

Remarquez la clé Les manutentionnaires d'événements, qui prennent soin des choses lorsque la touche Entrée ou évasion est enfoncée. Ces gestionnaires sont identiques à la Cliquez sur gestionnaires d'événements pour annuler et Oktext . Échapper fait la même chose que l'annulation (EMITVALUE (NULL)) et frapper l'entrée aura le même résultat que cliquer sur OK (EMITVALUE (valeur)) . Cela nous permet d'inviter l'utilisateur pour un évaluer via un entrée MD et recevoir une sortie émise.

Nous pouvons voir des exemples d'un certain nombre de composants de conception de matériaux: carte MD , bouton MD , etc. Nous devons également ajouter des CSS dans dialog.component.css Afin de réaliser la mise en page, nous désirons - vous pouvez visualiser le code complet dans le repo github qui l'accompagne.

Maintenant, ajoutons ceci Dialogcomponant à matériau2-do.component.html Pour voir à quoi ça ressemble:

 & lt; app-dialogue [Titre] = "'Invite de dialogue" "
  [Modèle] = "'C'est notre nouveau composant basé sur la conception de matériel:" "
  [espace réservé] = "'Entrez le texte ici" "
  [OKTEXT] = "'oui'"
  [AnnulerText] = "'Non" "
  [valeur] = "'" Démarrer le texte' "
  (valorise) = "Journal ($ événement)"
  [showprompt] = "vrai" & gt;
& lt; / app-dialogie & gt;

Remarquez que nous avons des chaînes littérales pour tous les @Contributions . Celles-ci nous obligent à utiliser des citations simples et doubles, sinon angulaires interpréterait le contenu comme nom de variable dans le Composant portée.

Nous avons aussi celui émis @Production . Cela rend le dialogue simple et extrêmement configurable. La plupart des entrées auraient défaut des chaînes vides si elles sont omises.

Modifions Matériel2Docomposant . Nous devons importer du dialogueComponent et le déclarer comme une directive, sinon Matériel2Docomposant ne sera pas en mesure de le rendre. Nous ajouterons également la fonction de journal:

 journal (texte) {
   console.log (texte);
 }

Jetons un coup d'œil à notre travail manuel. Vous pouvez servir l'application (le port par défaut est 4200 en exécutant NPM Run-script commence , qui tourne à son tour serveur NG . Si vous ouvrez la console, vous pouvez voir ce qui est enregistré: le contenu de l'entrée est émis lorsque vous cliquez sur «Oui», et nul est émis lorsque vous cliquez sur "Non".

Nous sommes maintenant prêts à utiliser ce nouveau Dialogcomponant créer notre application à faire de la tâche.

Créer l'application principale

Nous allons utiliser les composants MD suivants pour l'application principale: barre d'outils , liste , Liste-item , case à cocher , bouton , icône , Icon-Registry et sa personne à charge, Http_provider , de la bibliothèque HTTP angulaire. Donc, ceux-ci doivent être ajoutés à la section d'importation de Matériel2Docomposant .

Encore une fois, afin de pouvoir rendre ces composants, nous devons les inclure dans le @Composants métadonnées directives Array avec Dialogcomponant , que nous venons d'ajouter:

 Directives: [MDCard, MDToolbar, MDList, MDLisTem, MDCheckBox, MDButton, MDicon, Dialogcomponent],

Pour accéder à la Mdiconregistry , nous devons l'injecter, avec Http_providers , via la @Composants métadonnées fournisseurs déployer:

 Fournisseurs: [MDiconRegistry, http_providers],

Maintenant, nous exploitons notre Dialogcomponant , ajoutant suffisamment de logique pour une application simple à faire. Le Tododialog est appelé pour ouvrir notre boîte de dialogue, soit avec la tâche à modifier ( à faire ) ou nul Si nous en créons un nouveau.

Nous configurons les variables par défaut pour une nouvelle tâche ou si nous modifions une tâche plutôt que nous les modifions en conséquence. Nous montrons ensuite le Dialogcomponant En définissant le showdialog variable à vrai :

 Tododialog (TODO = NULL) {
    ceci.okbuttontext = 'Créer une tâche';
    cela.fieldValue = '';
    ceci.editingtodo = todo;
    Si (TODO) {
      ceci.fieldValue = todo.title;
      ceci.okbuttontext = 'Modifier la tâche';
    }
    cela.showdialog = true;
  }

Le UpdateToDo La fonction est appelée lorsque nous souhaitons la fermer. Les autres fonctions ( edittodo , addtodo , hainé ) sont des méthodes d'assistance pour UpdateToDo .

 UpdateToDo (titre) {
    Si (titre) {
      Titre = titre.trim ();
      if (this.editingtodo) {
        cela.edittodo (titre);
      } autre {
        cela.addtodo (titre);
      }
    }
    cela.HIDELOG ();
  }

Dans matériau2-do.component.html Nous avons donné à notre application un Barre d'outils MD où nous avons mis le titre, et un Icône MD appelé ajouter (qui ressemble à un signe plus) pour notre bouton d'action flottante (FAB), ce qui nous permet de créer une nouvelle tâche:

 & lt; bouton MD-FAB Class = "FAB-Add" (Cliquez sur) = "TODODOIALOG ()" & GT;
      & lt; md-icon & gt; ajouter & lt; / md-icon & gt;
    & lt; / button & gt;

Nous utilisons Contenu de carte MD tenir un liste MD Et un * ngfore itérer à travers et afficher, notre liste de choses à faire tableau comme MD-list-articles :

 & lt; md-list-item * ngfor = "Laissez Tood of Todolist; Index = Index" & GT;

Case à cocher MD nous permet de cocher les articles sur notre liste. Et nous avons deux MD-Mini-Fab Boutons Nous pouvons utiliser pour supprimer et éditer notre tâche: MD-Icons Supprimer_forever et mode_edit :

 & lt; bouton MD-mini-fab (clic) = "Supprimer (index)" Couleur = "Primaire" & GT;
  & lt; md-icon & gt; delete_forever & lt; / md-icon & gt;
& lt; / button & gt;

& lt; bouton MD-mini-fab (Cliquez sur) = "TODODOIALOG (TODODIOG (TODO)" Couleur = "Primaire"
        [désactivé] = "TODO.COMPLETED" & GT;
  & lt; md-icon & gt; mode_edit & lt; / md-icon & gt;
& lt; / button & gt;

Avec un petit CSS, ceux-ci restent cachés jusqu'à ce que vous roulez (ou cliquez sur). Vous pouvez voir le code dans le repo.

Avancer

Comme le matériau angulaire 2 est toujours en alpha, il manque certaines choses - en particulier, l'effet d'ondulation de bouton MD signature. Bien qu'il y ait des changements de rupture de l'API à venir, il fonctionne beaucoup. Il vit également à la prétention d'avoir une API simple qui ne confondra pas les développeurs et est facile à exploiter pour la création de grandes applications.

Cet article a été publié à l'origine dans le numéro 284 de Net, le magazine le plus vendable au monde pour les concepteurs et les développeurs Web. S'abonner ici .

Articles Liés:

Quoi de neuf dans Angular 4?
Comment construire un site Web complet en angulaire
Construire un tableau de bord de données avec angularjs

[dix] [dix]

[dix]

Construire une application de conception de matériaux avec angulaire 2

Être mis en place

Ajouter des conceptions matérielles

Créer une boîte de dialogue MD

Créer l'application principale

Avancer

Comment - Most Popular Articles

Comment faire un collage photo dans Photoshop CC

Portrait Photographie: Comment prendre des portraits parfaits

Ajouter des filtres SVG avec CSS

Créer une perspective dans Adobe Illustrator

Comment peindre un château avec Sketchup

Créer une image interactive parallaxe

Comment peindre des runes brillantes magiques

Top astuces pour la peinture des mains expressives

Catégories