2016-07-13 20 views
19

Mi risulta difficile capire la reale differenza tra componenti e direttive. Ora capisco che i componenti sono un concetto molto più semplice.Angular 1.5: Direttive vs Componenti?

Quindi, avendo questo in mente, c'è qualche motivo per continuare a usare le direttive quando si utilizza l'angolare 1.5?

Forse mi manca il contesto reale qui, ma sembra che i componenti forniscano una API più semplice.

Quindi quale motivo dovrei continuare a utilizzare una direttiva?

Angular 2 afferma che tutto è un componente, quindi, lavorando per una migrazione semplice da 1,5 a 2, non avrebbe senso utilizzare solo i componenti in avanti?

In passato ho utilizzato le direttive per la creazione, ad esempio, di una casella di testo di ricerca automatica, non c'è motivo per cui non dovrei farlo ora all'interno di un componente giusto? E poi posso riutilizzare questo componente all'interno degli altri componenti che creo?

Mi piacerebbe davvero che qualcuno potesse confermare ciò che dovrei fare e il modo consigliato di andare avanti.

Grazie

risposta

24

semplicemente copiando i documenti angolari, in quanto hanno messo nel modo migliore che posso pensare

Capire Componenti

In angolare, un componente è un particolare tipo di direttiva che utilizza una configurazione più semplice adatta per una struttura applicativa basata su componenti.

Ciò semplifica la scrittura di un'app in modo simile all'utilizzo di componenti Web o all'utilizzo dello stile di architettura dell'applicazione di Angular 2.

vantaggi dei componenti:

  • configurazione più semplice di direttive semplici
  • promuovere default sensati e le migliori pratiche
  • ottimizzato per
  • direttive scrittura di componenti basati su componenti architettura renderà più facile l'aggiornamento a Angular 2

Quando n OT di utilizzare componenti:

  • per le direttive che si basano su manipolazione del DOM, l'aggiunta di listener di eventi ecc, perché le funzioni di compilazione e link non sono disponibili
  • quando avete bisogno di opzioni di definizione direttiva avanzate come priorità, terminale multi -element
  • quando si desidera una direttiva che viene attivato da un attributo o CSS classe, piuttosto che un elemento

lettura più: https://docs.angularjs.org/guide/component

+0

sarebbe stato bello se tu gad menzionato le differenze :) –

0

I componenti sono fondamentalmente solo un nuovo tipo di direttiva progettata per l'architettura basata su componenti. In molti modi, i componenti sono più limitati nelle loro funzionalità, incoraggiando invece migliori convenzioni e design che in realtà portano a un codice più gestibile e riutilizzabile.

Ad esempio, i componenti forzano l'ambito isolato e incoraggiano fortemente il collegamento unidirezionale. Perché questo è importante? Perché questo incapsula meglio il componente e scoraggia la creazione di componenti strettamente accoppiati con l'elemento genitore o l'ambito. Ciò significa che si scrive il componente in modo tale che è più probabile che sia possibile riutilizzarlo in futuro senza modifiche (invece del riutilizzo di copia e incolla, dato che molti hanno una tendenza a farlo). Ciò rende anche più facile tracciare e controllare le interazioni e le modifiche ai dati.

Il componente può ancora interagire con l'ambito genitore, ma ciò avviene tramite callback associati agli eventi del componente. Di nuovo, questa restrizione costringe o almeno incoraggia fortemente la progettazione del software che rende più facile riutilizzare il componente e capire come il componente sta interagendo con l'ambito genitore e gli elementi esterni.

I componenti possono essere registrati utilizzando il metodo .component() di un modulo AngularJS (restituito da angular.module()). Il metodo accetta due argomenti:

1) Il nome del componente (come stringa).

2) L'oggetto di configurazione Component. (Si noti che, a differenza del metodo .directive(), questo metodo non prende una funzione di fabbrica.)

// per direttiva

module.directive (nome, fn);

// per il componente

modulo

.componente (nome, opzioni);

Problemi correlati