Co to jest AngularJS?

AngularJS to jedna z najpopularniejszych frameworków internetowych opartych na JavaScript, wykorzystywana w programowaniu front-end. Jest on wykorzystywany przy tworzeniu aplikacji jednostronicowych (SPA). AngularJS to platforma typu open source, która jest utrzymywana głównie przez Google i społeczność osób zaangażowanych w rozwiązywanie problemów związanych z tworzeniem aplikacji jednostronicowych. W tym temacie poznamy dyrektywy AngularJS.

AngularJS to nic innego, jak rozszerzenie istniejącego HTML; Jest dodawany na stronie HTML z tagiem. AngularJS sprawia, że ​​strona HTML lepiej reaguje na działania użytkownika, dodając łatwo dodatkowe atrybuty. Najnowsza stabilna wersja AngularJS to obecnie wersja 1.6.x.

Dyrektywy AngularJS

AngularJS to wydajne środowisko, które obsługuje architekturę opartą na Model-View-Controller (MVC). Zapewnia podstawowe funkcje, takie jak dwukierunkowe wiązanie danych, kontroler, usługi, dyrektywy, szablony, router, filtry, wstrzykiwanie zależności itp. Wszystkie te są głównymi funkcjami, które współpracują ze sobą w celu zwiększenia wydajności AngularJS.

Dyrektywa jest jedną z bardzo przydatnych funkcji AngularJS. Rozszerza istniejący HTML i pozwala na łatwe tworzenie stron internetowych z nowym zachowaniem przy użyciu podstawowego JavaScript. Pozwala pisać własne tagi niestandardowe i mapować je na istniejący HTML. Ta funkcjonalność daje większą swobodę i umożliwia programistom dużą elastyczność w tworzeniu i stosowaniu niestandardowych elementów w aplikacjach internetowych. Mogą także projektować własne dyrektywy. W tym artykule skupimy się głównie na dyrektywach AngularJS i spróbujemy zdobyć wiedzę na temat tej podstawowej funkcji.

Dyrektywy to nic innego jak znaczniki elementów DOM w HTML, takie jak nazwa atrybutu, nazwa elementu, klasa CSS lub komentarz. Kompilator AngularJS następnie dołącza określone zachowanie do tego elementu. Każda dyrektywa ma nazwę i zaczyna się od „ng-”. Każda dyrektywa może zdecydować, gdzie może być stosowana w elementach DOM. Istnieje kilka istniejących dyrektyw, które są już dostępne w AngularJS i podobnie możemy zdefiniować samodzielnie.

Przyjrzymy się trzem głównym wbudowanym dyrektywom, które dzielą framework AngularJS na trzy główne części.

1. ng-app: Ta dyrektywa informuje kompilator, że jest to aplikacja AngularJS. Dyrektywa, w której jest zdefiniowana w DOM, staje się głównym elementem aplikacji. Na przykład



AngularJS jest dostępny jako plik JavaScript i jest dodawany do HTML za pomocą znacznika. Aplikacja ng w aplikacji informuje AngularJS, że div jest elementem głównym i właścicielem aplikacji AngularJS. Aplikacja AngularJS zaczyna się od tego elementu i wszystko, co jest kodem AngularJS, jest w nim zapisane.

2. ng-model: Ta dyrektywa wiąże wartość ze strony internetowej, głównie z pola wejściowego do zmiennej aplikacji. Zasadniczo ta dyrektywa umożliwia wysyłanie danych z danych wejściowych do aplikacji AngularJS, które mogą być używane gdzie indziej. Na przykład

Wchodzić:

Dyrektywa modelu ng wiąże wartość wejściową ze zmienną aplikacji o nazwie „input”. W następnym przykładzie zobaczymy, jak możemy wyświetlić tę samą wartość na stronie internetowej.

3. ng-bind: Ta dyrektywa wiąże wartość z aplikacji AngularJS ze stroną internetową. tj. Umożliwia przekazywanie danych z aplikacji do tagów HTML. Na przykład

Wchodzić:

Dane, które przechwyciliśmy za pomocą dyrektywy „ng-model” w zmiennej aplikacji „input” są powiązane z elementem tagu

za pomocą „ng-bind”. Możemy teraz uruchomić tę aplikację i zobaczyć, jak dynamicznie AngularJS aktualizuje wprowadzoną wartość na stronie.

Oprócz nich w AngularJS dostępnych jest kilka innych ważnych dyrektyw.

4. ng-repeat: Ta dyrektywa powtarza element HTML i jest stosowana w tablicy obiektów. Ta dyrektywa jest bardzo przydatna w scenariuszach takich jak wyświetlanie elementów tabeli na stronie internetowej.

5. ng-init: Ta dyrektywa służy do inicjalizacji wartości aplikacji AngularJS przed załadowaniem strony internetowej.

Tworzenie nowych dyrektyw

możemy tworzyć własne niestandardowe dyrektywy wraz z istniejącymi dostępnymi dyrektywami AngularJS. Tworzenie nowych dyrektyw jest bardzo łatwe przy użyciu tylko JavaScript. Nowe dyrektywy są tworzone przy użyciu „. dyrektywa ”. Na przykład



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));

Angular.module to funkcja AngularJS, która tworzy moduł. Stworzyliśmy niestandardową dyrektywę o nazwie niestandardowa dyrektywa, dla której zapisana jest funkcja. Za każdym razem, gdy użyjemy tej dyrektywy na naszej stronie internetowej, funkcja ta zostanie wykonana. W takim przypadku jest to zwracany szablon zawierający kod HTML.

Podczas dyrektywy w sprawie nazewnictwa musimy stosować konwencję nazewnictwa skrzyń wielbłądów, a podczas jej wywoływania musimy używać oddzielnej konwencji nazewnictwa „-”.

Istnieją cztery sposoby na przywołanie dyrektyw,

Nazwa elementu

Jak użyto w ostatnim przykładzie:

Atrybut

Klasa

Aby wywołać dyrektywę przy użyciu nazwy klasy, musimy zdefiniować właściwość ograniczającą o wartości „C”.

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

Komentarz

Aby wywołać dyrektywę za pomocą komentarza, musimy zdefiniować właściwość ograniczenia o wartości „M”.

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

Zamień właściwość: prawda jest obowiązkowe i zastąpi oryginalny komentarz dyrektywą, w przeciwnym razie komentarz byłby niewidoczny.

Wniosek - dyrektywy AngularJS

Dyrektywa jest więc bardzo zaawansowaną funkcją dostępną w AngularJS. Dyrektywa pozwala wprowadzić nową składnię, jest jak znacznik i pozwala nam przypisać do nich specjalne zachowanie. W AngularJS istnieją dostępne dyrektywy, które są bardzo przydatne, możemy również zdefiniować własne dyrektywy niestandardowe i z nich korzystać. Niestandardowe dyrektywy zapewniają programistom dużą elastyczność i swobodę. Dyrektywy dodają nową funkcjonalność do istniejącego HTML dzięki innowacyjnemu stylowi i funkcjom.

Polecane artykuły

Jest to przewodnik po dyrektywach AngularJS. Tutaj omawiamy trzy główne wbudowane dyrektywy, które dzielą framework AngularJS na trzy główne części. Możesz także zapoznać się z następującymi artykułami, aby dowiedzieć się więcej -

  1. Wersje HTML
  2. Frameworki w Javie
  3. Architektura AngularJS
  4. Style list HTML

Kategoria:

Rozwój oprogramowania