Menu

Dyrektywa AngularJS z naszym pierwszym przykładem AngularJS

  • Główny
  • Inny
  • Dyrektywa AngularJS z naszym pierwszym przykładem AngularJS

angularjs directive with our first angularjs example

Dyrektywa AngularJS z pierwszym przykładem AngularJS:

Mieliśmy krótkie wprowadzenie do AngularJS w naszym poprzednim samouczku. Ten samouczek wyjaśni Ci ważne fakty, które musisz wiedzieć o AngularJS.

AngularJS to framework aplikacji internetowych typu open source oparty na JavaScript.

Jest utrzymywany przez Google Corporation i dużą społeczność. AngularJS jest odpowiedzią na różne wady napotykane przy formułowaniu jednostronicowych aplikacji.

Przeczytaj nasze Cała seria AngularJS za dogłębną wiedzę na temat koncepcji AngularJS.

Dyrektywa AngularJS i przykład

Framework aplikacji AngularJS działa jak szablon i może zmniejszyć wyzwania, przed którymi staje tworzenie aplikacji internetowych.

najlepsze oprogramowanie do klonowania dysków SSD w systemie Windows 10

Czego się nauczysz:

Przegląd AngularJS

AngularJS został wydany przez Google 20thPaździernik 2010, a dziś stał się znaczącym frameworkiem dla różnych aplikacji interfejsu jednostronicowego.

To jest powód, dla którego AngularJS utrzymuje swoją pozycję pomimo rozwoju technologicznego w zawrotnym tempie. System oparty na interfejsie międzyplatformowym zwiększa również wydajność.

AngularJS uzupełnia i zapewnia korzyści Apache Cordova, czyli platformie używanej w wieloplatformowych aplikacjach mobilnych. Ma wizję ulepszenia doświadczenia i uproszczenia testowania i tworzenia aplikacji internetowych oraz zapewnia solidną strukturę do tworzenia aplikacji AngularJS.

Dlaczego warto korzystać z AngularJS?

Poniżej wymieniono różne funkcje i powody, dla których AngularJS powinien być używany przy tworzeniu aplikacji internetowych.

  1. Wiązanie danych: Platforma zapewnia automatyczną synchronizację danych między modelem a przeglądaniem treści, dzięki czemu w znacznym stopniu oszczędza Twój czas i wysiłek.
  2. Kontroler: Są to JavaScript, który jest powiązany z określonym zakresem.
  3. Usługi: AngularJS ma wiele wbudowanych usług. Na przykład $ https
  4. Filtry: Pomaga to w wyborze podzbioru elementów z tablicy i zwraca go do nowej tablicy.
  5. Dyrektywy: Są to znaczniki na elementach DOM, takich jak atrybuty, elementy CSS itp. Mogą być używane jako niestandardowe tagi HTML.
  6. Wytyczanie: Pomaga w tworzeniu aplikacji jednostronicowych. Jest określony w adresie URL po znaku # i umożliwia tworzenie różnych adresów URL dla różnych treści w aplikacji.
  7. MVC: Oznacza model, widok i kontroler. Jest to wzorzec projektowy i służy do podziału aplikacji na różne części, tj. Model, Widok i Kontroler.
  8. Głębokie linki: Ta funkcja struktury aplikacji pomaga zakodować stan aplikacji w adresie URL w celu dodania do zakładek. Później aplikację można również przywrócić z adresu URL w tym samym stanie.
  9. Wstrzyknięcie zależności: AngularJS ma również wbudowany podsystem wstrzykiwania zależności, który może być pomocny dla programisty, aby proces tworzenia i testowania był łatwiejszy, spójny i nieskomplikowany.
  10. Zakres: Są to obiekty, które działają jak klej pomiędzy kontrolerem a widokiem.

Jak korzystać z AngularJS?

Osobiście uważam, że nie ma obecnie na rynku lepszego frameworka do tworzenia aplikacji internetowych typu front-end niż AngularJS.

Samouczki dotyczące korzystania z AngularJS nie są frustrująco skomplikowane i rzeczywiście wydały mi się łatwe do naśladowania. Możesz skorzystać z dwukierunkowego systemu wiążącego, możliwości tworzenia szablonów, modularyzacji, systemu wstrzykiwania zależności, funkcji obsługi AJAX i innych funkcji tego frameworka.

Przed rozpoczęciem kodowania powinieneś wiedzieć o koncepcji MVC (Model, Widok i Kontroler), skrypcie „Hello World” i różnych funkcjach AngularJS.

Dyrektywy AngularJS

AngularJS zapewnia dużą liczbę plików dyrektyw które umożliwiają powiązanie różnych elementów HTML z danymi aplikacji. Są to podstawowe atrybuty rozpoczynające się od słowa kluczowego ng- .

Najważniejsza dyrektywa, którą musisz umieścić na każdej stronie podczas korzystania z AngularJS, jest podana poniżej.

ng-app -

Jest to punkt wyjścia aplikacji AngularJS i musi zostać dodany do każdego elementu, który otacza pozostałą część strony, np. Element części ciała. AngularJS szuka tego aspektu za każdym razem, gdy strona ładuje się i ma tendencję do automatycznego oceniania wszystkich różnych dyrektyw w kodzie.

Dyrektywy AngularJS obejmują:

jak otworzyć wykonywalny plik jar

# 1) ng-app :Służy do uruchamiania aplikacji AngularJS. Kiedy strona internetowa zawierająca aplikację AngularJS jest ładowana, automatycznie ładuje aplikację poprzez zdefiniowanie elementu głównego. W kodzie HTML powinna być używana tylko jedna dyrektywa ng-app.

Jeśli jednak w kodzie HTML znajduje się więcej niż jedna dyrektywa ng-app, zostanie użyty pierwszy wygląd.

Składnia:

{body of the HTML code}

# 2) ciepła :Służy do inicjalizacji aplikacji.

Udostępnia zestaw wartości, które muszą być skojarzone ze zmiennymi w celu inicjalizacji. Ta dyrektywa nie jest często używana, ponieważ inicjalizacja zmiennych zwykle odbywa się za pośrednictwem określonych funkcji w projekcie.

Składnia:

# 3) ng-kontroler: Jest używany, gdy inicjalizacja zmiennych musi być wykonana w oparciu o funkcję; tj. każda ze zmiennych musi zostać zainicjowana na podstawie logiki funkcji. AngularJS wywołuje funkcję określoną w dyrektywie ng-controller z obiektem.

Składnia:

app.controller(‘name of your function’,function($object){ Body of the controller/function});

# 4) model ng :Służy do powiązania wartości AngularJS z kontrolkami dostarczonymi przez aplikację. Mówiąc konkretnie, dane pobrane przez dane wejściowe przez kontroler i model zostaną powiązane z widokiem (w.r.t. modelem MVC), który zostanie zaprezentowany użytkownikowi.

Składnia:

Your Variable to be binded : var app = angular.module('myApp', ['ngAnimate']);

ng-show i ng-hide: Te polecenia ukrywają i pokazują elementy, co jest osiągane poprzez ustawienie stylu wyświetlania CSS.

AngularJS umożliwia także definiowanie dyrektyw niestandardowych. Służą do rozszerzenia funkcjonalności HTML i są definiowane za pomocą funkcji „dyrektywy”. Po prostu zastępują element, dla którego są aktywowane.

Ściągawka z AngularJS uratowała mi życie. Istnieje wiele innych wskazówek, które możesz sprawdzić w ściągawce. Możesz nawet dowiedzieć się, jak tworzyć własne dyrektywy za pomocą AngularJS. Znalazłem wszystkie instrukcje i dyrektywy platformy AngularJS w ściągawce, aby uprościć wiele problemów.

Przykład AngularJS

Prosty przykład AngularJS można zapisać w następujący sposób:

Musisz stworzyć plik HTML, Na przykład , angularjsexample.html jak pokazano niżej.

Welcome {{helloTo.title}} to the world of Tutorialspoint!

angular.module('myapp', []) .controller('HelloController', function($scope) { $scope.helloTo = {}; $scope.helloTo.title = 'AngularJS'; });

W powyższym przykładzie skrypt reprezentuje AngularJS JavaScript.

Byłbyś zaskoczony, gdybyś wiedział, ile aplikacji, których używasz na co dzień, zostało opracowanych na platformie AngularJS.

Oto kilka nazwisk:

  • Opiekun
  • PayPal
  • jetBlue
  • klocki Lego
  • Upwork
  • Netflix
  • Wolny strzelec
  • iStock

Z powyższych nazw jasno wynika, jaką wysokość można osiągnąć, ucząc się korzystać z tego schematu. Te strony są na topie, a ogromna część ich sukcesu z pewnością wynika z wydajności witryn tylko dlatego, że zostały stworzone w AngularJS.

Wniosek

Jeśli chcesz tworzyć i rozwijać aplikacje jednostronicowe na urządzenia mobilne, a nawet strony internetowe, tak jak kiedyś - nie szukaj dalej.

Przykład listy podwójnie połączonej w c ++

AngularJS to kompleksowe rozwiązanie dla Ciebie, ponieważ ta strona pomaga i sprawia, że ​​tworzenie aplikacji jest znacznie wygodniejsze i bardziej spójne. Jest nie tylko świetny dla początkujących, ale gdy zagłębisz się w niego, będziesz miał tendencję do uczenia się z doświadczeniem i tworzenia świetnych aplikacji.

W międzyczasie, w przypadku aktualizacji do nowszych wersji, nie musisz wkładać wiele wysiłku. Ucząc się kilku nowych poleceń i rozumiejąc nowe poprawki, możesz również rozpocząć tworzenie aplikacji w nowych wersjach.

Obejrzyj nasz nadchodzący samouczek, aby dowiedzieć się więcej o tworzeniu jednostronicowych aplikacji internetowych przy użyciu AngularJS.

POPRZEDNIA samouczek | NEXT Tutorial

rekomendowane lektury

^