Pregled AngularJS
V podjetju Brat Tech LLC leta 2009 sta razvijalca Misko Hevery in Adam Abrons razvila okvir AngularJS, po katerem je prišlo do revolucije pri razvoju in gradnji aplikacij za eno stran. AngularJS je okvir javascripta, ki povezuje elemente Html s predmeti JavaScripta. Zavezujoče podatke in vbrizgavanje odvisnosti so nekatere od glavnih značilnosti programa AngularJs, ki prihranijo čas pri pisanju dolgih kod, kar olajša delo in razvojnike. Kako je to doseženo, bomo podrobneje pojasnili, a za zdaj se le spomnite teh izrazov. V tej temi bomo spoznali različico AngularJS.
Različice AngularJS
AngularJS je različica Angular 1.x, nato pa se razvije Angular 2, ki se razlikuje od Angular 1.x. deluje.
Zakaj različica AngularJS in kako deluje?
AngularJS nam pomaga razviti interaktivne aplikacije za eno stran. Pod enostranskimi aplikacijami mislim, da bo posamezna stran, ki ste jo obiskali, naložila vso drugo vsebino z uporabo javascript. Ta funkcija pomaga, da je aplikacija hitra in učinkovita.
Ko za izdelavo aplikacij uporabljamo javascript in html, boste morali z uporabo funkcij in predmetov JS vezati pogled na model. Če menite, da te dvosmerne povezave podatkov v praktični industrijski uporabi enak pristop postane dolgotrajen z dolgotrajnimi kodami. To je eden glavnih razlogov, zakaj se je bilo treba učiti in razvijati AngularJS.
Čas je, da se naučite nekaj osnovnih konceptov, preden začnete razvijati aplikacije, na katerih temelji AngularJS:
- Model: Model vsebuje podatke, predmete in logiko.
- Pogled: To je vizualna predstavitev aplikacije, ki jo imenujemo tudi uporabniški vmesnik.
- Ogled na model dvosmerne vezave: Objekt javascript, tj. Objekt, ki ga želite povezati s Html DOM, na primer besedilno polje, vnos ali katere koli oznake Html, in obratno, je mogoče enostavno narediti z uporabo nekaterih vnaprej določenih knjižnic AngularJS.
- Krmilniki: Krmilniki so funkcije javascripta, ki povezujejo model in pogled.
- Storitve: AngularJS storitve so funkcije javascripta, ki opravljajo določeno nalogo ali funkcionalnost, ki jo vzdržuje in preizkuša JavaScript. Nekateri primeri storitev so $ obseg, $ http, $ rootScope.
- Izrazi: Izrazi se uporabljajo za povezovanje podatkov s Html. Ta lastnost je znana tudi kot interpolacija. Izrazi se napišejo z ((izraz)) kodrastimi naramnicami. Izrazi se ocenijo in jih je mogoče napisati brez html oznak.
- Moduli: Moduli delujejo kot vsebnik, ki vsebuje različne dele kotne aplikacije, kot so krmilnik, storitve, direktive itd.
Direktive in področje uporabe
Osredotočimo se na nekatere vnaprej določene direktive in na to, kako dejansko delujejo. Večina te direktive se začne z 'ng', prevzetim iz Angularja
1. Obseg
- Obseg določa objekt javascript, s katerim so lahko podatki dostopni od Model do HTML. Področje uporabe deluje kot povezovalec med obema.
- Nekatere storitve obsegajo obseg $ obseg, $ rootScope. '$' določa, da so te storitve vnaprej definirane in jih ni mogoče spremeniti. Ne pozabite, da HTML ne razlikuje velikih in malih črk, vendar je AngularJS občutljiv na velike in male črke, zato bo $ Scope napako vrgel kot nedefinirano.
- To morate izjaviti v naši funkciji krmilnika in kotno jo vstavite samodejno.
2. ng-regulator
- Ta direktiva se uporablja za ustvarjanje primerka / predmeta regulatorja, prek katerega bo HTML DOM komuniciral z dejansko logiko.
- HTML pravi, da bo vsaka oznaka z znakom '-' prezrta med ustvarjanjem Html DOM-a.
- Ko je DOM ustvarjen, bo kotni tolmač našel direktivo ng-regulator in ustvaril primerek določenega krmilnika, ki ponuja tudi storitev z obsegom $.
- Na eni strani HTML lahko obstaja veliko ng-krmilnikov.
3. ng-app
- Ta direktiva deluje kot vsebnik, ki vsebuje krmilnike, direktive, filtre, izraze itd. Registrira ali zažene aplikacijo ali modul.
- V vašem html-ju obstaja samo ena ng-aplikacija. Pod eno ng-aplikacijo je lahko veliko ng-regulatorjev.
To pokaže predmet aplikacije s storitvijo $ rootScope.
- Tako so spremenljivke / funkcije $ rootScope dostopne v celotni aplikaciji.
4. ng-model
- ng-model se uporablja za vezavo podatkov iz html-ja na objektni model. Omogoča dvosmerno vezavo.
5. ng-če
- Za izvajanje pogojnih stavkov na oznakah Html se uporablja ng-if. Če je pogoj napačen, DOM ne vključuje tega diva na DOM.
6. ng-vezati
- Namesto (()) za interpolacijo lahko uporabimo tudi ng-bind.
7. ng-invalid
- Na podlagi pogoja je lahko element v pogledu onemogočen.
8. ng-show
- Če je dani pogoj za ng-show resničen, je določen element prikazan na DOM.
9. ng-skriti
- Če je podan pogoj za skrivanje ng, je določen element v DOM-u ostal skrit.
10. ng-ponovite
- Ponovil bo določen div ali razpon na Html s priloženo dolžino matrike ali seznama.
11. ng-klik
- Ko klikne dogodek na elementu html, bo izvedel zagotovljeno funkcionalnost ali nalogo.
Nasvet: Najboljši način učenja katerega koli jezika je kodiranje. Pa poglejmo našo prvo kodo.
Primeri različice AngularJS
Tu je nekaj primerov, podanih spodaj
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
Izhod:
Ime: Jožef
Priimek: Alex
Ime ti je: Joseph Alex
Zgornji delček kodiranja se je treba osredotočiti na nekaj točk:
- V 3. vrstici se na stran doda datoteka angular.min.js, ki bo naložila vse potrebne knjižnice za zagon aplikacije AngularJS.
- AngularJS ima v glavnem dve knjižnici angular.js in stisnjeno različico te datoteke kot angular.min.js.
- V 5. vrstici lahko direktivo vidite kot ng-aplikacijo, ki jo Html ne upošteva med ustvarjanjem Html DOM in jo AngularJS prevzame kot eno od svojih direktiv za zagon aplikacije.
- V vrstici 6, 7 je uporabljen model ng, ki bo besedilo, ki ga vnesete v besedilno polje, vezalo na spremenljivki fname in lname. Ne pozabite, da so te spremenljivke velike in male črke.
- V 8. vrstici vidite izraz ((fname + ”“ + lname)), ki bo ocenil in prikazal podatke, ki jih vnesete v besedilna polja. To je znano kot interpolacija.
Raziskujmo še z enim primerom:
var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));
Ime:
Priimek:
Ime stranke je ((customerName)), starost pa je ((customerAge))
V tem primeru se v 5. vrstici ustvari aplikacija z imenom CustomerApp, ki bo vključevala vse dele aplikacije. V naslednji naslednji vrstici se ustvari krmilnik in mu je dodano ime firstController. $ obseg je deklariran kot funkcijski parameter. AngularJS ga bo samodejno vstavil v aplikacijo za neposredno uporabo, razvijalcu ni treba izrecno ustvarjati.
Ta funkcija je znana kot injekcija odvisnosti. Na podoben način se ng-regulator uporablja za isti regulator pod oznako ng-app. Ne pozabite na obseg aplikacije ali krmilnika, kje se konča div ali karkoli, v kar določite aplikacijo ali krmilnik. V tem primeru ne morete dostopati do regulatorja ali aplikacije po 16. vrstici.
Priporočeni članki
To je priročnik Kaj je AngularJS Version. Tukaj razpravljamo o različicah AngularJS z direktivami, področjem uporabe in kako deluje AngularJS. Za več informacij si lahko ogledate tudi naslednje članke -
- AngularJS Arhitektura
- Kotna aplikacija JS
- Preverjanje kotne JS enote
- Poklic v AngularJS
- Kaj je kotni 2?