Pochopení rozsahu v AngularJS

Když pracujeme s AngularJS a začneme číst dokumentaci, první věc, kterou vidíme, je slovo RozsahTo by se dalo přeložit do španělštiny jako rozsah, nicméně využití v tomto rámci je mnohem širší.

Proto musíme pochopit, že to opravdu je Rozsah a jak se chová v našich aplikacích, tímto způsobem můžeme udělat skok mezi pokusem o použití AngularJS a používejte jej se základnou, přesvědčením a ne jen opakováním kódu.

Nejzajímavější je, že jako AngularJS je zcela vestavěný JavaScript„můžeme pojmy jazyka převzít a aplikovat je při studiu a porozumění rámcovým nástrojům, čímž získáme další úroveň dovedností, abychom byli schopni rozvíjet logiku, kterou si myslíme pro naše aplikace

Požadavky


1- Ke splnění tohoto tutoriálu potřebujeme webový server jako Wamp, nebo pokud jsme v prostředí jako Linux konfigurace Svítilna Bude nám to stačit, myšlenkou je být schopen sloužit našim souborům, které obsahují AngularJS a ne jen otevřít dokument HTML.

2- Musíme mít také formátovaný textový editor, který nám umožňuje napsat potřebný kód pro naše příklady, to může být Vznešený text nebo Poznámkový blok ++.

3- Nakonec musíme mít přístup k internetu, abychom mohli použít začlenění AngularJS prostřednictvím jeho CDN nebo jsme si stáhli soubor, který obsahuje rámec, abychom jej mohli lokálně obsluhovat.

Jaký je rozsah?


Není to nic jiného než jednoduchý předmět JavaScript který má schopnost ukládat strukturu klíčových hodnot, kromě toho, že dokáže ukládat vlastnosti. To nám hodně pomáhá, protože pokud to vidíme z tohoto úhlu pohledu, můžeme použít základní pojmy programovacího jazyka

Jak to funguje?AngularJS je zodpovědný za automatické vytváření tohoto objektu a vkládání do provádění naší aplikace, proto jeho název je rozsah, protože nám umožňuje manipulovat a přistupovat k hodnotám modelů a také slouží jako rozhraní pro komunikaci s pohledem. Tato struktura nám umožňuje používat Rozsah uvnitř našich řadičů a přidávat vlastnosti, které můžeme volat přímo v pohledu, a tím plníme cyklus, kde je vše propojeno a souvisí v rámci naší aplikace.

Na následujícím obrázku vidíme, jaké je měřítko nebo jakým způsobem AngularJS generuje různé Obory, ačkoli všechny pocházejí z Rozsah prvku, který je obsahuje, kromě Kořenový rozsah který je vygenerován jako první. Samozřejmě, pokud existují dva prvky na stejné úrovni v rámci kořenového rozsahu, oba z něj zdědí.

ZVĚTŠIT

Jak prototyp funguje?


Na rozdíl od jazyků jako Jáva, C ++ a další, JavaScript pojímá koncept dědičnosti odlišně, proto se musíme naučit, k čemu slouží prototyp což není nic jiného než metoda, která existuje v rámci konstruktorů tříd, která nám umožňuje přidávat nové vlastnosti do našeho kódu.

A to navzdory skutečnosti, že je to něco typického JavaScript nám umožňuje trochu více porozumět tomu, jak můžeme dosáhnout některých výsledků, a navíc nám pomáhá porozumět tomu, jak Rozsah v rámci AngularJS.

V následujícím příkladu uvidíme, jak vytvoříme třídu s konkrétními vlastnostmi nebo atributy, poté prostřednictvím prototyp Do naší třídy můžeme přidat další vlastnost a tím, že k ní vytvoříme instanci, k níž budeme mít přístup.

Zajímavostí je, že existuje metoda, která nám pomáhá ověřit, zda je pro třídu typický jakýkoli atribut, pokud tato metoda vrátí falešnou hodnotu, pak budeme vědět, že jde o atribut vyplývající z dědičnosti s prototyp. Podívejme se na kód, který toto vše představuje:

 Dokument 
Nyní se podívejme, jak na konzole JavaScript získáme výsledky, které hledáme:

Poté si všimneme, jak metoda hasOWnProperty Pomáhá nám identifikovat původní atributy nebo vlastnosti třídy nebo ne. Můžeme tedy pochopit, zda jsme vytvořili efektivní dědičnost, nebo ne, protože si můžeme uvědomit, jak rozšiřujeme kapacitu atributů třídy.

DůležitéTento typ dědičnosti prostřednictvím prototyp to platí AngularJS při vytváření různých Obory dokumentu v aplikaci, kde se pohybuje stromem SLUNCE kde nejprve identifikuje, zda vlastnost existuje aplikace ng, v tu chvíli věř $ rootScope, potom nalezení ovladače vytvoří proměnnou $ rozsah které pochází z aplikace metody $ rootScope.new ().
A tak se stupňuje, když nachází vnitřní prvky jeden v druhém, dědí z bezprostředně předchozí struktury, přičemž jeho funkce jsou odvozeny od $ rootScope a jeho vlastní funkce.

V následujícím příkladu jsme vyvinuli aplikaci, ve které máme dva řadiče, takže vidíme, jak dědičnost rozsah různé vlastnosti nebo atributy stejné jsou děděny, dokud výsledkem není vnořená struktura, která má přístup k vlastnostem rodičů a rozšiřuje funkce aplikace jako takové. Podívejme se na kód:

 {{editors}} má knihy od: {{category}}

Nejoblíbenější knihy od {{editors}} jsou:

  • {{rezervovat}}
Zde nám příklad ukazuje, co jsme vysvětlili výše, když jsme v rozsahu Druhý ovladač Voláme vlastnost editors a když ji vytiskneme, vidíme, že nese přiřazenou hodnotu nadřazeného prvku První ovladač. Nakonec přidáme atribut nebo knihy vlastností, které nebyly v souboru Rozsah root a byli jsme schopni iterovat skrz $ rozsah dotyčného ovladače. Dalším zajímavým aspektem je, že vlastnosti Rozsah root, přestože existují, nevyvolali jsme je v rozsahu, ve kterém k nim máme přístup, takže když uvidíme příklad, neuvidíme je na obrazovce prohlížeče

To lze považovat za trochu přitažené za vlasy, ale je to nejlepší způsob, jak pochopit, jak proměnná $ rozsah funguje v rámci našich aplikací, a proto je možné to aplikovat v rámci naší logiky, abychom z rámcových nástrojů vytěžili maximum. Podívejme se na následujícím obrázku, jak vypadá naše předchozí aplikace a jak byly splněny vysvětlené body:

Potom si všimneme, jak seznam knih patří k objektu Rozsah internější, ale jelikož nedefinujeme redakční atribut, můžeme použít ten, který definujeme v rodičovském řadiči, přičemž dospějeme k závěru, že jsme předpokládali použití prototyp podle AngulaJS.

Watcher jako pokročilý koncept


Jsou chvíle, kdy chceme pokračovat a určitým způsobem monitorovat konkrétní situaci, právě zde objekt přichází. $ hodinky, což nám umožňuje dělat přesně to, co vysvětlujeme.

Jak to funguje?Přidáním jako posluchač nějakého prvku v naší aplikaci, tento objekt se zaregistruje pokaždé, když v něm dojde ke změně. Tímto způsobem můžeme použít podmínky pokaždé, když dojde k události, kterou určíme. Příkladem může být stavění nákupního košíku, pokud uživatel přidá více než jednu položku, můžeme zobrazit zprávu, nebo pokud se pokusí nakoupit několikrát, zeptáme se ho, zda má problém.

Na první pohled se to může zdát jako něco velmi pokročilého, ale AngularJS bere to blízko našich rukou, aniž by to dělalo velké komplikace. Objekt $ hodinky Nejenže může sledovat konkrétní hodnotu, ale můžeme ji k tomu také přiřadit pomocí kolekce, což nám dává možnost vzít v úvahu více hodnot současně a dosáhnout tak komplexnějších výsledků než u předchozí formy .

Tím jsme tímto tutoriálem skončili, naučili jsme se porozumět tomu, co Rozsah v rámci AngularJS a proto jsme se spoléhali na nejabstraktnější pojmy JavaScript, což ukazuje, že tento jazyk nám poskytuje všechny nástroje k dosažení tak pokročilých pracovních míst, jako je stejný rámec, o kterém mluvíme, ale že pokud zvládneme jeho koncepty, můžeme nástroje, které používáme, udělat něčím vynikajícím.

Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod

Vám pomůže rozvoji místa, sdílet stránku s přáteli

wave wave wave wave wave