Meni

Direktiva AngularJS z našim prvim primerom AngularJS

  • Glavni
  • Drugo
  • Direktiva AngularJS z našim prvim primerom AngularJS

angularjs directive with our first angularjs example

Preizkusite Naš Instrument Za Odpravo Težav

Direktiva AngularJS s prvim primerom AngularJS:

Imeli smo kratek uvod v AngularJS v naši prejšnji vadnici. Ta vadnica vam bo razložila pomembna dejstva, ki jih morate vedeti o AngularJS.

Kotni JS je odprtokodni okvir spletne aplikacije, ki temelji na JavaScript-u.

Vzdržuje jo Google Corporation in velika skupnost. AngularJS je odgovor na različne pomanjkljivosti, ki se pojavijo pri oblikovanju enostranskih aplikacij.

Preberite našo Celotna serija AngularJS za poglobljeno znanje o konceptu AngularJS.

Direktiva in primer AngularJS

Okvir aplikacij AngularJS deluje kot predloga in lahko zmanjša izzive, s katerimi se soočajo pri razvoju spletnih aplikacij.

Kaj se boste naučili:

Pregled AngularJS

Google je AngularJS izdal 20thOktobra 2010, danes pa je postal pomemben okvir za različne enostranske vmesniške aplikacije.

To je razlog, zaradi katerega se je AngularJS obdržala kljub tehnološkemu razvoju z vratolomno hitrostjo. Sistem, ki temelji na vmesniku z več platformami, je tudi bolj učinkovit.

kako odpreti jar datoteke z java windows 10

AngularJS dopolnjuje in koristi Apache Cordova, ki je ogrodje, ki se uporablja za mobilne platforme na več platformah. Ima vizijo izboljšanja izkušenj in poenostavitve testiranja in razvoja spletnih aplikacij ter zagotavlja trden okvir za njihov razvoj aplikacij AngularJS.

Zakaj uporabljati AngularJS?

Spodaj so navedene različne funkcije in razlogi, zaradi katerih bi bilo treba AngularJS uporabljati pri razvoju spletnih aplikacij.

  1. Vezava podatkov: Platforma omogoča samodejno sinhronizacijo podatkov med modelom in ogledom vsebine, kar posledično v veliki meri prihrani vaš čas in trud.
  2. Krmilnik: To so JavaScript, ki je vezan na določen obseg.
  3. Storitve: AngularJS ima veliko vgrajenih storitev. Npr $ https
  4. Filtri: To pomaga pri izbiri podskupine elementov iz polja in ga vrne v novo polje.
  5. Direktive: So označevalci elementov DOM, kot so atributi, elementi CSS itd. Lahko se uporabljajo kot oznake HTML po meri.
  6. Usmerjanje: Pomaga pri ustvarjanju aplikacij na eni strani. Določen je v URL-ju za znakom # in vam omogoča, da v svoji aplikaciji ustvarite različne URL-je za različne vsebine.
  7. MVC: Stojala za model, pogled in krmilnik. Je oblikovalski vzorec in se uporablja za razdelitev aplikacije na različne dele, tj. Model, pogled in krmilnik.
  8. Globoko povezovanje: Ta funkcija okvira aplikacije vam pomaga kodirati stanje aplikacije v URL za zaznamke. Kasneje lahko aplikacijo v istem stanju obnovite tudi iz URL-ja.
  9. Vbrizgavanje odvisnosti: AngularJS ima tudi vgrajen podsistem za vbrizgavanje odvisnosti, ki je lahko v pomoč razvijalcu, da olajša postopek razvoja in testiranja, poveže in enostaven.
  10. Obseg: To so predmeti, ki delujejo kot lepilo med krmilnikom in pogledom.

Kako uporabljati AngularJS?

Osebno verjamem, da danes skoraj ni boljšega okvira za razvoj spletnih aplikacij, ki bi bil na voljo kot AngularJS.

Vadnice o tem, kako uporabljati AngularJS, niso frustrirajoče zapletene in tudi meni se je zdelo zelo enostavno slediti. Izkoristite lahko dvosmerni sistem vezave, predloge, modularizacijo, sistem vbrizgavanja odvisnosti, funkcijo AJAX Handling in druge funkcije tega okvira.

Pred začetkom kodiranja morate vedeti o konceptu MVC (Model, Pogled in Krmilnik), skriptu 'Hello World' in različnih funkcijah AngularJS.

Direktive AngularJS

AngularJS vam ponuja veliko število direktiv ki vam omogočajo, da različne elemente HTML povežete s podatki aplikacije. So osnovni atributi, ki se začnejo s ključno besedo ng- .

Najpomembnejša direktiva, ki jo morate vključiti na katero koli stran med uporabo programa AngularJS, je navedena spodaj.

ng-app -

Je izhodišče aplikacije AngularJS in jo je treba dodati vsakemu elementu, ki zajema preostali del strani, kot je element telesa. AngularJS išče ta vidik, kadar se stran naloži in ponavadi samodejno oceni vse različne direktive v kodi.

Direktive AngularJS vključujejo:

# 1) ng-app :To se uporablja za zagon aplikacije AngularJS. Ko se naloži spletna stran, ki vsebuje aplikacijo AngularJS, jo samodejno zažene z določitvijo korenskega elementa. V vaši kodi HTML je treba uporabiti samo eno direktivo ng-app.

Če pa je v kodi HTML več direktiv ng-app, bo uporabljen prvi videz.

Sintaksa:

{body of the HTML code}

# 2) toplote :S tem se inicializira aplikacija.

Zagotavlja nabor vrednosti, ki jih je treba zaradi inicializacije povezati s spremenljivkami. Ta direktiva se ne uporablja pogosto, saj se inicializacija spremenljivk običajno zgodi s posebnimi funkcijami v projektu.

Sintaksa:

# 3) ng-krmilnik: Uporablja se, kadar je treba inicializacijo spremenljivk izvesti na podlagi funkcije; tj. vsako spremenljivko je treba inicializirati na podlagi logike funkcije. AngularJS s predmetom prikliče funkcijo, določeno v direktivi ng-controller.

Sintaksa:

app.controller(‘name of your function’,function($object){ Body of the controller/function});

# 4) ng-model :S tem se vrednosti AngularJS vežejo na kontrolnike, ki jih ponuja aplikacija. Natančneje, podatki, ki jih vhod pridobi prek krmilnika in modela, bodo vezani na pogled (w.r.t. model MVC), ki bo predstavljen uporabniku.

posredovanje nizov metodam v javi

Sintaksa:

Your Variable to be binded : var app = angular.module('myApp', ('ngAnimate'));

ng-show in ng-hide: Ti ukazi skrivajo in prikazujejo elemente, kar dosežemo z nastavitvijo sloga prikaza CSS.

najboljša brezplačna programska oprema za pospešitev pc

AngularJS vam omogoča tudi določanje direktiv po meri. Uporabljajo se za razširitev funkcionalnosti HTML-ja in so opredeljeni s funkcijo 'direktiva'. Preprosto zamenjajo element, za katerega so aktivirani.

AngularJS Cheat Sheet mi je rešil življenje. Obstajajo številne druge smernice, ki jih lahko preverite na Cheat Sheet. Z uporabo AngularJS se lahko celo naučite, kako zgraditi direktive po meri. Na Cheat Sheetu sem našel vsa navodila in smernice platforme AngularJS za poenostavitev številnih težav.

Primer AngularJS

Preprost primer AngularJS lahko zapišemo na naslednji način:

Ustvariti morate datoteko HTML, Na primer , angularjsexample.html kot je prikazano spodaj.

Welcome {{helloTo.title}} to the world of Tutorialspoint!

angular.module('myapp', ()) .controller('HelloController', function($scope) { $scope.helloTo = {}; $scope.helloTo.title = 'AngularJS'; });

V zgornjem primeru je skript predstavljen JavaScript AngularJS.

Presenečeni bi bili, ko bi vedeli, koliko aplikacij, ki jih dnevno uporabljate, je bilo razvitih na platformi AngularJS.

Tu je nekaj imen:

  • Skrbnik
  • PayPal
  • jetBlue
  • Lego
  • Upwork
  • Netflix
  • Samostojni sodelavec
  • iStock

Iz zgornjih imen je razvidno, kakšno višino lahko dosežete, če se naučite uporabljati ta okvir. Ta spletna mesta so na vrhu svoje igre in velik del njihovega uspeha zagotovo gre za njihovo učinkovitost samo zato, ker so bila razvita na AngularJS.

Zaključek

Če želite zgraditi in razviti enostranske aplikacije za mobilne naprave ali celo spletna mesta, na primer, kot sem bil nekoč, potem ne iščite več.

AngularJS je za vas vse na enem mestu, saj to spletno mesto pomaga in naredi razvoj aplikacij veliko bolj udoben in skladen. Ni odličen samo za začetnike, ampak ko se poglobite vanj, se boste navadno učili z izkušnjami in razvijali odlične aplikacije.

Medtem, če nadgradite na novejše različice, vam ni treba vložiti veliko truda. Z učenjem nekaj novih ukazov in razumevanjem novih sprememb lahko začnete razvijati aplikacije tudi v novih različicah.

Oglejte si našo prihajajočo vadnico, če želite izvedeti več o razvoju spletnih aplikacij na eni strani z uporabo AngularJS.

PREV Vadnica | NASLEDNJA Vadnica

Priporočeno branje

^