AngularJS - Witaj świecie

Spisie treści

Witaj klasyczny świecie


Generalnie, kiedy uczymy się używać nowego języka, pierwszą rzeczą, którą robimy, jest stworzenie małego programu, który drukuje dla nas język klasyczny. "Witaj świecie"Chociaż może to nie być przydatne w aplikacji, ma kilka implikacji. Uczy nas uruchamiania języka i daje możliwość sprawdzenia, czy wszystko działa poprawnie.
W tej sekcji zobaczymy, jak wykonać a Witaj świecie, dodatkowo przeglądanie i przeglądanie powiązanych koncepcji, które pozwalają nam budować aplikacje w AngularJS.
w AngularJS Szablon znajduje się po stronie klienta, dlatego dane trafiają do naszej aplikacji i to właśnie w tym obszarze są organizowane i przygotowywane do konsumpcji przez użytkownika; podczas stosowania tej koncepcji do aplikacji jednostronicowej i używania AJAX będziemy w stanie osiągnąć dynamikę bez konieczności ponownego ładowania przez użytkownika sieci, w której przegląda.
Aby wykonać prosty Witaj świecie A znając powyższe, zobaczmy, czego potrzebujemy, aby zrealizować nasz cel:
  • Potrzebujemy HTML baza, w której dołączamy dwa pliki. Pierwszym będzie AngularJS a drugi to niestandardowy skrypt, do którego trafi nasza logika przetwarzania.
  • Wewnątrz HTML musisz zdefiniować blok, w którym AngularJS będzie miał wpływ, czyli gdzie umieścimy etykietę ng-aplikacja.
  • W naszym niestandardowym skrypcie musimy stworzyć kontroler AngularJS przekazać tekst do naszej aplikacji.
Gdy już wiemy, czego potrzebujemy, musimy zbudować odpowiedni kod, zobaczmy na poniższym obrazku, jak to zrobiliśmy:

POWIĘKSZAĆ

Widzimy, że uwzględniliśmy AngularJS od Google CDN w ten sposób nie musimy w tej chwili pobierać plików do naszego projektu, wtedy zamiast włączać niestandardowy skrypt to co zrobiliśmy to napisać potrzebne nam instrukcje, robimy to jako demonstrację, zawsze dobrze jest oddzielić kod, aby był łatwiejszy w obsłudze.
Już etykieta HTML ma nieruchomość ng-aplikacja co oznacza że AngularJS ma cały dokument jako swój zakres i tworzymy div, w którym umieszczamy kontroler ng który jest kontrolerem AngularJS.
WażnyWszystko, co zrobi nasz kontroler, to wydrukuje słowo! cześć obok słowa Świat które pisaliśmy już wcześniej, podkreślamy jak AngularJS nie potrzebuje niczego więcej poza tym, że definiujemy zmienna kontekstowa i automatycznie tworzy odpowiednie linki do nas.
Zobaczmy teraz, jak to wszystko wygląda w przeglądarce, otworzyliśmy Konsola Firebug aby pokazać, co się stało, gdy uruchamialiśmy naszą aplikację:

POWIĘKSZAĆ

Możemy wtedy zauważyć, jak AngularJS w momencie ładowania dokumentu umieściłeś słowo cześć w naszym div iw ten sposób aplikacja będzie działać.
Jak widzimy stworzyliśmy nasze Witaj świecie i trochę lepiej zrozumieliśmy, jak to działa AngularJS A co mamy na myśli mówiąc o szablonie znajdującym się w kliencie, wyobraźmy sobie, że słowo to dane pochodzące z usługi internetowej, tutaj widzimy, jak nabiera nowego wymiaru, ponieważ moglibyśmy generować większą dynamikę w naszych aplikacjach.
PoprzedniStrona 1 z 2NastępnyPodobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
wave wave wave wave wave