Kiedy pracujemy z AngularJS i zaczynamy czytać dokumentację, pierwsze co widzimy to słowo ZakresMożna to przetłumaczyć na język hiszpański jako zakres, jednak zastosowanie w tych ramach jest znacznie szersze.
Dlatego musimy zrozumieć, że to naprawdę Zakres i jak zachowuje się w naszych aplikacjach, w ten sposób możemy zrobić skok między próbami użycia AngularJS i używaj go z zasadą, przekonaniem, a nie tylko przez powtarzanie kodu.
Najciekawsze jest to, że jak AngularJS jest całkowicie wbudowany JavaScript, możemy wziąć koncepcje języka i zastosować je w nauce i zrozumieniu narzędzi frameworka, co daje nam dodatkowy poziom umiejętności, aby móc rozwijać logikę, którą myślimy dla naszych aplikacji
Wymagania
1- Aby wykonać ten samouczek, potrzebujemy serwera WWW, takiego jak Wamp, lub jeśli jesteśmy w środowiskach takich jak Linux konfiguracja Lampa Nam wystarczy, chodzi o to, aby móc obsłużyć nasze pliki, które zawierają AngularJS a nie tylko otwierać dokument HTML.
2- Musimy również mieć bogaty edytor tekstu, który pozwoli nam napisać niezbędny kod dla naszych przykładów, może to być Wzniosły tekst lub Notatnik ++.
3- Wreszcie, musimy mieć dostęp do Internetu, aby korzystać z włączenia AngularJS przez jego CDN lub pobrać plik zawierający framework do obsługi go lokalnie.
Jaki jest zakres?
To nic innego jak prosty przedmiot JavaScript który ma możliwość przechowywania struktury klucza wartości, oprócz możliwości przechowywania właściwości. To nam bardzo pomaga, ponieważ jeśli spojrzymy na to z tego punktu widzenia, możemy zastosować podstawowe pojęcia języka programowania
Jak to działa?AngularJS odpowiada za automatyczne tworzenie tego obiektu i osadzenie go w naszej aplikacji, stąd jego nazwa to scope, ponieważ pozwala nam manipulować i uzyskiwać dostęp do wartości modeli, a także służy jako interfejs do komunikacji z widokiem. Ta struktura pozwala nam korzystać z Zakres wewnątrz naszych kontrolerów i dodajemy właściwości, które możemy wywołać bezpośrednio w widoku, a tym samym realizujemy cykl, w którym wszystko jest połączone i powiązane w naszej aplikacji.
Na poniższym obrazku widzimy, jaka jest skala lub w jaki sposób AngularJS generuje różne Zakresy, chociaż wszystkie wywodzą się z Zakres elementu, który je zawiera, z wyjątkiem Zakres główny który zostanie wygenerowany jako pierwszy. Oczywiście, jeśli istnieją dwa elementy na tym samym poziomie w zakresie głównym, oba po nim odziedziczą.
POWIĘKSZAĆ
Jak działa prototyp?
W przeciwieństwie do języków takich jak Jawa, C++ i inni, JavaScript inaczej radzi sobie z pojęciem dziedziczenia, dlatego musimy dowiedzieć się, do czego służy prototyp co jest niczym innym jak metodą istniejącą w konstruktorach klas, która pozwala nam dodawać nowe właściwości w naszym kodzie.
To pomimo tego, że jest to coś typowego JavaScript pozwala nam nieco lepiej zrozumieć, w jaki sposób możemy uzyskać pewne wyniki, a także pomaga nam zrozumieć, w jaki sposób Zakres w AngularJS.
W poniższym przykładzie zobaczymy, jak tworzymy klasę z określonymi właściwościami lub atrybutami, a następnie poprzez prototyp Możemy dodać dodatkową właściwość do naszej klasy, dzięki czemu możemy uzyskać do niej dostęp.
Ciekawostką jest to, że istnieje metoda, która pomaga nam zweryfikować, czy jakiś atrybut jest typowy dla klasy, jeśli ta metoda zwróci fałszywą wartość to będziemy wiedzieć, że jest to atrybut wynikający z dziedziczenia z prototyp. Zobaczmy kod, który reprezentuje to wszystko:
DokumentZobaczmy teraz jak na konsoli JavaScript otrzymujemy wyniki, których szukamy:
Zauważamy wtedy, jak metoda hasOWnProperty Pomaga nam zidentyfikować oryginalne atrybuty lub właściwości klasy, czy nie. W ten sposób możemy zrozumieć, czy stworzyliśmy efektywne dziedziczenie, czy nie, ponieważ możemy zdać sobie sprawę, w jaki sposób rozszerzamy pojemność atrybutów klasy.
WażnyTen rodzaj dziedziczenia poprzez prototyp to jest to, co dotyczy AngularJS podczas tworzenia innego Zakresy dokumentu w aplikacji, gdzie porusza się po drzewie SŁOŃCE gdzie po raz pierwszy identyfikuje, czy nieruchomość istnieje ng-aplikacja, w tym momencie uwierz $ rootScope, a następnie znalezienie kontrolera tworzy zmienną $ zakres która wynika z zastosowania metody $ rootScope.new ().
Eskaluje więc, odnajdując elementy wewnętrzne jeden w drugim, dziedzicząc po strukturze bezpośrednio poprzedniej, przejmując swoje funkcjonalności wywodzące się z $ rootScope i jego własne funkcjonalności.
W poniższym przykładzie opracowaliśmy aplikację w której mamy dwa kontrolery, w ten sposób widzimy jak poprzez dziedziczenie zakres różne właściwości lub atrybuty tego samego są dziedziczone, aż do powstania zagnieżdżonej struktury, która może uzyskać dostęp do właściwości rodziców i rozszerzyć funkcje aplikacji jako takiej. Zobaczmy kod:
{{editors}} ma książki z: {{category}}
Najpopularniejsze książki {{editors}} to:
- {{książka}}
Można to uznać za nieco naciągane, ale jest to najlepszy sposób na zrozumienie, jak zmienna $ zakres działa w naszych aplikacjach, dzięki czemu możemy zastosować to w naszej logice, aby jak najlepiej wykorzystać narzędzia frameworka. Zobaczmy na poniższym obrazku, jak wyglądała nasza poprzednia aplikacja i jak zostały spełnione wyjaśnione punkty:
Zauważamy wtedy, jak lista książek należy do obiektu Zakres bardziej wewnętrznego, jednak ponieważ nie definiujemy atrybutu redakcyjnego, możemy użyć tego, który definiujemy w kontrolerze nadrzędnym, dochodząc do wniosku, że przewidzieliśmy użycie prototyp za pomocą AngulaJS.
Obserwator jako zaawansowana koncepcja
Są chwile, kiedy chcemy kontynuować i w jakiś sposób monitorować konkretną sytuację, w tym momencie pojawia się przedmiot. $ oglądać, co pozwala nam robić dokładnie to, co wyjaśniamy.
Jak to działa?Dodając go jako słuchacz jakiegoś elementu w naszej aplikacji, ten obiekt zarejestruje się za każdym razem, gdy nastąpi w nim zmiana. W ten sposób możemy zastosować warunki za każdym razem, gdy wystąpi określone przez nas zdarzenie. Przykładem może być, gdy budujemy koszyk, jeśli użytkownik doda więcej niż jeden przedmiot, możemy wyświetlić komunikat lub jeśli próbuje kupić kilka razy, pytamy go, czy ma problem.
Na pierwszy rzut oka może się to wydawać bardzo zaawansowane, ale AngularJS bierze go blisko naszych rąk, nie czyniąc przy tym większych komplikacji. Obiekt $ oglądać Nie tylko może zaobserwować konkretną wartość, ale także przypisać ją do tego z kolekcją, co daje nam możliwość jednoczesnego uwzględniania wielu wartości, a tym samym uzyskania bardziej złożonych wyników niż przy poprzedniej formie .
Na tym zakończyliśmy ten samouczek, nauczyliśmy się rozumieć, co Zakres w AngularJS i w tym celu oparliśmy się na najbardziej abstrakcyjnych koncepcjach JavaScript, pokazując w ten sposób, że ten język daje nam wszystkie narzędzia do wykonywania zadań tak zaawansowanych, jak te same ramy, o których mówimy, ale jeśli opanujemy jego koncepcje, możemy sprawić, że narzędzia, których użyjemy, będą lepsze.
Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
