Introduzione al cheat sheet Angular 2
Angular 2 è un framework open source che è stato costruito su JavaScript. È stato principalmente utilizzato per lo sviluppo di applicazioni Web front-end. È il successore di AngularJS. È scritto in TypeScript. È sviluppato da Google. Angular 2 è basato su JavaScript moderno che utilizza ES6. Angular 2 offre migliori capacità di gestione degli eventi, modelli potenti, un migliore supporto anche per dispositivi mobili e applicazioni Web desktop. È anche compatibile con i dispositivi mobili e su tutte le piattaforme come Windows, Mac e Linux.
Angular 2 ha funzionalità chiave per lo sviluppo di applicazioni che sono componenti, dattiloscritto e servizi. Angular 2 ha diversi componenti che sono moduli, componenti, modelli, metadati e servizio. I componenti aiutano a creare un'applicazione in molti moduli e ciò aiuta a mantenere l'applicazione per un tempo più lungo. Il diverso set di codice è stato gestito e utilizzato da diversi moduli di applicazione curati dalle funzionalità del servizio. I moduli aiutano a suddividere l'applicazione in un pezzo logico che è stato codificato per eseguire una determinata attività.
Comandi e contenuto sul cheat sheet angolare 2
Il cheat sheet di Angular 2 ha un'ampia libreria, scalabile, estensibile, interattiva e contiene molti metodi integrati per calcolare le operazioni più comuni. Esistono diverse sintassi per modelli, moduli Ng, direttive integrate, moduli e altre configurazioni disponibili come di seguito:
| Sintassi del modello | DESCRIZIONE |
| Associa la proprietà 'valore' all'espressione risultato 'nome' | |
| Associa l'attributo 'ruolo' al risultato dell'espressione 'il mio ruolo' | |
| Chiamerà il metodo read Text, quando viene attivato l'evento click. | |
| Associa la proprietà a una stringa interpolata | |
|
Ciao il mio nome)) | Associa il contesto a una stringa interpolata |
| Imposta l'associazione a due vie. | |
|
… | * Il simbolo trasforma l'elemento corrente in una temperatura incorporata. |
|
Studente: ((student? .Sname)) | ? Questo operatore di navigazione indica che il campo Studente è facoltativo |
| Vincola la larghezza della proprietà dello stile per esprimere il risultato mistificare. | |
| Utilizzato per l'espressione di associazione dei dati e degli eventi nel modello. | |
|
N. auto: ((vehicleNumber | myCarNuFormat)) | Trasforma il valore corrente del numero di veicolo tramite pipe mycarNuformat. |
| Disambigua l'elemento da un componente HTML | |
| Lega la presenza della classe all'espressione della verità. |
NgModules: - Le diverse direttive Ngmodule sono:
| direttive | DESCRIZIONE |
| @NgModule ((dichiarazioni ..)) | Definisce un modulo che contiene direttive ecc. |
| dichiarazioni: (MyRedComponent, MyBlueComponent, MyDatePipe) | Indica l'elenco di componenti, direttive e tubi appartenenti a questo modulo. |
| esportazioni: (MyRedComponent, MyDatePipe) | Elencherà i componenti e i tubi visibili per importare questo modulo |
| importazioni: (BrowserModule, SomeOtherModule) | Elenca i moduli da importare in questo modulo |
| provider: (MyService, (fornire:…)) | Fornisce l'elenco dei provider di iniezione di dipendenza visibili sia ai contenuti del modulo |
| entryComponents: (SomeComponent, OtherComponent) | Fornirà l'elenco dei componenti a cui non si fa riferimento in un modello raggiungibile. |
Esistono altre direttive e rilevamenti di modifica dei componenti e hook del ciclo di vita che possono essere implementati poiché i metodi di classe sono di seguito:
| direttive | Descrizione |
| costruttore (myService: MyService, …) (…) | È usato per iniettare dipendenze. |
| ngOnChanges (changeRecord) (…) | Viene chiamato dopo ogni modifica alle proprietà di input e prima dell'elaborazione del contenuto o delle visualizzazioni figlio |
| ngOnInit () (…) | Si chiama dopo il costruttore e inizializzando le proprietà |
| ngDoCheck () (…) | Viene chiamato ogni volta che vengono verificate le proprietà del componente o delle direttive. Viene utilizzato per estendere l'esecuzione di un controllo doganale. |
| ngAfterContentInit () (…) | Viene chiamato dopo ngOninit quando il contenuto dei componenti o delle direttive è stato inizializzato. |
| ngAfterContentChecked () (…) | Viene chiamato dopo ogni controllo del contenuto del componente o della direttiva. |
| ngAfterViewInit () (…) | Viene chiamato dopo ngaftercontentint quando la direttiva sulle viste dei componenti e delle viste figlio è stata inizializzata. |
| ngAfterViewChecked () (…) | Viene chiamato dopo ogni controllo delle viste dei componenti e delle viste figlio in cui è già presente la direttiva. |
| ngOnDestroy () (…) | Viene chiamato una volta, prima di distruggere l'istanza. |
Suggerimenti e trucchi gratuiti sull'uso dei comandi di Angular 2 Cheat Sheet: -
- Nel cheat sheet di Angular2, platformBrowserDynamic (). BootstrapModule (AppModule); aiuta nel bootstrap dell'applicazione, usando il componente root can dal specificato.
- In Angular2, bootstrap: (MyAppComponent) elencherà i componenti da avviare quando questo modulo viene avviato.
- questo è incorporato nella direttiva in angualr2 per rimuovere o ricreare una parte dell'albero Dom in base all'espressione.
- trasforma l'elemento elenco e il suo contenuto in modello e viene utilizzato per creare un'istanza di una vista per ciascun elemento nell'elenco.
- "ConditionExpres sion"> questa direttiva viene utilizzata per selezionare i modelli in base al valore dell'espressione o in parole semplici come switch case in oops.
- , queste direttive consentono di assegnare stili a un elemento HTML tramite CSS e questo CSS può essere direttamente accessibile.
- questa direttiva associa le classi CSS sull'elemento a valori di mappa attendibili.
- questa direttiva fornisce l'associazione, l'analisi e la convalida a due vie per i controlli dei moduli.
- selettore: '.cool-button: not (a)' questa è la configurazione della direttiva che specifica il selettore CSS che identifica questa direttiva nel modello. Non supporta il selettore figlio principale.
- pro viders: (MyService, (fornire:…)) fornisce l'elenco dei provider di iniezione di dipendenza per direttiva e bambini.
- (fornire: MyService, useClass: MyMockService) imposterà o sovrascriverà il fornitore per il servizio in classe.
- (fornire: Il mio valore, utilizzare il valore: 4) imposterà o sovrascriverà il valore del provider su 4
Conclusione - Angular 2 Cheat Sheet
Il cheat sheet di Angular 2 ha molte caratteristiche e diverse direttive, sono disponibili moduli per lo sviluppo che aiutano a rendere l'applicazione più interattiva per l'utente e gli sviluppatori per tenere traccia dei problemi e delle funzionalità. È esteso e riutilizzabile per altre applicazioni. Angular2 sta usando il dattiloscritto che è completamente diverso dalla versione precedente di AngularJS.
Il cheat sheet angolare 2 è più facile da imparare in quanto la sua curva di apprendimento è semplice e diretta per i principianti e anche per gli studenti. La conoscenza di JavaScript sarebbe un vantaggio durante l'utilizzo angolare per lo sviluppo. È sempre bene rinnovarsi.
Articoli consigliati
Questa è stata una guida al cheat sheet di Angular 2 qui abbiamo discusso il contenuto e il comando, nonché suggerimenti e trucchi gratuiti del cheat sheet di Angular 2. Puoi anche leggere il seguente articolo per saperne di più -
- Il cheat sheet di UNIX
- Cheat Sheet HTML
- Cheat Sheet CCNA
- Foglio cheat JQuery