Mikä on $scope AngularJS:ssä? Opastus esimerkin kera

Mikä on $scope AngularJS:ssä?

$scope AngularJS:ssä on sisäänrakennettu objekti, joka periaatteessa sitoo "ohjaimen" ja "näkymän". Ohjaimessa voidaan määrittää laajuuteen jäsenmuuttujia, joihin näkymä pääsee käsiksi.

Jokainen ohjain angularjs sovellus saa oman $scope-instanssinsa riippuvuusinjektion kautta. Kaikki, mitä liität kyseiseen objektiin, tulee näkyviin ohjaimen hallitsemalle mallille, joten $scope toimii jaettuna tietomallina, joka sijaitsee sinun ja JavaSkriptilogiikka ja HTML-merkintäsi.

Harkitse esimerkkiä alla:

angular.module('app',[]).controller('HelloWorldCtrl',
	function($scope)
	{
		$scope.message = "Hello World"
	});

Code Selitys:

1. Moduulin nimi on "sovellus"
2. Ohjaimen nimi on ”HelloWorldCtrl”
3. Scope-objekti on pääobjekti, jota käytetään tiedon siirtämiseen ohjaimesta näkymään.
4. Jäsenmuuttuja lisätty laajuusobjektiin

Yksi ohjain ja yksi näkymä ovat vasta puolet kokonaisuudesta. Todelliset sovellukset sisäkkäistävät ohjaimia, toistavat listoja ja käyttävät widgettejä uudelleen, mikä tarkoittaa, että useita osoitteita on olemassa samanaikaisesti.

Miten laajuushierarkia ja periytyminen toimivat AngularJS:ssä

Jokaisella AngularJS-sovelluksella on täsmälleen yksi juurilaajuus ja sillä voi olla mikä tahansa määrä alilaajuuksia. Direktiivit luovat nämä alilaajuudet ja liittävät ne DOM-elementtiin, jota ne koristavat, joten laajuuspuu peilaa renderöidyn sivun rakennetta.

Kun AngularJS laskee lausekkeen, kuten {{siteName}}, se etsii ensin kyseistä ominaisuutta elementtiin liitetystä laajuusalueesta. Jos ominaisuus puuttuu, haku siirtyy päälaajuusalueeseen ja jatkaa nousua ylöspäin, kunnes se saavuttaa juurilaajuusalueen. JavaSkriptikehittäjät tuntevat tämän käyttäytymisen prototyyppisenä periytymisenä, ja lapsi-ilmiöt perivät vanhemmiltaan juuri tällä tavalla.

Alla olevassa esimerkissä yksi ohjain on sisäkkäin toisen kanssa, jotta voit seurata periytymistä.

<div ng-app="scopeDemo">
    <div ng-controller="ParentCtrl">
        Parent scope value: {{siteName}}
        <div ng-controller="ChildCtrl">
            Child reads parent value: {{siteName}}
            Child own value: {{lesson}}
        </div>
    </div>
</div>

<script type="text/javascript">
    var app = angular.module("scopeDemo", []);

    app.controller("ParentCtrl", function($scope) {
        $scope.siteName = "Guru99";
    });

    app.controller("ChildCtrl", function($scope) {
        $scope.lesson = "AngularJS Scope";
    });
</script>

Code Selitys:

1. ParentCtrl määritellään siteName omalla laajuudellaan.
2. ChildCtrl ei koskaan määrittele siteName, mutta sisempi div-elementti tulostaa silti Guru99 koska haku siirtyy pääalueen laajuuteen.
3. lesson sijaitsee vain lapsi-näkymässä, joten pää-div-elementti ei voi lukea sitä.

Mitkä direktiivit luovat uuden soveltamisalan?

• ng-ohjain: luo alitason elementille, johon se sijoitetaan.
• ng-toisto: luo yhden lapsilaajuusalueen iteraatiota kohden, minkä vuoksi jokainen rivi voi sisältää eri arvoja samalle lausekkeelle.
• Mukautetut direktiivit: voi pyytää alilaajuutta tai eristää laajuus, joka tarkoituksella ei peri vanhemmalta.
• Komponenttidirektiivit: mitään rekisteröityä .component() helper saa aina isolaatti-arvon.

Koska alitason laajuusobjektit lukevat ylöspäin, kehittäjät usein miettivät, missä ketjun pää sijaitsee. Tätä ylimmän tason objektia kutsutaan nimellä $rootScope.

$scope vs. $rootScope: Mitä eroa niillä on?

AngularJS $rootScope on koko sovelluksen vaikutusalue. Sovelluksella voi olla vain yksi $rootScope, ja sitä käytetään globaalina muuttujana. Jokainen $scope on alitason vaikutusalue ja $rootScope on puun yläosassa oleva ylätaso. Alla olevassa taulukossa vertaillaan näitä kahta objektia.

Käytä $rootScope-muuttujaa säästeliäästi. Kaikki sinne sijoitettu sisältö on voimassa koko sovellukselle ja luettavissa kaikkialla, joten jaettu palvelu on yleensä turvallisempi koti globaalille tilalle. Virallinen $rootScope-viittaus listaa koko API:n.

Puolet työstä on tietää, missä data sijaitsee. Toinen puoli on opettaa laajuusryhmälle, miten reagoida käyttäjän toimiin.

Käyttäytymisen määrittäminen tai lisääminen AngularJS:ssä

Voidaksemme reagoida tapahtumiin tai suorittaa jonkinlaisen laskennan/käsittelyn Näkymässä, meidän on annettava toiminta-alueelle käyttäytyminen.

Toimintatavat lisätään laajuusobjekteihin vastaamaan tiettyihin tapahtumiin, jotka näkymä voi laukaista. Kun toiminta on määritetty ohjaimessa, sitä voidaan käyttää näkymässä.

Katsotaanpa esimerkkiä siitä, kuinka voimme saavuttaa tämän.

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta chrset="UTF 8">
    <title>Guru99</title>     
</head>  
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-controller="DemoController">
	{{fullName("Guru","99")}}
</div>
<script type="text/javascript">  
	var app = angular.module("DemoApp", []);
	app.controller("DemoController", function($scope) {
    
    $scope.fullName=function(firstName,lastname){
		return firstName + lastname;
		}
	} );
</script> 

</body>  
</html>

Code Selitys:

1. Luomme käyttäytymistä nimeltä "fullName". Tämä käyttäytyminen on funktio, joka hyväksyy 2 parametria (etunimi, sukunimi).
2. Toiminta palauttaa sitten näiden kahden parametrin ketjutuksen.
3. Näkymässä kutsumme käyttäytymistä ja välitämme kaksi arvoa funktiolle "Guru” ja ”99”, jotka annetaan parametreina käyttäytymiselle.

Jos komento suoritetaan onnistuneesti, seuraava tulos näytetään, kun suoritat koodin selaimessa.

lähtö:

Selaimessa näet yhdistelmän molemmista arvoista Guru & 99, jotka välitettiin käyttäytymiselle ohjain.

Yllä olevan kaltaiset sidokset päivittyvät itsestään, ja mekanismit, jotka tekevät tämän, on syytä ymmärtää ennen kuin sovelluksesta kasvaa suuri.

Miksi Scope Watchersilla ja Digest Cyclella on merkitystä

AngularJS pitää näkymän laajuusalueen tahdissa likaisten tarkistusten avulla muutostapahtumien sijaan. Kolme laajuusalueen API:a ohjaavat tätä prosessia:

• $watch: rekisteröi kuuntelijan lausekkeelle. Interpoloinnit, kuten {{fullName}} rekisteröi tarkkailijoita puolestasi mallipohjan linkityksen aikana.
• $hae: siirtyy AngularJS-suorituskontekstiin, arvioi koodisi ja laukaisee sitten tiivistelmän. Sitä tarvitaan vain mukautettujen tapahtumien takaisinkutsuissa tai kolmannen osapuolen kirjastojen takaisinkutsuissa, koska sisäänrakennetut direktiivit kutsuvat sitä jo.
• $tiivistelmä: käy läpi jokaisen $rootScope-mallin ja sen lasten tarkkailijan vertaamalla nykyistä arvoa edelliseen ja toistamalla, kunnes mallin muutokset loppuvat.

Koska tiivistelmä voi suorittaa useita kierroksia, tarkkailulausekkeiden on pysyttävä edullisina. Vältä DOM-käyttöä niiden sisällä, koska DOM:n lukeminen on suuruusluokkaa hitaampaa kuin JavaSkriptin ominaisuus.

Myös tarkkailukertojen määrä vaikuttaa kustannuksiin. Vertailujen avulla tarkkailu on nopein tapa, ja se huomaa vasta, kun koko arvo on korvattu. $watchCollection huomaa taulukon tai objektin sisällä lisätyt, poistetut tai uudelleenjärjestetyt kohteet. Arvon perusteella tarkkailu käy läpi sisäkkäisen rakenteen jokaisella tiivisteellä ja on kallein vaihtoehto, joten tartu siihen viimeisenä.

UKK