Share
Angular este un cadru popular pentru crearea de capete frontale pentru aplicații web și mobile. Totul a inceput cu AngularJS 1.x si apoi AngularJS 2, iar acum este in final Angular, cu cele mai recente actualizari si corectii de bug-uri fiind lucrate de echipa Angular.
Componentele reprezintă o parte importantă a unei aplicații web angulare. În acest tutorial, veți vedea cum puteți începe să creați o aplicație web folosind Angular și veți cunoaște și componentele.
Începeți prin instalarea CLI Angular folosind managerul de pachete de noduri (npm).
npm install -g @ unghiular / cli
Odată ce ați instalat CLI Angular, creați o nouă aplicație Angular folosind CLI.
Aplicația nouă unghiulară
Navigați la dosarul aplicației și porniți serverul.
Aplicația unghiulară a aplicației cd
Punctați browser-ul la http: // localhost: 4200 / și ar trebui să aveți aplicația implicită să ruleze.
Navigați la unghiular aplicație dosarul de proiect și aruncați o privire asupra structurii proiectului. Iată cum arată:
Fiecare aplicație Angular are un modul rădăcină în care definiți componenta principală de încărcat. În aplicația Angulară implicită, modulul rădăcină este definit în interiorul app.module.ts. Cand AppModule încărcări, verifică ce componentă este bootstrapped și care încarcă modulul respectiv. După cum se vede în app.module.ts, modulul care este bootstrapped este AppComponent. AppComponent componenta este definită în fișier app.component.ts.
O componentă este definită folosind @Component decorator. În interiorul @Component decorator, puteți defini componenta selector, componenta șablon, și cele conexe stil.
Componentele sunt ca un element de bază în o aplicație Angular. Componentele sunt definite folosind @component decorator. O componentă are a selector, șablon, stil și alte proprietăți, prin care specifică metadatele necesare procesării componentei.
Din documentele oficiale:
Componentele reprezintă cel mai elementar element de construcție al unui interfață utilizator într-o aplicație Angulară. O aplicație unghiulară este un arbore al componentelor unghiulare. Componentele unghiulare sunt un subset de directive. Spre deosebire de directive, componentele au întotdeauna un șablon și numai o componentă poate fi instanțiată pe un element dintr-un șablon.
Cel mai bun mod de a înțelege ceva legat de programare este de fapt să faci. Deci, să începem prin crearea unei componente angulare pentru adăugarea a două numere. Să spunem asta CalculatorComponent.
Să începem prin crearea unei componente pentru calculatorul nostru. În interiorul src / app folder, creați un dosar numit Calc. Aici este locul nostru Calc componenta va locui. În interiorul Calc folder, creați un fișier numit calc.component.html. Acesta va fi șablonul pentru componenta calculatorului nostru. Iată cum arată:
Componenta calculatorului
Creați un fișier numit calc.component.ts. Aici veți defini Calc componentă și să specificați metadatele aferente. Definiți componenta folosind @component decorator. Pentru a defini componenta, trebuie să importați component modul de la miezul unghiular.
import Component de la '@ angular / core';
Definiți componenta specificând șablon, stil, și selector. De asemenea, veți defini a clasă pentru a gestiona șablonul specificat de @component decorator. Iată cum arată:
import Component de la '@ angular / core'; @Component (selector: 'calc', templateUrl: 'calc.component.html', styleUrls: ['calc.component.css']) clasa de export CalcComponent
Toate stilurile legate de șablonul de componente trebuie să fie definite în interiorul fișierului specificat în decoratorul de componente. Deci, creați un fișier numit calc.component.css în interiorul Calc pliant. Veți pune stilul pentru componenta calculatorului din interiorul acestui fișier.
Acum, când aveți componenta gata, să definim componenta din interiorul modulului rădăcină app.module.ts.
Mai întâi importați componenta din interiorul fișierul app.module.ts și apoi includeți-o în declaraţii secțiune. Iată cum arată după adăugarea CalcComponent:
import BrowserModule din '@ unghiular / platform-browser'; import NgModule de la '@ angular / core'; importați AppComponent din "./app.component"; import CalcComponent de la './calc/calc.component' @NgModule (declarații: [AppComponent, CalcComponent], import: [BrowserModule], furnizori: [], bootstrap: [AppComponent]
După cum puteți vedea în modulul rădăcină app.module.ts, AppComponent este modulul bootstrapped și, prin urmare, va fi afișat în mod implicit. Deci, pentru a vizualiza componenta noastră de calculatoare, definiți-o în interiorul app.component.html. Iată cum app.component.html file looks:
Salvați modificările de mai sus și porniți serverul. Ar trebui să puteți vedea conținutul HTML al componentei calculatorului afișat.
Să începem prin adăugarea unui șablon pentru calculatorul nostru unghiular. Adăugați următorul cod la calc.component.html fişier:
Componenta calculatorului
Rezultat
Adăugați următorul stil la calc.component.css fişier.
.grilă lățime: 100% .row lățime: 100%; afișaj: flex; .col-1 lățime: 8,33%; .col-2 lățime: 16,66%; .col-3 lățime: 25%; .col-4 lățime: 33,33%; .col-5 lățime: 41,66%; .col-6 lățime: 50%; .col-7 lățime: 58,33%; .col-8 lățime: 66,66%; .col-9 lățime: 75%; .col-10 lățime: 83,33%; .col-11 lățime: 91,66%; .col-12 lățime: 100%; .cap (lățime: 100%; fundal-culoare: # 003A60; înălțime: 100px; .prima h2 line-height: 100px; culoare: #fff; butonul background-color: # 4CAF50; / * Verde * / frontieră: nici unul; culoare albă; padding: 15px 32px; text-align: centru; text-decoration: nici unul; afișare: inline-block; font-size: 16px; margine: 4px 2px; cursor: pointer; intrare border: none; margine de fund: 1 pix solid gri; lățime: 80%; marja: 0% 10%; umplutură: 5%; .result background-color: #ddffff; lățime: 80%; margine: 20px 10px 10px 10px; înălțime: 100px; frontieră stângă: 3px solid # 2196F3; . Rezultatul intervalului line-height: 100px;
Salvați modificările de mai sus și ar trebui să puteți vizualiza următoarea interfață de utilizator.
Să adăugăm ngModel directivă la casetele de text introduse mai sus. Modificați calc.component.html cod după cum se arată mai jos:
Așa cum ați văzut mai sus, ați setat ngModel pentru casetele de text introduse la variabile Numărul 1 și numarul 2.
Să definim variabilele din interiorul lui CalcComponent în calc.component.ts fişier.
clasa de export CalcComponent public number1: number; numărul public2: număr;
Acum, atunci când utilizatorul introduce în casetele de text, corespunzătoare ngModel variabilă se actualizează. Puteți verifica afișând variabila în fișierul șablon al componentei.
Numărul 1: număr1 Numărul 2: număr2
Salvați modificările și introduceți valori în casetele de introducere și ar trebui să aveți actualizată datele în interiorul intervalului.
Să adăugăm un clic pe buton pe Adăuga care va calcula suma Numărul 1 și numarul 2 când ați dat clic pe buton.
Modificați codul HTML după cum se arată pentru a include directiva privind clicurile.
Definiți adăuga funcția în interiorul CalcComponent așa cum se arată:
import Component de la '@ angular / core'; @Component (selector: 'calc', templateUrl: 'calc.component.html', styleUrls: ['calc.component.css']) clasa de export CalcComponent public number1: number; numărul public2: număr; rezultatul public: numărul; public adăugați () this.result = această număr.număr1 + această.număr2
După cum se vede în codul de mai sus, rezultatul adăugării este plasat într-o variabilă numită rezultat.
Să modificăm șablonul HTML pentru a afișa rezultatul odată ce variabila este setată.
Rezultat: rezultat
Salvați modificările de mai sus și încercați să adăugați două numere făcând clic pe Adăuga buton. Veți avea rezultatul afișat în interfața cu utilizatorul.
În acest tutorial, ați văzut cum să începeți să creați o aplicație web folosind Angular 4. Ați învățat despre componentele unghiulare și cum să le creați. Ați creat o componentă angulară simplă pentru a adăuga două numere.
Codul sursă din acest tutorial este disponibil pe GitHub. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem disponibil pe Envato Market.
Spuneți-ne gândurile, sugestiile sau corecțiile din comentariile de mai jos.
Accentsconagua