Mis on $scope AngularJS-is? Õpetus näitega

Mis on AngularJS-is $ ulatus?

$ ulatus AngularJS-is on sisseehitatud objekt, mis põhimõtteliselt seob "kontrolleri" ja "vaate". Kontrolleri ulatuses saab defineerida liikmemuutujaid, millele seejärel pääseb vaade juurde.

Iga kontroller AngularJS rakendus saab oma $scope eksemplari sõltuvuse süstimise kaudu. Kõik, mida te sellele objektile lisate, muutub nähtavaks mallile, mida kontroller haldab, seega käitub $scope jagatud andmemudelina, mis asub teie vahel. JavaSkriptiloogika ja teie HTML-märgistus.

Kaaluge allolevat näidet:

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

Code Selgitus:

1. Mooduli nimi on "rakendus"
2. Kontrolleri nimi on „HelloWorldCtrl”
3. Ulatusobjekt on peamine objekt, mida kasutatakse teabe edastamiseks kontrollerist vaatesse.
4. Liigese muutuja lisati ulatuse objektile

Üks kontroller ja üks vaade on vaid pool pildist. Päris rakendused pesastavad kontrollereid, kordavad loendeid ja taaskasutavad vidinaid, mis tähendab, et korraga eksisteerib mitu ulatust.

Kuidas ulatushierarhia ja pärimine AngularJS-is toimivad

Igal AngularJS-i rakendusel on täpselt üks juurulatus ja suvaline arv alamulatumisi. Direktiivid loovad need alamulatused ja lisavad need DOM-elemendile, mida nad kaunistavad, nii et ulatuspuu peegeldab renderdatud lehe struktuuri.

Kui AngularJS hindab avaldist, näiteks {{siteName}}, otsib see esmalt seda omadust elemendiga seotud ulatusest. Kui omadus puudub, liigub otsing ülemulatuse juurde ja jätkab tõusmist, kuni jõuab juurulatuseni. JavaSkriptiarendajad tunnevad seda käitumist prototüüpse pärimisena ja laste ulatused pärivad oma vanematelt täpselt sel viisil.

Allolev näide pesistab ühe kontrolleri teise sisse, et saaksite jälgida pärimise toimumist.

<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 Selgitus:

1. ParentCtrl määratleb siteName omal ulatusel.
2. ChildCtrl ei defineeri kunagi siteName, aga sisemine div prindib ikkagi Guru99 sest otsing liigub üles vanema ulatuseni.
3. lesson elab ainult lapse ulatuse sees, seega vanem-div ei saa seda lugeda.

Millised direktiivid loovad uue ulatuse?

• ng-kontroller: loob elemendile, millele see paigutatakse, lapse ulatuse.
• ng-kordus: loob iteratsiooni kohta ühe lapseulatuse, mistõttu iga rida saab sama avaldise jaoks sisaldada erinevaid väärtusi.
• Kohandatud direktiivid: võib taotleda alamulatust või isoleerida ulatus, mis teadlikult ei päri oma ülemüksuselt.
• Komponentide direktiivid: kõik, mis on registreeritud .component() abistaja saab alati isolaadi ulatuse.

Kuna alamobjektid loevad ülespoole, mõtlevad arendajad sageli, kus asub selle ahela ülemine osa. Seda ülemise taseme objekti nimetatakse $rootScope'iks.

$scope vs $rootScope: Mis vahe neil on?

AngularJS $rootScope on kogu rakenduse ulatus. Rakendusel saab olla ainult üks $rootScope ja seda kasutatakse globaalse muutujana. Iga $scope on tütarulatus ja $rootScope on puu ülaosas asuv vanem. Allolev tabel võrdleb kahte objekti.

Kasutage $rootScope'i säästlikult. Kõik sinna paigutatud andmed kehtivad kogu rakenduse jaoks ja on loetavad kõikjal, seega on jagatud teenus tavaliselt globaalse oleku jaoks turvalisem kodu. Ametlik $rootScope'i viide loetleb kogu API.

Üks pool tööst on teadmine, kus andmed asuvad. Teine pool on õpetada valdkonna spetsialistidele, kuidas reageerida, kui kasutaja midagi teeb.

Käitumise seadistamine või lisamine AngularJS-is

Sündmustele reageerimiseks või vaates mingisuguse arvutuse/töötluse teostamiseks peame andma ulatusele käitumise.

Käitumised lisatakse ulatuseobjektidele, et reageerida konkreetsetele sündmustele, mille vaade võib käivitada. Kui käitumine on kontrolleris määratletud, pääseb sellele vaade juurde.

Vaatame näidet selle kohta, kuidas seda saavutada.

<!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 Selgitus:

1. Loome käitumise nimega "fullName". See käitumine on funktsioon, mis aktsepteerib 2 parameetrit (eesnimi, perekonnanimi).
2. Seejärel tagastab käitumine nende kahe parameetri konkatenatsiooni.
3. Vaates kutsume käitumist ja edastame kaks väärtust „Guru” ja „99”, mis antakse käitumisele parameetritena edasi.

Kui käsk on edukalt täidetud, kuvatakse brauseris koodi käivitamisel järgmine väljund.

Väljund:

Brauseris näete mõlema väärtuse liitmist Guru & 99, mis edastati käitumisele kontroller.

Sellised seosed nagu ülaltoodud värskendatakse iseenesest ja enne rakenduse suureks kasvamist tasub aru saada, millised mehhanismid seda teevad.

Miks on Scope Watchersil ja seedimistsüklil tähtsust?

AngularJS hoiab vaate ulatusega kooskõlas musta kontrollimise, mitte muutussündmuste kaudu. Seda protsessi juhivad kolm ulatuse API-t:

• $vaatlus: registreerib avaldise kuulaja. Interpolatsioonid, näiteks {{fullName}} registreerige malli linkimise ajal teile jälgijad.
• $kandideeri: siseneb AngularJS-i täitmiskonteksti, hindab teie koodi ja seejärel käivitab lühendi. Seda on vaja ainult kohandatud sündmuste tagasihelistustes või kolmanda osapoole teekide tagasihelistustes, kuna sisseehitatud direktiivid kutsuvad seda juba välja.
• $digest: käib läbi iga $rootScope'i ja selle laste vaatleja, võrreldes praegust väärtust eelmisega ja korrates seda seni, kuni mudeli muutumine lakkab.

Kuna дайджест võib läbida mitu käiku, peavad jälgimisavaldised jääma odavaks. Vältige DOM-i ligipääsu nende sees, kuna DOM-i lugemine on suurusjärkude võrra aeglasem kui JavaSkripti omadus.

Jälgimise sügavus mõjutab ka kulusid. Viite järgi jälgimine on kiireim viis ja märkab alles siis, kui kogu väärtus on asendatud. $watchCollection märkab massiivi või objekti sees lisatud, eemaldatud või ümberjärjestatud üksusi. Väärtuse järgi jälgimine läbib pesastatud struktuuri igal kokkuvõttel ja on kõige kallim variant, seega haarake selle järele viimasena.

KKK