Share
Angular a devenit foarte popular în ultimii ani. Puteți utiliza acest cadru JavaScript open-source pentru a crea aplicații web și mobile. Dacă v-ați gândit să învățați Angular, dar nu știți de unde să începeți, urmați această serie ar putea fi o idee bună.
Scopul acestei serii este de a acoperi elementele de bază ale aplicației Angular, creând în același timp o aplicație foarte simplă, care oferă informații despre diferite țări. Angular este scris în TypeScript, deci este logic să scrieți și propriul cod în TypeScript.
Nu este nevoie să vă faceți griji dacă nu ați folosit anterior niciodată TypeScript. Pentru a pune-o pur și simplu, TypeScript este doar tastat JavaScript cu caracteristici suplimentare. Am scris, de asemenea, o serie intitulată TypeScript pentru începători pe Envato Tuts +, unde puteți învăța mai întâi elementele de bază ale TypeScript.
Dacă sunteți deja familiarizat cu TypeScript, puteți merge mai departe și puteți începe să creați prima aplicație Angular.
Primul pas ar fi instalarea Node.js. Puteți să vă îndreptați către site-ul oficial și să descărcați versiunea corespunzătoare. Managerul de pachete de noduri va fi instalat ca parte a Node.js.
Următorul pas este să instalați TypeScript executând următoarea comandă. Vă recomandăm să instalați o versiune TypeScript peste 2.1.
npm instalează -g tipcript
În cele din urmă, trebuie să instalați CLI unghiular executând următoarea comandă. Instalarea CLI Angular va facilita procesul de creare a aplicației Angulare.
npm install -g @ unghiular / cli
Acum, puteți să creați o nouă aplicație unghiulară chiar din cutie, executând următoarea comandă în interiorul terminalului. Înainte de a rula comanda, asigurați-vă că ați trecut la directorul în care doriți să creați aplicația.
ng țară-app
Instalarea tuturor dependențelor pentru proiect necesită ceva timp, deci vă rugăm să aveți răbdări în timp ce CLI Angular vă va instala aplicația. După finalizarea instalării, veți vedea un dosar numit țară aplicație în directorul curent. Puteți rula aplicația dvs. chiar acum prin schimbarea directorului țară aplicație și apoi să fie difuzate ng servi în consola.
cd country-app ng serve - deschis
adăugare --deschis va deschide automat aplicația în browser la adresa http: // localhost: 4200 /.
Aplicația de informații despre țară pe care o creăm va avea trei componente. HomeComponent va arăta primele trei țări sub diferite categorii cum ar fi populația, PIB și zona. Veți putea să faceți clic pe numele fiecărei țări pentru a citi mai multe despre aceasta. Informațiile suplimentare despre țară sunt afișate utilizând o altă componentă, pe care o vom apela CountryDetailComponent. În aplicația noastră va exista o componentă suplimentară, care va fi utilizată pentru a afișa o listă a tuturor țărilor pe care le-am stocat în aplicația noastră.
Deoarece aceasta este prima dvs. aplicație Angular, obiectivul nostru principal va fi să păstrăm lucrurile simple fără a adăuga nici o funcție complicată. Odată ce înțelegeți bine noțiunile de bază, crearea de aplicații mai complexe nu va părea o sarcină descurajantă.
Imaginea de mai jos este de pe pagina de pornire sau HomeComponent în aplicația noastră de informații despre țară. După cum puteți vedea, există trei țări în fiecare categorie și au fost plasate în ordine descrescătoare. În timp ce creați HomeComponent, veți învăța cum să sortați diferite țări înainte de a le afișa în interiorul șablonului.
Următoarea imagine prezintă pagina "toate țările" sau AllCountriesComponent din aplicația noastră. Structura acestei componente este foarte asemănătoare cu HomeComponent. Singura diferență este că de această dată listam toate țările împreună cu capitalele lor.
Dacă faceți clic pe caseta din orice țară reprodusă în interiorul fiecărei HomeComponent sau AllCountriesComponent, vei fi dus la pagina cu detaliile țării sau CountryDetailComponent. Informațiile furnizate despre o țară nu pot fi editate.
Există un buton înapoi după detaliile fiecărei țări. Acest buton de revenire vă duce înapoi la componenta sau pagina anterioară. Dacă ați venit la CountryDetailComponent de la HomeComponent, vi se va lua înapoi la HomeComponent. Dacă ați ajuns la CountryDetailComponent de la AllCountriesComponent, vi se va lua înapoi la AllCountriesComponent.
Referirea la diferitele componente pe care le cream ca pagini nu este corectă din punct de vedere tehnic. Cu toate acestea, folosesc termeni precum pagina de pornire sau HomeComponent interschimbabil pentru că vedeți o mulțime de termeni necunoscuți, cum ar fi rutarea, componentele și decoratorii, pot fi intimidante pentru cititorii care nu au creat niciodată o aplicație Angular. Utilizarea acestor termeni liber pentru această serie vă poate ajuta să învățați rapid în loc să vă confundați cu jargonul.
Înainte de a începe să creăm aplicația noastră, trebuie să vă simțiți confortabil cu conceptele de bază ale Angular. Această secțiune va conține pe scurt teme importante precum componente și șabloane.
Componentele reprezintă componentele unei aplicații Angulare. Acestea vă permit să controlați interfața utilizator a aplicației dvs. O componentă de bază constă din două părți: un decorator și o definiție de clasă. Puteți specifica logica aplicației pentru o componentă din interiorul clasei.
Decoratorul de componente este utilizat pentru a specifica informații cum ar fi un selector personalizat pentru a identifica componenta, calea către șablonul HTML și regulile de stil care trebuie aplicate componentei.
Aici este un decorator elementar de bază care stabilește toate cele trei valori pentru CountryDetailComponent:
@Component (selector: 'app-country-detail', templateUrl: './country-detail.component.html', styleUrls: ['./country-detail.component.css'])
Toate componentele pe care le creăm vor avea un selector personalizat care specifică eticheta care face componenta în interiorul browserului. Aceste etichete personalizate pot avea orice nume doriți. De exemplu, vom crea un a countryDetailComponent în cel de-al treilea tutorial al seriei, și vom folosi eticheta personalizată numită app-țară-detaliu pentru a face această componentă în browser.
Orice componentă pe care o creați va consta dintr-un șablon care controlează ceea ce este redat pe pagina aplicației. De exemplu, countryDetailComponent Are doua div etichete care acționează ca un înveliș în jurul conținutului principal al componentei. Fiecare informație despre o țară este pusă în interiorul ei p tag-ul, iar numele țării este pus în interiorul unui h2 etichetă. Toate aceste etichete pot fi stocate împreună ca șablon pentru countryDetailComponent și apoi redat ca o unitate. Acest șablon al componentei poate fi salvat ca un fișier HTML sau specificat direct în interiorul decoratorului folosind șablon atribut.
Componentele diferite ale aplicației noastre vor trebui să preia datele afișate pe ecran. Vom crea o clasă de servicii care va conține funcții care să ne ajute să preluăm aceste date și să le sortim sau să le modificăm într-un fel sau altul. Apoi vom folosi funcționalitatea diferitelor clase de componente pentru a afișa aceste date către utilizator.
Puteți lua în considerare a Serviciu pentru a fi pur și simplu orice valoare, funcție sau funcție pe care aplicația dvs. are nevoie. Obținerea tuturor țărilor stocate în aplicația noastră este un serviciu, și astfel este sortarea și afișarea acestora. Toate cele trei componente din clasa noastră vor utiliza funcții din serviciul nostru pentru a prelua date.
Când creați componente pentru aplicația dvs., va trebui să importați dependențe din diferite module. De exemplu, vom importa component de la @ Unghiular / core ori de câte ori creăm o componentă a noastră. De asemenea, puteți utiliza aceeași sintaxă pentru a importa dependențele create de dvs. Partea din paranteze curbate este utilizată pentru a specifica dependența pe care doriți să o importați și partea care urmează din este folosit pentru a specifica unde Angular poate găsi dependența.
Iată un fragment de cod din țară aplicație pe care o vom crea. După cum puteți vedea, noi importăm component și OnInit de la @ Unghiular / core. În mod similar, importăm a Țară și CountryService din fișierele pe care le-am creat noi înșine.
import Component, OnInit de la '@ angular / core'; import Country de la "... / țară"; import CountryService de la "... / country.service";
După ce ați rulat ng țară-app comanda CLI Angular a creat o mulțime de fișiere și foldere pentru dvs. Văd că atât de multe fișiere pot fi intimidante ca începători, dar nu trebuie să lucrați cu toate aceste fișiere. Când creați aplicația țării noastre, vom modifica numai fișierele deja existente în interiorul src / app precum și crearea de fișiere noi în același director. În acest moment, ar trebui să aveți cinci fișiere diferite în src / app pliant. Aceste fișiere creează o aplicație shell care va fi utilizată pentru a pune împreună restul aplicației noastre.
app.component.ts fișierul conține logica pentru componenta noastră scrisă în TypeScript. Puteți deschide acest fișier și puteți actualiza titlu proprietate a AppComponent clasa la 'Fun Facts About Countries'. app.component.ts fișierul ar trebui să aibă acum următorul cod.
import Component de la '@ angular / core'; @Component (selector: 'app-root', templateUrl:'/app.component.html ', styleUrls: [' ./app.component.css ']) clasa de export AppComponent title =' Fun Facts About Countries „;
app.component.html fișier conține șablonul pentru nostru AppComponent clasă. Deschide app.component.html fișierul și înlocuiți codul HTML din interiorul acestuia cu următoarea linie:
titlu
Prin împachetare titlu în interiorul parantezelor curbate, îi spunem lui Angular să pună valoarea lui titlu proprietate a AppComponent clasa în interiorul h1 etichetă.
Vom actualiza acest fișier în ultimul tutorial al seriei pentru a face noi componente pe care le vom crea. Pentru moment, trebuie doar să afișăm titlul aplicației noastre.
Modificările aduse acestui fișier vor fi reflectate automat în browser-ul de la http: // localhost: 4200 /. Asigurați-vă că consola este încă deschisă și că ați introdus deja ng servi comanda de la începutul tutorialului.
Diferitele funcții și caracteristici ale aplicației vor fi controlate de mai multe componente simple pe care le vom crea ulterior. Vă puteți gândi la această coajă de aplicație ca la o mașină și la diferite componente pe care le vom crea ca părți ale mașinii ca motorul și roțile. Fiecare componentă va îndeplini funcția sa specifică și le puteți pune împreună pentru a crea întreaga mașină.
Scopul acestui tutorial a fost să vă ajute să instalați toate instrumentele necesare de care aveți nevoie pentru a crea o aplicație Angular și pentru a trece rapid câteva concepte angulare fundamentale.
Pentru a rezuma, trebuie să cunoașteți elementele de bază ale formularului TypeScript înainte de a crea o aplicație Angular. În pasul următor, trebuie să instalați Node.js, TypeScript și CLI Angular. După aceasta, puteți rula o grămadă de comenzi din secțiunea Începerea acestui tutorial și prima dvs. aplicație Angular va fi instalată.
Aplicația țării noastre va face mult mai mult decât să afișeze titlul. În următorul tutorial, veți crea câteva clase și servicii care vor fi utilizate pentru a stoca și a prelua date despre diferite țări. Aceste clase și servicii vor fi utile în al treilea și al patrulea tutorial, în care vom crea diferite componente ale aplicației noastre.
În timp ce lucrăm prin această serie de tutori, nu uitați să vizitați Envato Market pentru a vedea ce este disponibil pentru utilizare și studiu atât pentru Angular, cât și pentru JavaScript, în general.
Accentsconagua