Componenti e direttive in angolare 1.5

Question

Le grandi modifiche apportate a Angular 1.5 riguardano il supporto di components.

component('myComponent', { 
    template: '<h1>Hello {{ $ctrl.getFullName() }}</h1>', 
    bindings: { firstName: '<', lastName: '<' }, 
    controller: function() { 
    this.getFullName = function() { 
     return this.firstName + ' ' + this.lastName; 
    }; 
    } 
}); 

Mentre tutto va bene, non sono sicuro di come ciò differisca dalle direttive. Quali sono i vantaggi dell'uso di components rispetto alle tradizionali direttive personalizzate? E i componenti di Angular 1.5 e Angular 2 sono uguali?

Answer 1

Il .component è ora il modo preferito di scrivere codice perché favorisce le buone pratiche e offre agli sviluppatori la possibilità di scrivere codice come in Angular 2 (simile ai componenti Web). Fondamentalmente, quando si scrive codice utilizzando component, l'aggiornamento a Angular 2 sarà più semplice. Le funzionalità rimangono quasi le stesse. Dovresti usare .componentsempre quando è possibile.

Changes (estratto)

• componente viene dichiarato utilizzando oggetto invece della funzione
• semplificato ambito isolato utilizzando binding proprietà
• componenti sono sempre con ambito isolato
• alcune cattive pratiche non lo farà possibile
• configurazione più semplice e comprensibile
• ganci ciclo di vita: ($onInit(), $onChanges(changesObj), $doCheck(), $onDestroy(), $postLink())

impressionante articolo è qui: https://toddmotto.com/exploring-the-angular-1-5-component-method

Quando non usare componenti (da documenti):

• per le direttive che devono eseguire azioni i n funzioni di compilazione e pre-collegamento, perché non sono disponibili
• quando sono necessarie opzioni di definizione di direttive avanzate come priorità, terminale, multielemento
• quando si desidera una direttiva attivata da un attributo o una classe CSS, piuttosto che un elemento.

credo, che la descrizione migliore si possono trovare è la guida ufficiale: https://docs.angularjs.org/guide/component. Copre tutte le modifiche, i motivi dei cambiamenti e ti dà una profonda comprensione dei componenti.

Answer 2

Il componente. NON sostituisce .direttiva come @rek Żelechowski ha detto. Quindi ..

Non c'è niente che puoi fare con .component() che non puoi fare con .directive(). Ha lo scopo di semplificare il modo in cui creiamo i "componenti", che in pratica indicano le direttive dell'interfaccia utente.

Quando può/dovresti usarlo?

Chiaramente ci sono alcuni casi in cui non si può/non dovrebbe usarlo:

• Se avete bisogno della funzione di collegamento (anche se raramente si dovrebbe)
• Se si desidera un modello-less direttiva, ad es ng-clic che non ha un modello o un ambito separato

Per tutte le altre direttive, questo dovrebbe funzionare. E poiché risparmia sul boilerplate e meno incline agli errori, è più piacevole da usare.

Nonostante tutte le novità, .component() non può sostituire completamente .directive().

Answer 3

Le direttive NON sono sostituite, sono appena state modificate per molti motivi che potrebbero essere un po 'troppo per entrare qui. La documentazione angolari li spiegano abbastanza bene, in modo da poter iniziare a guardare la documentazione c'è:

https://docs.angularjs.org/guide/component

per avere una migliore idea di quali siano le differenze tra le direttive e le componenti sono, trovo che il suo meglio per fare riferimento alla Documentazione Angular 2.0. Angular 1.5 ci ha fornito un ponte verso 2.0 che 1.4 e precedenti non avevano. Uno dei cambiamenti più grandi è la rimozione di $ scope, un altro sta fornendo Components come un modo per costruire cose (che è ALTAMENTE usato in Angular 2.0).

Tutto sommato la vera carne del cambiamento è che prepara il mondo 1.X per migrare nel mondo 2.X. In quel mondo ci sono componenti (che sono direttive di livello elementare nel loro cuore), direttive strutturali e direttive sugli attributi. Vedere i collegamenti sottostanti per aiutare a capire ciascuno (insieme al link fornito sopra).

http://learnangular2.com/components/

https://angular.io/docs/ts/latest/guide/structural-directives.html

https://angular.io/docs/ts/latest/guide/attribute-directives.html