Share
O aplicație unghiulară este alcătuită din componente. Într-o aplicație Angular, o componentă constă dintr-un șablon HTML și o clasă de componente. 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.
În acest tutorial, veți învăța cum să începeți să creați un manager de liste de bacanie folosind Angular.
Veți avea nevoie de versiunea Node> 6.9.x și Node Package Manager (npm)> 3.x.x. Odată ce aveți amândouă, încercați să instalați CLI Angular folosind NPM.
npm install -g @ unghiular / cli
După instalarea CLI-ului unghiular, încercați să creați un proiect utilizând același.
ng noua AngularGrocery - skip-npm
Comanda de mai sus va crea structura proiectului. Navigați la directorul proiectului și instalați dependențele necesare.
cd AngularGrocery npm instalare
Pentru a porni serverul web de aplicații, tastați următoarea comandă:
ng servi
Odată ce serverul de aplicații a început, indicați browser-ul dvs. la http: // localhost: 4200 / și veți putea vizualiza aplicația implicită.
Figura de mai sus arată structura aplicației pentru managerul listei de produse alimentare. src folder conține codul sursă pentru aplicația implicită. aplicaţia dosar în interiorul src dosarul conține codul TypeScript. index.html în interiorul src folder este fișierul HTML principal în care sunt redate componentele angulare create.
În mod implicit, aplicația are o funcție app-rădăcină componentă. Să creăm o nouă componentă numită app-Băcănie pentru crearea aplicației pentru managerul alimentar. În interiorul directorului app, creați un fișier numit app.grocery.ts.
Importați component modul de la unghiular-core.
import Component de la '@ angular / core';
Veți utiliza Bootstrap pentru a proiecta componenta. Descărcați și includeți pachetul Bootstrap de pe site-ul oficial. Păstrați fișierele în src / active pliant.
Să definim componenta din interiorul lui app.grocery.ts fişier. Componenta va avea trei proprietati: selector, șablon, și styleUrls. selector indică modul în care va fi utilizat componenta. șablon definește codul HTML care va fi redat atunci când selectorul este utilizat. styleUrls definește adresa URL a stilurilor utilizate în componentă.
Interior app.grocery.ts, odată ce modulul component a fost importat, definiți app-Băcănie componentă după cum se arată:
@Component (selector: 'app-grocery', templateUrl:'/app.grocery.html ', styleUrls: [' ... /assets/css/bootstrap.min.css '])
După cum se vede în codul de mai sus, componenta utilizează un șablon numit app.grocery.html. Creați un fișier numit app.grocery.html în interiorul src / app pliant. Adăugați următorul cod la app.grocery.html fişier:
Managerul listei de produse alimentare
În app.grocery.ts fișier, adăugați GroceryComponent clasa de export.
clasa de export GroceryComponent
Trebuie să importați componenta nou creată în interiorul app.module.ts înainte de ao folosi. Importați GroceryComponent în app.module.ts.
import GroceryComponent din "./app.grocery";
Declarați și bootstrap componenta nou creată alimentar în app.module.ts fişier.
@NgModule (declarații: [GroceryComponent], importurile: [BrowserModule, FormsModule, HttpModule], furnizori: [], bootstrap: [GroceryComponent])
Acum sunteți pregătit să utilizați componenta Băcănie din interiorul index.html pagină. Eliminați componenta implicită din index.html și adăugați următorul cod HTML:
Se incarca…
Salvați modificările de mai sus și reporniți serverul. Navigați browser-ul la http: // localhost: 4200 / și veți avea afișat componenta Grocery.
Odată ce un element este introdus în caseta text de intrare, trebuie să citiți articolul și să îl salvați într-o listă. Pentru a citi intrarea, veți profita de ngModel, care o va lega la o variabilă. Adăuga ngModel la caseta text de intrare.
De fiecare dată când un text este introdus în caseta text de intrare, sarcină variabilă este actualizată în consecință. Definiți sarcină variabilă în interiorul GroceryComponent în app.grocery.ts fişier. Adăugați o variabilă numită sarcini pentru a păstra o colecție de sarcini introduse.
sarcină: șir; sarcinile = [];
Când faceți clic pe butonul OK, sarcina va fi adăugată la sarcini lista de colecții pe care ați definit-o în interiorul GroceryComponent. Definiți un onClick în interiorul metodei GroceryComponent pentru a face față click pe butonul OK. Iată cum arată:
onClick () this.tasks.push (name: this.task); this.task = ";
Adăugați evenimentul clic pe butonul OK după cum se arată:
Când se face clic pe butonul OK, noua sarcină se adaugă la sarcini lista de colectare. sarcină variabila este de asemenea resetată pentru a șterge caseta de text introdusă.
Salvați modificările de mai sus și, la intrarea în sarcină și făcând clic pe butonul OK, sarcina este adăugată la sarcini Colectie. Pentru a afișa colecția de sarcini, adăugați o deschidere în interior app.grocery.html.
Accentsconagua
sarcini | json Introduceți sarcina în caseta de introducere și apăsați pe O.K buton. Veți avea sarcini variabilă afișată ca JSON pe pagină.
Aici este completă app.grocery.ts fişier:
import Component de la '@ angular / core'; @Component (selector: 'app-grocery', templateUrl:'/app.grocery.html ', styleUrls: [' ... /assets/css/bootstrap.min.css ']) clasa de export GroceryComponent task: string ; sarcinile = []; onClick () this.tasks.push (name: this.task); this.task = ";
Acum, deoarece aveți elementele adăugate în sarcini , puteți să o utilizați pentru a afișa sarcinile. Veți face uz de NgFor directive pentru a repeta sarcini colectați și creați dinamic codul HTML pentru afișarea sarcinilor. Veți afișa sarcina în interiorul elementului UL și repetați LI folosind NgFor directivă. Iată cum arată:
După cum se vede în codul de mai sus, repetați prin sarcini variabilă și să creeze dinamic elementul LI și intervalul de timp. Iată cum este complet app.grocery.html fișierul șablon arată:
Managerul listei de produse alimentare
- task.name
Salvați modificările de mai sus și reporniți serverul. Punctați browserul la http: // localhost: 4200 / și introduceți sarcina și apăsați pe O.K buton. Fiecare activitate adăugată va fi afișată în lista de mai jos.
În acest tutorial unghiular, ați văzut cum să începeți să creați un manager de liste de bacanie folosind Angular. Ați învățat cum să creați vizualizarea pentru componenta Grocery, să adăugați elemente în lista de produse alimentare și să afișați elementele adăugate.
În partea următoare a acestui tutorial, veți implementa funcțiile pentru a marca articolele finalizate, a arhiva elementele finalizate și a elimina elementele adăugate.
Codul sursă din acest tutorial este disponibil pe GitHub. Spuneți-ne sugestiile dvs. în comentariile de mai jos.
