Kao što svi znamo, Angular je riječ o kojoj se najviše raspravlja u svijetu frontend razvoja. Ovih je godina stekao veliku popularnost. Angular postaje izbor mnogih frontend programera, a ja sam također jedan od njih.
U ovom ću članku naglasiti kada se pojavio kutni i koliko brzo je prerastao u tržište. Svakih šest mjeseci, Angular tim dolazi s novom verzijom angular, što ga čini moćnijim s novim značajkama. Moram cijeniti ekipu iz ugla zbog njihovih prekrasnih napora.
Eto, sad biste mogli biti uzbuđeni kako je evoluirao, koje su nove značajke dodane u različitim verzijama. Sada je čekanje gotovo. Započnimo!
Prije nego što krenem dalje, želio bih obavijestiti svoje čitatelje da je 'Angular 8' najnovija verzija koju je objavio naš talentirani angularni tim.
Rođenje heroja (AngularJS) - 2010
2010. godine dogodilo se rođenje današnjeg heroja na tržištu. Bio je poznat kao 'AngularJS'.
AngularJS je Javascript okvir koji je razvio Google. Koristi se za izradu aplikacije na jednoj stranici (SPA). Čekati! Nadam se da znate što je SPA. Ako ne, pitajte Google o tome, a zatim se vratite jer je ovo jedan od lijepih pristupa koji koristi kutni, ali evo kratkog uvoda u SPA (oni koji znaju, mogu preskočiti):
SPA ili Jednostranični program je program u kojem se sve preuzima u jednom potezu. Sav potreban kôd preuzima se u jednom potezu. Za razliku od aplikacije s više stranica, ne morate tražiti web stranicu od poslužitelja za svaki pogodak i učitavanje stranice. U SPA-u datoteka index.html preuzima se jednom sa svim sadržajem, a zatim za svaku promjenu URL-a postojeća web stranica dinamički učitava zahtjevni sadržaj. Ovaj pristup daje bolji UX u prebacivanju između različitih stranica i daje vam osjećaj aplikacije.
To je sve o SPA-u. Nadam se da će vam dati kratku sliku o tome. Prijeđimo na izvornu temu.
AngularJS omogućuje programerima brži razvoj web aplikacija. Koristi prikazivanje na strani klijenta - tehniku u kojoj se za prikazivanje sadržaja brine klijent (preglednik). Pa, neću ulaziti u detalje o tome koje su prednosti i nedostaci ove tehnike, ali glavna briga ove tehnike je SEO. Ovaj prikaz koji koristi kutni sustav siromašan je SEO-om. Čekati! Nemojte misliti da je kutni loš. Postoji vrlo popularan bollywoodski dijalog - "Slika abhi baki hai mere dost (film je još uvijek ostao, prijatelju)". Mislim da ovaj dijalog odgovara trenutnoj situaciji. Razgovarat ću o tome zašto sam to rekao.
Sada bismo se trebali usredotočiti na značajke AngularJS-a. Evo nekoliko:
1) Povezivanje podataka - automatska sinkronizacija između modela i prikaza.
2) Sustav ubrizgavanja ovisnosti - obrazac dizajna u kojem sustav opskrbljuje ovisne objekte kada kreira objekt.
3) opseg - koji se brine o kontroloru i pogledu.
4) Usluge - za razmjenu informacija između različitih dijelova aplikacije.
5) Direktive - HTML daje super moć. Na primjer, ng-model, ng-app.
6) Kontroleri - srce aplikacije u kojoj boravi logika.
7) Predložak - prikaz koji daje informacije pomoću našeg kontrolera i modela.
Popis je dugačak. Neću ulaziti u detalje o angularJS, ali u angularJS, kontroleri su srce aplikacije. Pa, angularJS je imao puno značajki za razvoj moćne web aplikacije, ali nije uspio u nekom trenutku poput ogromne veličine snopa, problema s performansama, problema s SEO-om, problema s održavanjem koda, ali to ne znači da je to potpuni neuspjeh. Vezanje podataka, koncepti ubrizgavanja ovisnosti uspjeh su kutnih. Stoga možemo reći da je napola neuspjeh, a napola uspjeh.
Nesavršenost u AngularJS natjerala je kutnog tima da prepiše cijeli okvir ispočetka. Tako velika promjena u novoj verziji bilo kojeg okvira / knjižnice nikada se nije susrela na tržištu. Nova verzija angular potpuno se razlikuje od AngularJS. Kako je drugačije? Razumijemo zaranjajući u našu sljedeću podtemu.
Kutni 2–2016
Kasnija verzija AngularJS-a pojavila se na tržištu 2016. godine, a tada više nije bila poznata kao AngularJS. Dobio je ime 'Kutni'. Verzija Angular 1.x poznata je pod nazivom AngularJS. Kasnija verzija nakon 2.x poznata je pod nazivom Angular. Kad sam se susreo s ove dvije riječi na svom putu web razvoja. Doslovno sam mislio da su to dva različita okvira i nakon istraživanja upoznao sam da je angular ažurirana verzija angularJS. Nadam se da moji čitatelji to ne bi pogrešno shvatili.
Angular 2 na tržište je izašao s drastičnim promjenama. Najveća promjena bilo je uvođenje Typescripta. Typescript je superset javascripta s dodatnim značajkama kao što slijedi Ups koncepte, snažno upisane. Programeri koji dolaze iz objektno orijentiranog svijeta smatraju ga poznatijim za razliku od javascripta.
Komponente su srce kutnog svijeta 2+. Angular je predstavio razne pakete za postizanje osnovnih i važnih funkcionalnosti poput paketa usmjeravanja za lako definiranje ruta, http paketa za dohvaćanje podataka s poslužitelja, animacijskog paketa za animacije i tako dalje.
Angular 2 također pruža koncept direktiva poput AngularJS. Direktive daju supersile našem HTML-u poput * ngFor, * ngIf (strukturna direktiva) čini naš html dinamičnim dok direktive atributa poput ngModel (za dvosmjerno vezivanje podataka), ngStyle brine o izgledu i ponašanju našeg DOM-a.
Još jedna značajka koja se ne mijenja u kutnom položaju je, također koristi DI sustav. Poput angularJS, DI sustav isporučuje ovisne objekte (ovisnosti) komponenti.
Čekati! Zaboravio sam vam reći o prekrasnoj ruci pomoći koja kut pruža agular-cli. Izvrsna je ruka za pomoć koja nam pomaže u bržem razvoju aplikacije kao za generiranje komponenata, samo upotrijebite 'ng gc ime-komponente' ('g' generira, a 'c' je komponenta). Ovo je još jedna cool značajka dodana u kutnom obliku.
Ovo nije kraj. Rekao sam vam da je najveći nedostatak angularjs-a taj što je siromašan SEO-om i sjetite se onog poznatog dijaloga koji sam rekao. Za nekoliko minuta shvatit ćete zašto sam to iskoristio.
Najveće su slabosti što je angularJS siromašan SEO-om. Kada pregledate izvor stranice, možete vidjeti da nema ničega (nema HTML-a) što indeksira i čini indeksima beskorisne, tj. Bez ikakvih informacija. Vrlo je bolno kada vaša web stranica želi da ih indeksiranje Googleov indeksira i natjera da dosegnu vrh na Google pretraživanju, ali to nisu uspjeli postići. Angular tim se pobrinuo za to i predstavio je kutni univerzal koji se brine za SEO vašeg kutnog web mjesta. Koristi prikazivanje na strani poslužitelja što zauzvrat rješava problem SEO-a.
To su značajke s kojima se kutni 2 pojavio na tržištu.
Kutni 4. - ožujak 2017
Nakon čitanja podteme, možda se pitate zašto ne i Kutni 3? To je često pitanje koje može svima pasti na pamet. Ne brinite! Javiti ću ti. Razlog zašto ne bi bio kutni 3 bio je paket usmjerivača. Paket kutnih usmjerivača već je distribuiran kao v3. Da ne bi bilo zabune, angularni tim objavio je verziju angular 4. Mislim da sada moji čitatelji mogu shvatiti značajke kutnog 4.
Angular 4 dolazi s ispravcima programskih pogrešaka i drugim novim značajkama i poboljšanjima. Najveće poboljšanje koje je napravljeno bilo je u veličini snopa. Smanjili su veličinu snopa za 60%, što je zauzvrat učinilo aplikaciju lakšom, a time i vrijeme učitavanja aplikacije.
Druga stvar koja je napravljena bila je u paketu za animaciju. Izvukli su značajku animacije u zasebnom paketu - @ angular / animacije.
Još jedno poboljšanje bilo je u strukturnoj direktivi. * ngIf je došao s drugim dijelom u ovoj verziji.
Ovo je kratki uvod u značajke kutnog 4.
Kutni 5. - studeni 2017
Nakon šest mjeseci, angular tim došao je s drugom novom verzijom, tj. Angular 5. Ova verzija angular 5 ponovno je došla s puno novih značajki, poboljšanja i ispravki programskih pogrešaka.
Kako je glavna briga svake web stranice brže vrijeme učitavanja. Angular se pobrinuo za to i u ovoj verziji. Da bi više poboljšali izvedbu aplikacije, uveli su optimizator gradnje - To je alat koji je predstavljen za izradu male veličine snopa. Koristi tehniku drhtanja stabla za uklanjanje mrtvog koda iz aplikacije.
Također su napravljena poboljšanja kompajlera koja omogućuju bržu obnovu aplikacije.
Sljedeća značajka koja je predstavljena bio je ključ za prijenos države (TransferStateKey koji je dio paketa platforme / preglednika). Dobro! Možda mislite što je to? Kada koristiti? Ljepoti ove značajke možete iskoristiti u svojoj aplikaciji ako koristite SSR. Da, ako ste implementirali SSR, tada morate koristiti značajku ključa za prijenos stanja. Razlog zašto sam to rekao jer kada koristite SSR i vaša aplikacija podnosi bilo kakav HTTP zahtjev (što je prilično često), tada će se taj zahtjev pozivati dva puta, tj. Jedan na poslužitelju i drugi u pregledniku. To uzrokuje problem treperenja (prošao sam kroz problem treperenja u svojoj aplikaciji jer se HTTP zahtjev pozivao dva puta). Zahvaljujući ključnoj značajki prijenosa stanja. Ova značajka omogućuje pregledniku da koristi odgovor HTTP zahtjeva koji je pogođen na poslužitelju.Koristi odgovor koji poslužitelj dobiva iz HTTP zahtjeva. Kao što mu samo ime govori, poslužitelj prenosi stanje odgovora pomoću html-a u preglednik. Stoga se mogu izbjeći dva puta pogođena HTTP zahtjeva.
Još jedno poboljšanje postignuto je u http klijentskom paketu. U ovoj je verziji HTTPClientModule došao s poboljšanjima poput korištenja ovog modula, programeri ne moraju raščlaniti odgovor pomoću karte. Korak raščlanjivanja više nije potreban. Pretpostavimo da ako postoji odgovor tipa koji nije JSON, tada taj odgovor možete navesti pomoću responseType u svom HTTP zahtjevu.
Ovo je sve o značajci kutnog 5. Sada je došlo vrijeme da prijeđemo na verziju kutnog 6. Nakon još šest mjeseci, kutni 6 izlazi na tržište s više snage.
Kutni 6. - svibanj 2018
U svibnju 2018. - nešto nakon šest mjeseci, angularni tim objavio je još jednu verziju angular - angular 6. Ova je verzija također došla s puno novih značajki. Navest ću neke od njih.
U ovoj se verziji ažurirao kutni CLI. Uvedene su nove naredbe poput ng update. Možete ga ažurirati kako biste ažurirali svoje kutne ovisnosti o projektu na najnovije. Na primjer:
ažuriranje @ kutna / jezgraDrugo poboljšanje koje je učinjeno bilo je u RxJS knjižnici koja se naziva RxJS6. Dvije važne promjene bile su:
- RxJS6 je predstavio novu unutarnju strukturu paketa.
- Korištenje operatora.
Nova interna struktura paketa uključuje promjene u načinu uvoza paketa. Umjesto povezanog uvoza, u ovome možemo koristiti pojedinačni uvoz. Na primjer :
import {Observable} iz 'rxjs / Observable'; uvoz {Subject} iz 'rxjs / Subject'; uvoz 'rxjs / add / operator / map';Sada, s rxjs6:
import {Observable, Subject} iz 'rxjs'; uvoz {mape} iz 'rxjs / operatora';Uporaba operatora također se mijenja u kutnom 6. Na primjer:
Stara verzija:
uvoz 'rxjs / add / operator / map'; this.http.get (url) .map ((response) => response.json)Nova verzija:
uvoz {mape} iz 'rxjs / operatora'; this.http.get (url) .pipe (karta ((podaci) => podaci * 2)Nadam se da ste dobili promjene koje se rade u RxJS knjižnici.
Druga promjena je - angular-cli.json zamjenjuje se s angular.json. Ova datoteka definira konfiguraciju projekta poput stilova, skripti, testiranja, procesa gradnje i tako dalje. U angular.json dodaje se više opcija za konfiguraciju kao što se može napraviti konfiguracija više projekata.
Ostala poboljšanja su - sada je dostupna umjesto. Promjena je u načinu stavljanja usluga na raspolaganje kao u prethodnoj verziji, ako želimo učiniti uslugu dostupnom u cijeloj aplikaciji ili u određenoj komponenti - moramo je pružiti u nizu davatelja usluga, ali u ovoj verziji, u samoj datoteci usluge je 'providedIn' metapodaci koji su mu dostupni. Tamo možete odrediti dostupnost usluga. Prema zadanim postavkama uslugu čini dostupnom na korijenskoj razini.
Još jedna ljepota koja se dodaje je paket "kutni element". Ovaj paket omogućuje programerima upotrebu vaše kutne komponente u drugom okruženju (ne-kutno okruženje) kao što je Vue.js. To je još jedna zanimljiva značajka zbog koje koristite svoju kutnu komponentu u drugom okruženju
Ovo je sve o značajkama kutnog 6 koje sam naučio. Sada ću razmotriti značajku posljednje verzije, a to je - Angular 7
Kutni 7. - listopad 2018
U listopadu 2018. na tržište je stigla još jedna verzija s više ljepote.
Značajke koje su dodane bile su CLI upute, virtualno pomicanje, povlačenje i ispuštanje i ponovno povezivanje veličine. U CLI upitima, angular-cli vas pita o opcijama poput kada izrađujete novi program pomoću novog imena aplikacije. CLI vas pita želite li dodati datoteku usmjeravanja ili ne i tako dalje. Tu je i svojstvo proračuna dodano u angular.json u kojem možete odrediti svoju maksimalnu i minimalnu vrijednost veličine proračuna.
Ovdje se radi o značajci kutnog 7. Znam da nisam naveo sve ostale značajke kutnog 7, jer nisam ulazio u te značajke. Dakle, nije mi ugodno govoriti o njima. Također znamo da je izdana verzija Angular 8, ali iz istog razloga što ne ulazimo u značajke kutnog 8, nisam o tome napisao.
Napomena mojim čitateljima: Možda sam ostavio mnoge značajke, ali trudio sam se ukratko pisati o značajkama različitih verzija (nije moguće nabrojiti sve značajke, ali pokušao sam sve značajke koje sam pročitao na svom putovanju), ali volio bih da moji čitatelji komentiraju one značajke koje su pronašli na svom putu učenja.
Hvala na čitanju.