Mikä on AngularJS? - Opi AngularJS: n versiot direktiiveillä

• Katsaus AngularJS: ään

Katsaus AngularJS: ään

Brat Tech LLC: ssä vuonna 2009 kehittäjät Misko Hevery ja Adam Abrons kehittivät AngularJS-kehyksen, jonka jälkeen etupään kehitystyössä ja yhden sivun sovellusten rakentamisessa tapahtui vallankumous. AngularJS on javascript-kehys, joka sitoo HTML-elementtejä javascript-objekteilla. Tiedon sitominen ja riippuvuusinjektio ovat joitain AngularJ: ien johtavista ominaisuuksista, jotka säästävät aikaa kirjoittamalla pitkiä koodeja, mikä helpottaa kehittäjien ja selainten työskentelyä. Kuinka tämä saavutetaan, selitetään tarkemmin tarkemmin, mutta muistat nyt vain nämä terminologiat. Tässä aiheessa aiomme oppia AngularJS-versiosta.

AngularJS -ohjelman versiot

AngularJS on kulma 1.x -versiot ja sen jälkeen kehitetään kulma 2, joka eroaa kulmasta 1.x. toimii.

Miksi AngularJS-versio ja miten se toimii?

AngularJS auttaa meitä kehittämään interaktiivisia yhden sivun sovelluksia. Yhden sivun sovelluksilla tarkoitan, että vierailemasi yksi sivu lataa kaiken muun sisällön javascriptin avulla. Tämän ominaisuuden avulla sovellus on nopea ja tehokas.

Kun käytämme javascriptiä ja html: ää sovellusten rakentamiseen, sinun on sitouduttava näkymä malliin käyttämällä JS-toimintoja ja -objekteja. Mutta jos luulet näiden kaksisuuntaisen datan sitovan käytännössä teollisessa sovelluksessa, sama lähestymistapa tulee tylsiä pitkillä koodeilla. Se on yksi tärkeimmistä syistä, miksi oli tarpeen oppia ja kehittää AngularJS: ää.

Aika oppia joitain peruskonsepteja, ennen kuin aloitat kehittää sovelluksia, joihin AngularJS perustuu:

• Malli: Malli sisältää tietoja, objekteja ja logiikkaa.
• Näkymä: Se on sovelluksen visuaalinen esitys, jota kutsutaan myös käyttöliittymäksi.
• Näkymä malliin kaksisuuntainen sitominen: Javascript-objekti, ts. Objekti, jonka haluat sitoa Html-DOM: iin esimerkiksi tekstikenttään, syöttöön tai mihin tahansa HTML-tunnisteisiin ja päinvastoin, voidaan tehdä helposti käyttämällä joitain ennalta määritettyjä AngularJS-kirjastoja.
• Ohjaimet: Ohjaimet ovat javascript-toimintoja, jotka yhdistävät mallin ja näkymän.
• Palvelut: AngularJS-palvelut ovat javascript-toimintoja, jotka suorittavat tietyn tehtävän tai toiminnallisuuden, jota javascript ylläpitää ja testaa. Jotkut esimerkit palveluista ovat $ ulatus, $ http, $ rootScope.
• Lausekkeet: Lausekkeita käytetään datan sitomiseen html: llä. Tämä ominaisuus tunnetaan myös nimellä interpolointi. Lausekkeet on kirjoitettu ((expression)) kihara-aukkoilla. Lausekkeet arvioidaan ja ne voidaan kirjoittaa ilman html-tunnisteita.
• Moduulit: Moduulit toimivat säiliönä, joka sisältää kulmasovelluksen eri osia, kuten ohjaimen, palvelut, direktiivit jne.

Direktiivit ja soveltamisala

Keskitytään joihinkin ennalta määriteltyihin direktiiveihin ja niiden todelliseen toimintaan. Suurin osa tästä direktiivistä alkaa merkinnästä ng, joka on otettu kulmasta

1. Soveltamisala

• Laajuus määrittelee javascript-objektin, jonka kanssa tietoja voi käyttää mallista HTML: ään. Soveltamisala toimii liittimenä näiden kahden välillä.
• Jotkut laajuuspalvelut ovat $ ulatus, $ rootScope. '$' määrittelee, että nämä palvelut on ennalta määritetty eikä niitä voida muokata. Muista, että HTML on kirjainkoko ei-herkkä, mutta AngularJS on kirjainkoko, joten $ Scope heittää virheen määrittelemättömäksi.
• Nämä on ilmoitettava nämä ohjaintoiminnossamme, ja kulmainen ruiskuttaa sen automaattisesti.

2. ng-ohjain

• Tätä direktiiviä käytetään ohjaimen ilmentymän / objektin luomiseen, jonka kautta HTML DOM kommunikoi todellisen logiikan kanssa.
• HTML sanoo, että kaikki merkinnät, joissa on "-", jätetään huomioimatta, kun luodaan HTML-verkkotunnusta.
• Kun DOM on luotu, kulmatulkki löytää ng-ohjaindirektiivin ja luo tietyn ohjaimen esiintymän, joka tarjoaa myös $ laajuisen palvelun.
• Yhdellä HTML-sivulla voi olla monia ng-ohjaimia.

3. sovellus

• Tämä direktiivi toimii säiliönä, joka sisältää ohjaimia, direktiivejä, suodattimia, lausekkeita jne. Se rekisteröi tai käynnistää sovelluksen tai moduulin.
• Html-tiedostossasi on vain yksi ng-sovellus. Yhdessä ng-sovelluksessa voi olla monia ng-ohjaimia.

Tämä pikaistaa sovellusobjektin $ rootScope -palvelun avulla.

• $ RootScope -muuttujat / -toiminnot ovat siis käytettävissä koko sovelluksessa.

4. ng-malli

• ng-mallia käytetään tietojen sitomiseen html: stä malliobjektiin. Se tarjoaa kaksisuuntaisen sidonnan.

5. ng-if

• Ehdollisten lausekkeiden suorittamiseksi HTML-tunnisteissa käytetään ng-if: tä. Jos ehto menee pieleen, DOM ei sisälly tätä div-osaa DOM: iin.

6. ng-sitoa

• Interpolointiin (()) sijasta voidaan käyttää myös ng-bindia.

7. Ei käytössä

• Elin perusteella näkymän elementti voidaan poistaa käytöstä.

8. ng-show

• Jos annettu ng-show-ehto on totta, kyseinen elementti näytetään DOM: lla.

9. piilota

• Jos annettu ng-hide-ehto on totta, kyseinen elementti pysyy piilossa DOMissa.

10. ng-toista

• Se toistaa tietyn div- tai span HTML-muodossa taulukon tai luettelon pituudella.

11. ng-napsauta

• Napsautustapahtumassa html-elementissä se suorittaa toimitetun toiminnon tai tehtävän.

Vinkki: Paras tapa oppia mikä tahansa kieli on koodata se. Joten katsotaanpa ensimmäistä koodiamme.

Esimerkkejä AngularJS-versiosta

Tässä on joitain alla annettuja esimerkkejä




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))



lähtö:

Etunimi: Joseph
Sukunimi: Alex
Nimesi on: Joseph Alex

Koodikatkelman yläpuolella on joitain huomion keskittymiskohtia:

• Rivillä 3 sivulle lisätään angular.min.js-tiedosto, joka lataa kaikki tarvittavat kirjastot AngularJS-sovelluksen ajamiseksi.
• AngularJS majorly -sovelluksessa on 2 kirjastoa angular.js ja tämän tiedoston pakattu versio nimellä angular.min.js.
• Rivillä 5 voit nähdä direktiivin ng-sovelluksena, jota HTML ei huomioi luotaessa HTML-verkkotunnusta ja AngularJS on ottanut sen yhdeksi direktiiviksi sovelluksen käynnistämiseksi.
• Rivillä 6, 7 käytetään ng-mallia, joka sitoo tekstikenttään kirjoittamasi muuttujat fname ja lname. Muista, että nämä muuttujat ovat kirjainkoossa.
• Rivillä 8 näet lausekkeen ((fname + ”“ + lname)), joka kulma arvioi ja näyttää tekstikenttään antamasi tiedot. Tätä kutsutaan interpoloimiseksi.

Olkaamme tutkia yhdellä esimerkillä:



var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));



Etunimi:

Sukunimi:

Asiakkaan nimi on ((customerName)) ja ikä on ((customerAge))

Tässä esimerkissä riville 5 luodaan sovellus nimellä ClientApp, joka sisältää sovelluksen kaikki osat. Aivan seuraavalla rivillä luodaan ohjain, jolla annetaan nimi ensimmäisenä ohjaimena. $ laajuus ilmoitetaan funktion parametrina. AngularJS injektoi sen automaattisesti sovellukseen suoraa käyttöä varten, kehittäjän ei tarvitse luoda sitä nimenomaisesti.

Tämä ominaisuus tunnetaan riippuvuusinjektiona. Samalla tavalla ng-ohjainta käytetään samaan ohjaimeen ng-app-tunnisteen alla. Muista, että sovelluksen tai ohjaimen soveltamisala on missä div-osat päättyvät tai mitä tahansa, johon määrität sovelluksen tai ohjaimen. Tässä tapauksessa et voi käyttää ohjainta tai sovellusta rivin 16 jälkeen.

Suositellut artikkelit

Tämä on opas Mikä on AngularJS-versio. Tässä keskustellaan AngularJS: n versioista direktiiveillä, soveltamisalalla ja miten AngularJS toimii. Saatat myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -

1. AngularJS -arkkitehtuuri
2. Kulmainen JS-sovellus
3. AngularJS-yksikön testaus
4. Ura AngularJS: ssä
5. Mikä on kulma 2?