Costruisci un'app di progettazione materiale con angolare 2

Materiale angolare è un quadro componente dell'interfaccia utente che implementa le specifiche del design dei materiali di Google per l'angolare 2 - la nuova implementazione più rapida dell'angolare, scritta in dittivetti. Sebbene ancora in alfa, materiale angolare fornisca già un insieme di componenti UI riutilizzabili e accessibili basati sul design del materiale.

Angular 2 stesso è progettato per l'uso su tutte le piattaforme (Web, Mobile e Desktop) e ha molte nuove tecnologie associate ad essa. A livello JavaScript abbiamo la sintassi aggiuntiva di ECMAScript 2015 (ES6), digitazione e supporto dell'interfaccia da Destinazione, insieme agli arredatori dell'API della riflessione dei metadati. Utilizza osservabili dalla libreria di estensioni reattive per gestire sequenze di eventi in un modo di programmazione funzionale. Utilizza le zone per incapsulare e intercettare l'attività asincrona per fornire una forma di archiviazione del filo-locale, consentendo all'Angular di rispondere automaticamente alle variazioni dei dati in eventi asincroni per mantenere le associazioni dei dati. Infine, il caricamento del modulo è gestito da SystemJS.

In questo tutorial useremo Angular 2 per creare un'app semplice da fare con alcuni elementi di design del materiale firmati. Ottieni i file di origine qui .

Essere impostato

L'impostazione dell'ambiente iniziale può essere difficile. C'è un Angolare2-seme. disponibile, così come un angolare2-starter. . Tuttavia, c'è qualcosa ancora meglio: con angolare-cli. È possibile configurare il tuo progetto angolare 2 con un singolo comando.

Non solo si prenderà cura della configurazione per tutte le tecnologie che ho menzionato nell'ultima sezione (tramite nodo e NPM), aggiungerà anche a scaffolding per il test dell'unità del gelsomino, test end-to-end del goniometro, più test di Tssint e Codelyzer Codice statico Analisi dell'angolare 2 dattiloscritto. Anche se non devi usare tutti questi, dovresti assolutamente. È così semplice da usare, ti chiedi come sei mai andato d'accordo senza di esso.

CLI angolare è disponibile come pacchetto NPM, quindi è necessario installare il nodo e NPM a livello globale sulla macchina utilizzando NPM Install -g Angular-cli . Ora crea una nuova app angolare 2 con NG nuovo materiale2-do . Dovrai aspettare un po ', perché dopo aver generato i file necessari, inizializza un repo git e fa un Installazione NPM. Per scaricare tutti i moduli necessari in node_modules / . Dare un'occhiata al pacchetto.json. e familiarizzare con i moduli e gli script lì.

Ora hai creato una nuova applicazione angolare 2 che segue le migliori pratiche ufficiali.

Aggiungi design del materiale

L'app predefinita non sa nulla del design del materiale (una supervisione sono sicuro), quindi dobbiamo aggiungerlo noi stessi.

C'è un elenco di pacchetti di progettazione materiali angolari 2 pubblicati nel @ Angular2-Materiale biblioteca. In questo esempio useremo nucleo (richiesto per tutte le app angolari 2 app), così come pulsante , carta , casella di controllo , icona , ingresso , elenco e barra degli strumenti :

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

Per il fascio del venditore al lavoro, dobbiamo aggiungere @ Angular2-Materiale / ** / * alla matrice di Venderornpmfiles. nel Angular-cli-build.js . Dobbiamo anche aggiungere il percorso a @ Angular2-Materiale al mappe oggetto:

 Const Map: Any = {
  '@ Angular2-Material': 'Vendor / @ @ Angular2-Material'
}; 

Lascia che Systemjs sappia come elaborare nuovi moduli indicando i file principali di ciascuno dei pacchetti:

 Pacchetti const: qualsiasi = {};

// Metti i nomi di uno qualsiasi dei tuoi componenti del materiale qui
Cost Materialpkgs: stringa [] = ['core', 'pulsante', 'card', 'Checkbox',
'Icon', 'Input', 'List', 'Toolbar'];

materialpkgs.foreach ((PKG) = & GT; {
  Pacchetti [`@ angolare2-materiale / $ {pkg}`] = {principale: `$ {pkg} .js`};
}); 

Ora è il momento di caricare il carattere dell'icona del design del materiale nel di src / index.html. . Qualsiasi carattere lavorerà, ma stiamo usando le icone standard del design del materiale:

 & lt; link href = "https://fonts.googleapis.com/icon?family=material+icons" rel = "stylesheet" & gt; 

Crea una finestra di dialogo MD

Ora possiamo lavorare con il design del materiale nella nostra app da fare. Uno dei componenti attualmente mancanti da Angular 2 Material Design è un prompt o una finestra di dialogo, quindi per il nostro primo compito ci renderemo uno!

Creiamo un nuovo componente utilizzando una scheda di design del materiale, una barra degli strumenti, un ingresso e un paio di pulsanti. Nel SRC / App. cartella del tuo repo, digita NG Genera la finestra di dialogo dei componenti . Questo genera un nuovo DialogComponent. nel SRC / App / Dialog e aggiunge un barile a sistema-config.ts. Quindi Systemjs sa come caricarlo.

Se guardi il generato dialog.component.ts. File, vedrai la prima riga è: import {componente, oninit} a partire dal '@ Angular / Core'; . Componente è uno dei principali elementi di costruzione di angolari e Oninit. è una delle interfacce che implementa. Tuttavia, per avere accesso alla comunicazione tra componenti nidificati, nonché i componenti del design del materiale sopra menzionati, abbiamo bisogno di importare input, Produzione e Eventit. a partire dal @ Angular / Core; e Mdcard. , Mdinput. , Mdtoolbar. e Mdbutton. dai loro moduli corrispondenti nel @ Angular2- Materiale biblioteca.

Per rendere questi componenti del materiale, abbiamo bisogno di iniettare le direttive i nostri DialogComponent. richiede. Aggiungeremo le seguenti direttive al @ Componenti metadati:

 Templateurl: 'dialog.component.html',
Direttive: [MDCard, MDToolbar, Mdinput, MDButton],
Styleurls: ['dialog.component.css'] 

Dichiariamo quindi un numero di @Ingresso variabili ( Oktext. , cancelText. E così via) che ci permettono di definire il contenuto della finestra di dialogo. Dobbiamo anche aggiungerne uno @Produzione Emettitore che ci consente di innescare una funzione con un valore nel componente principale quando la finestra di dialogo è chiusa.

Ora possiamo sostituire il costruttore generato in dialog.component.ts. Con il seguente codice:

 Costruttore () {
 questoktext = 'ok';
 questo.Canceltext = 'Annulla';
}

EmitValue (valore) {
 questo.valueemitted.emit (valore);
} 

Così come usare il @Ingresso variabili all'interno del nostro DialogComponent. Entro dialog.component.html. Modello, The. MD-Input. Ci consente di accettare l'input dall'utente:

 & lt; md-input class = "full-width" [segnaposto] = "segnaposto"
        [(ngmodel)] = "valore" #dialoginput
        (keyup.enter) = "EmitValue (valore)"
        (keyup.escape) = "EmitValue (NULL)" & GT; & LT; / MD-INGRESS & GT; 

Il pulsanti MD. Consenti all'utente di fare clic su "OK", "Annulla" o qualsiasi cosa tu decida di etichettare questi pulsanti:

 & lt; pulsante MD-pulsante (click) = "EmitValue (NULL)" Color = "Primary" & GT;
  {{cancelText}}
& lt; / button & gt;
& lt; pulsante Pulsante rialzato MD (click) = "EmitValue (Value)" Color = "Primary" & GT;
  {{OKTEXT}}
& lt; / button & gt; 

Notare il. tastiera Guastrici per eventi, che si prendono cura delle cose quando viene premuto il tasto ENTER o ESCAPE. Questi gestori sono identici al clic Handler per eventi per cancelText. e Oktext. . La fuga fa la stessa cosa di Annulla (EmitValue (NULL)) , e colpire ENTER avrà lo stesso risultato di cliccando OK (EmitValue (valore)) . Questo ci consente di richiedere l'utente per a valore Via A. MD-Input. e ricevere una produzione emessa.

Possiamo vedere esempi di un numero di componenti di progettazione materiali: MD-card , Pulsante MD , e così via. Dobbiamo anche aggiungere alcuni css in dialog.component.css. Per raggiungere il layout desideriamo, è possibile visualizzare il codice completo nell'accompagnatore GitHub Repo.

Ora aggiunci questo DialogComponent. per materiale2-docomponent.html. Per vedere cosa sembra:

 & lt; App-Dialog [TITLE] = "THRESS PHORT 'DIALOG'"
  [Template] = "" Questo è il nostro nuovo componente basato sul design del materiale: ""
  [segnaposto] = "" Inserisci il testo qui ""
  [Oktext] = "'sì'"
  [cancelText] = "'no'"
  [VALUE] = "" Testo iniziale ""
  (ValueMed) = "Log ($ evento)"
  [showprompt] = "True" & GT;
& lt; / app-dialog & gt; 

Avviso Abbiamo stringhe letterali per tutto il @Inputs. . Questi richiedono di utilizzare le virgolette singole e doppie, altrimenti angolare interpretare il contenuto come nome variabile nel Componente scopo.

Abbiamo anche quello emesso @Produzione . Questo rende il dialogo semplice ed estremamente configurabile. La maggior parte degli ingressi avrebbe deformato per svuotare le stringhe se omesse.

MODIFICARE. Materiale2docomponent. . Dobbiamo importare il dialogo Component e dichiararlo come una direttiva, altrimenti Materiale2docomponent. non sarà in grado di renderlo. Aggiungeremo anche la funzione di registro:

 Log (testo) {
   console.log (testo);
 } 

Diamo un'occhiata al nostro handiwork. È possibile servire l'app (la porta predefinita è 4200) eseguendo Inizio di script runt NPM , che a sua volta corre NG Server. . Se si apre la console, è possibile vedere cosa è registrato: il contenuto dell'ingresso viene emesso quando si fa clic su "Sì", e nullo è emesso quando fai clic su "no".

Siamo ora pronti a usare questo nuovo DialogComponent. per creare la nostra app da fare.

Crea l'app principale

Utilizzeremo i seguenti componenti MD per l'app principale: barra degli strumenti , elenco , Elenco-elemento. , casella di controllo , pulsante , icona , Icon-Registry. e il suo dipendente, Http_provider. , dalla biblioteca http angolare. Quindi questi devono essere aggiunti alla sezione di importazione di Materiale2docomponent. .

Ancora una volta, per poter rendere questi componenti, dobbiamo includerli nel @ Componenti metadati direttive array insieme a. DialogComponent. , che abbiamo appena aggiunto:

 Direttive: [MDCard, MDToolbar, MDList, MDListitem, Mdcheckbox, MDButton, Mdicon, DialogComponent], 

Per accedere al Mdiconregister. , abbiamo bisogno di iniettarlo, insieme a Http_providers. , tramite il @ Componenti metadati fornitori Vettore:

 Fornitori: [mdiconregistry, http_providers], 

Ora facciamo sfruttare il nostro DialogComponent. , aggiungendo abbastanza logica per un'applicazione semplice da fare. Il tododialogo è chiamato ad aprire il nostro dialogo, con l'attività da modificare ( fare ) o nullo Se ci crediamo uno nuovo.

Impostiamo le variabili predefinite per un nuovo compito, o se stiamo modificando un compito invece li cambiamo di conseguenza. Quindi mostriamo il DialogComponent. Impostando il. showdialog. variabile a. vero :

 tododialog (todo = null) {
    this.okbuttontext = 'creare compito';
    questo.fieldValue = '';
    questo.editingtodo = todo;
    IF (TODO) {
      questo.fieldValue = Todo.title;
      this.okbuttentext = 'modifica attività';
    }
    questo.Showdialog = true;
  } 

Il updatetodo. La funzione è chiamata quando desideriamo chiuderlo. Le altre funzioni ( Edittodo. , Addtodo. , hidedetaleog. ) sono metodi helper per updatetodo. .

 updatetodo (titolo) {
    Se (titolo) {
      Titolo = TITLE.TRIM ();
      Se (questo.editingtodo) {
        questo.edittodo (titolo);
      } altro {
        questo.Addtodo (titolo);
      }
    }
    questo.hidedelogyog ();
  }

Nel materiale2-docomponent.html. Abbiamo dato la nostra applicazione un MD-Toolbar. dove abbiamo messo il titolo e un md-icon. chiamato Inserisci (che sembra un segno più) per il nostro pulsante di azione flottante (Fab), che ci consente di creare un nuovo compito:

 & lt; Button MD-FAB Class = "Fab-add" (click) = "toDoDialog ()" & gt;
      & lt; md-icon & gt; add & lt; / md-icon & gt;
    & lt; / button & gt; 

Noi usiamo MD-Card-Content tenere un MD-List. e un * ngfor. per iterando attraverso e visualizzare, il nostro lista di cose da fare array As. MD-list-elementi :

 & lt; MD-List-elemento * ngfor = "Lascia che Todo of Todolist; lascia indice = indice" & gt; 

MD-Checkbox. Ci consente di spuntare gli elementi sulla nostra lista. E ne abbiamo due md-mini-favo Pulsanti che possiamo usare per eliminare e modificare il nostro compito: md-icons delete_forever e modalità_edit. :

& lt; Pulsante MD-Mini-Fab (click) = "Rimuovi (indice)" Color = "Primary" & GT;
  & lt; md-icon & gt; delete_forever & lt; / md-icon & gt;
& lt; / button & gt;

& lt; pulsante md-mini-favo (click) = "tododialog (todo)" colore = "primario"
        [disabilitato] = "todo.completed" e GT;
  & lt; md-icon & gt; mode_edit & lt; / md-icon & gt;
& lt; / button & gt; 

Con un po 'di CSS, questi rimangono nascosti fino a quando non hai rollover (o clicca). Puoi vedere il codice nel repo.

Andando avanti

Poiché il materiale angolare 2 è ancora in alfa, ci sono alcune cose mancanti - in particolare, l'effetto ondulazione del pulsante MD firma. Mentre ci possono interrompere modifiche all'API in anticipo, è molto funzionante. Vive anche alla rivendicazione di avere un'API semplice che non confonde gli sviluppatori ed è facile da sfruttare per la creazione di applicazioni dall'aspetto eccezionale.

Questo articolo è stato originariamente pubblicato in questione 284 di NET, la rivista best-seller del mondo per i web designer e sviluppatori. Iscriviti qui .

Articoli Correlati:

• Cosa c'è di nuovo in Angular 4?
• Come costruire un sito web a pagina completa in angolari
• Costruisci un dashboard di dati con AngularJS