Introducere în foaia Cheat Angular 2
Angular 2 este un cadru open-source construit pe JavaScript. A fost utilizat în principal pentru dezvoltarea aplicațiilor web front-end. Este succesorul lui AngularJS. Este scris cu TypeScript. Este dezvoltat de Google. Angular 2 este construit pe JavaScript modern care utilizează ES6. Angular 2 are capacități mai bune de gestionare a evenimentelor, șabloane puternice, suport mai bun pentru dispozitive mobile și aplicații web desktop. De asemenea, este compatibil cu dispozitivele mobile și pe toate platformele precum Windows, Mac și Linux.
Angular 2 are caracteristici cheie pentru a dezvolta aplicații care sunt componente, dactilografiere și servicii. Angular 2 are diferite componente care sunt module, componente, șabloane, metadate și service. Componentele ajută la construirea aplicației în multe module și care ajută la menținerea aplicației pentru o perioadă mai lungă de timp. Setul de coduri diferit a fost întreținut și utilizat de diferite module de aplicație îngrijite de funcția de serviciu. Modulele ajută la ruperea aplicației într-o piesă logică care a fost codată pentru a îndeplini o anumită sarcină.
Comenzi și conținut de pe Angular 2 Cheat Sheet
Foaia de înșelare Angular 2 are o bibliotecă extinsă, scalabilă, extensibilă, interactivă și conține multe metode construite pentru a calcula operațiunile comune. Există diferite sintaxe pentru șabloane, NgModule, directive încorporate, formulare și alte configurații disponibile ca mai jos:
| Sintaxa șablonului | DESCRIERE |
| Se leagă proprietatea „valoarea” la rezultatul expresiei „nume” | |
| Se leagă atributul „rol” de exprimarea rezultatului „rolul meu” | |
| Se va apela la metoda citită Text, atunci când se declanșează evenimentul de clic. | |
| Se leagă proprietatea de un șir interpolat | |
|
Buna ziua numele meu)) | Se leagă contextul la un șir interpolat |
| Stabilește legarea în două sensuri. | |
|
… | * simbolul transformă elementul curent într-o temporizare încorporată. |
|
Student: ((student? .Sname)) | ? este operatorul de navigație spune că câmpul student este opțional |
| Se leagă lățimea proprietății stilului pentru a exprima o dimensiune a rezultatului. | |
| Folosit pentru legarea datelor și expresia de legare a evenimentelor din șablon. | |
|
Nr. Auto: ((numărul vehiculului | myCarNuFormat)) | Transformă valoarea curentă a numărului vehiculului prin conducta mycarNuformat. |
| Acesta deambientează elementul de la o componentă HTML | |
| Se leagă prezența clasei de expresia adevărului. |
NgModules: - diferitele directive ale Ngmodule sunt:
| directivă | DESCRIERE |
| @NgModule ((declarații ..)) | Definește un modul care conține directive etc. |
| declarații: (MyRedComponent, MyBlueComponent, MyDatePipe) | Acesta va informa lista componentelor, directivelor și conductelor aparțin acestui modul. |
| exporturi: (MyRedComponent, MyDatePipe) | Acesta va lista componentele și conductele vizibile pentru a importa acest modul |
| import: (BrowserModule, SomeOtherModule) | Acesta va enumera modulele de importat în acest modul |
| furnizori: (MyService, (furnizați: …)) | Oferă lista furnizorilor de injecție de dependență vizibili atât pentru conținutul modulului |
| entryComponents: (SomeComponent, OtherComponent) | Acesta va furniza lista componentelor care nu sunt menționate într-un șablon accesibil. |
Există alte directive și detecții de schimbare a componentelor și cârlige pentru ciclul de viață, care pot fi implementate pe măsură ce metodele de clasă sunt mai jos:
| directivă | Descriere |
| constructor (myService: MyService, …) (…) | Este folosit pentru a injecta dependențe. |
| ngOnChanges (changeRecord) (…) | Se numește după fiecare modificare la proprietățile de intrare și înainte de procesarea conținutului sau a vizualizărilor copilului |
| ngOnInit () (…) | Se numește după constructor și inițializarea proprietăților |
| ngDoCheck () (…) | Se numește de fiecare dată când sunt verificate proprietățile componentelor sau directivelor. Este folosit pentru a extinde pentru efectuarea unui control vamal. |
| ngAfterContentInit () (…) | Se numește după ngOninit când inițializarea conținutului componentelor sau directivelor. |
| ngAfterContentChecked () (…) | Se numește după fiecare verificare a conținutului componentei sau directivei. |
| ngAfterViewInit () (…) | Se numește după ngaftercontentint când a fost inițializată instrucțiunea pentru vizualizarea componentelor și pentru vizualizarea copiilor. |
| ngAfterViewChecked () (…) | Se solicită, după fiecare verificare a vizualizărilor componentelor și a copiilor, această directivă este deja în vigoare. |
| ngOnDestroy () (…) | Este apelat o singură dată, înainte de a distruge instanța. |
Sfaturi și trucuri gratuite pentru utilizarea comenzilor Angular 2 Cheat Sheet: -
- În foaia de înșelare Angular2, platformBrowserDynamic (). BootstrapModule (AppModule); ajută la demararea aplicației, folosind componenta root poate fi specificată.
- În Angular2, bootstrap: (MyAppComponent) va enumera componentele la bootstrap atunci când acest modul este declanșat.
- aceasta este încorporată în directivă în angualr2 pentru a elimina sau a recrea o porțiune din arborele Dom bazat pe expresie.
- transformă elementul de listă și conținutul său în șablon și este folosit pentru a instantana o vizualizare pentru fiecare articol din listă.
- „ConditionExpres sion”> această directivă este utilizată pentru selectarea șabloanelor pe baza valorii de expresie sau în cuvinte simple, cum ar fi cazul de tip switch în oops.
- , aceste directive vă permit să atribuiți stiluri unui element HTML folosind CSS și acest CSS poate fi direct accesibil.
- această directivă leagă clasele CSS de pe element la valorile hărții de încredere.
- această directivă prevede legarea în două sensuri, analizarea și validarea controalelor de formă.
- selector: „butonul .cool: nu (a)” aceasta este configurația directivei care specifică selectorul CSS care identifică această directivă în șablon. Nu acceptă selectorul de părinți.
- Pro viders: (MyService, (oferi: …)) furnizează lista furnizorilor de injecție de dependență pentru directivă și copii.
- (furnizează: MyService, useClass: MyMockService) va seta sau înlocui furnizorul pentru serviciul la clasă.
- (furnizați: Valoarea mea, utilizați Valoare: 4) va seta sau va trece peste valoarea furnizorului la 4
Concluzie - Angular 2 Cheat Sheet
Foaia de înșelare Angular 2 are o mulțime de caracteristici și directive diferite, sunt disponibile module de dezvoltare care ajută la crearea aplicației mai interactivă pentru utilizator și dezvoltatori pentru a urmări problemele și funcționalitatea. Este extins și reutilizabil pentru alte aplicații. Angular2 utilizează tipografia care este complet diferită de versiunea anterioară a AngularJS.
Fisa de înșelat angulară 2 este mai ușor de învățat, deoarece curba sa de învățare este simplă și dreaptă atât pentru începători cât și pentru studenți. Cunoașterea JavaScript ar fi un avantaj în timp ce utilizați unghiular pentru dezvoltare. Este întotdeauna bine să ne redimensionăm.
Articole recomandate
Acesta a fost un ghid pentru fisa Cheat Angular 2 aici am discutat despre conținut și comandă, precum și sfaturi și trucuri gratuite din Angular 2 Cheat Sheet. De asemenea, puteți consulta articolul următor pentru a afla mai multe -
- Foaia de înșelăciune a UNIX
- Cheat Sheet HTML
- Cheat Fisa CCNA
- Foaie de cheat JQuery