Разбиране на обхвата в AngularJS

Когато работим с AngularJS и започваме да четем документацията, първото нещо, което виждаме, е думата ОбхватТова може да бъде преведено на испански като обхват, но използването в тази рамка е много по -широко.

Ето защо трябва да разберем, че това наистина е Обхват и как се държи в нашите приложения, по този начин можем да направим скок между опитите за използване AngularJS и го използвайте с основа, убеждение, а не само чрез повтаряне на кода.

Най -интересното е, че като AngularJS е напълно вграден JavaScript, можем да вземем концепциите за езика и да ги приложим при изучаването и разбирането на рамковите инструменти, като по този начин ни даваме допълнително ниво на умения, за да можем да развием логиката, която мислим за нашите приложения

Изисквания

1- За да изпълним този урок, се нуждаем от уеб сървър като Wamp, или ако сме в среда като Linux конфигурация Лампа Това ще бъде достатъчно за нас, идеята е да можем да обслужваме нашите файлове, които включват AngularJS а не просто да отваряте документ HTML.

2- Трябва да имаме и богат текстов редактор, който ни позволява да напишем необходимия код за нашите примери, това може да бъде Възвишен текст или Notepad ++.

3- И накрая, трябва да имаме достъп до Интернет, за да използваме включването на AngularJS чрез неговия CDN или да сме изтеглили файла, който съдържа рамката, за да го обслужваме локално.

Какво представлява обхватът?

Това не е нищо повече от обикновен обект JavaScript който има способността да съхранява структура на ключови стойности, в допълнение към възможността да съхранява свойства. Това ни помага много, тъй като ако го видим от тази гледна точка, можем да приложим основните понятия на езика за програмиране

Как работи?AngularJS е отговорен за автоматичното създаване на този обект и вграждането му в изпълнението на нашето приложение, следователно името му е обхват, тъй като ни позволява да манипулираме и да имаме достъп до стойностите на моделите, а също така да служи като интерфейс за комуникация с изгледа. Тази структура ни позволява да използваме Обхват вътре в нашите контролери и добавяме свойства, които можем да извикаме директно в изгледа и по този начин изпълняваме цикъл, в който всичко е свързано и свързано в нашето приложение.

На следващото изображение виждаме каква е скалата или начинът, по който AngularJS генерира различно Обхвати, въпреки че всички произтичат от Обхват на елемента, който ги съдържа, с изключение на Основен обхват който е генериран първи. Разбира се, ако има два елемента на едно и също ниво в рамките на основния обхват, и двамата ще наследят от него.

Увеличете

Как работи прототипът?

За разлика от езици като Java, C ++ и други, JavaScript третира концепцията за наследство по различен начин, затова трябва да научим каква е ползата от нея прототип което не е нищо повече от метод, който съществува в конструкторите на класове, който ни позволява да добавяме нови свойства в нашия код.

Това въпреки факта, че е нещо типично за JavaScript ни позволява да разберем малко повече как можем да получим някои резултати, освен че ни помага да разберем как Обхват в рамките на AngularJS.

В следващия пример ще видим как създаваме клас с определени свойства или атрибути, след това чрез прототип Можем да добавим допълнително свойство към нашия клас и по този начин като направим екземпляра да имаме достъп до него.

Интересното е, че има метод, който ни помага да проверим дали някакъв атрибут е типичен за класа, ако този метод връща невярна стойност, тогава ще знаем, че това е атрибут, произтичащ от наследяване с прототип. Нека да видим кода, който представлява всичко това:

 Документ 

Сега да видим как на конзолата JavaScript получаваме резултатите, които търсим:

След това забелязваме как методът hasOWnProperty Помага ни да идентифицираме оригиналните атрибути или свойства на класа или не. По този начин можем да разберем дали сме създали ефективно наследяване или не, тъй като можем да осъзнаем как разширяваме капацитета на атрибутите на клас.

ВажноТози тип наследяване чрез прототип е това, което се прилага AngularJS при създаването на различните Обхвати на документ в приложение, където той се движи през дървото СЛЪНЦЕ където първо идентифицира дали собствеността съществува ng-приложение, в този момент повярвайте $ rootScope, след това намирането на контролер създава променлива $ обхват което произтича от прилагането на метода $ rootScope.new ().
И така тя ескалира, докато намира вътрешни елементи един в друг, наследявайки се от непосредствената предишна структура, вземайки нейните функционалности, получени от $ rootScope и собствените му функции.

В следния пример сме разработили приложение, в което имаме два контролера, по този начин виждаме как чрез наследяването на обхват различните свойства или атрибути на същите се наследяват, докато не се получи вложена структура, която има достъп до свойствата на родителите и разширява функционалностите на приложението като такова. Нека да видим кода:

 {{редакторите}} има книги от: {{категория}}
Най -популярните книги от {{editors}} са:

 {{Книга}}

Тук примерът ни показва какво обяснихме по -горе, когато е в обхвата на Втори контролер Ние наричаме редакторите свойство и когато го отпечатаме, виждаме, че то носи зададената стойност на родителския елемент Първи контролер. Накрая добавяме атрибут или книги със свойства, които не са били в Обхват root и успяхме да повторим през $ обхват на въпросния контролер. Друг интересен аспект е, че свойствата на Обхват root, въпреки че съществуват, не сме ги извикали в обхват, в който можем да имаме достъп до тях, така че когато видим примера, няма да ги видим на екрана на браузъра

Това може да се разглежда като малко пресилено, но това е най-добрият начин да разберете как променливата $ обхват работи в рамките на нашите приложения и по този начин може да приложи това в рамките на нашата логика, за да извлечете максимума от инструментите на рамката. Нека видим на следващото изображение как изглежда предишното ни приложение и как са изпълнени обяснените точки:

След това забелязваме как списъкът с книги принадлежи на обекта Обхват по -вътрешен, но тъй като не дефинираме редакционния атрибут, можем да използваме този, който дефинираме в родителския контролер, достигайки до заключението, че очакваме използването на прототип от AngulaJS.

Наблюдателят като усъвършенствана концепция

Има моменти, когато искаме да продължим и по някакъв начин да наблюдаваме конкретна ситуация, тук обектът влиза. $ часовник, което ни позволява да правим точно това, което обясняваме.

Как работи?Като го добавите като слушател на някой елемент в нашето приложение, този обект ще се регистрира всеки път, когато има промяна в него. По този начин можем да прилагаме условия всеки път, когато се случи събитие, което определим. Пример може да бъде, когато изграждаме количка за пазаруване, ако потребителят добави повече от един артикул, можем да покажем съобщение, или ако се опитва да купи няколко пъти, го питаме дали има проблем.

Това на пръв поглед може да изглежда като нещо много напреднало, но AngularJS го взема близо до нашите ръце, без да прави много усложнения. Предметът $ часовник Той не само може да наблюдава определена стойност, но също така можем да му възложим да направи това с колекция, което ни дава възможност да вземем предвид няколко стойности едновременно и по този начин да постигнем по -сложни резултати, отколкото с предишната форма .

С това приключихме с този урок, научихме се да разбираме какво Обхват в рамките на AngularJS и за това ние разчитахме на най -абстрактните понятия за JavaScript, демонстрирайки по този начин, че този език ни дава всички инструменти за постигане на работни места толкова напреднали като същата рамка, за която говорим, но че ако овладеем нейните концепции, можем да направим инструментите, които използваме, нещо превъзходно.

Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка