Co to jest AngularJS? - Poznaj wersje AngularJS z dyrektywami

• Przegląd AngularJS

Przegląd AngularJS

W Brat Tech LLC w 2009 r. Programiści Misko Hevery i Adam Abrons opracowali platformę AngularJS, po której nastąpiła rewolucja w programowaniu front-end i tworzeniu aplikacji jednostronicowych. AngularJS to framework javascript, który wiąże elementy HTML z obiektami javascript. Wiązanie danych i wstrzykiwanie zależności to jedne z wiodących funkcji AngularJ, które oszczędzają czas na pisaniu długich kodów, ułatwiając programistom i przeglądarkom pracę. Jak to zostanie osiągnięte, zostanie dokładniej wyjaśnione dalej, ale na razie pamiętasz tylko te terminologie. W tym temacie poznamy wersję AngularJS.

Wersje AngularJS

AngularJS to wersje Angular 1.x, a następnie opracowano Angular 2, który różni się od Angular 1.x. Pracuje.

Dlaczego wersja AngularJS i jak to działa?

AngularJS pomaga nam opracowywać interaktywne aplikacje jednostronicowe. Przez aplikacje jednostronicowe rozumiem, że odwiedzona przez Ciebie pojedyncza strona załaduje całą inną zawartość za pomocą javascript. Ta funkcja pomaga aplikacji działać szybko i skutecznie.

Kiedy używamy javascript i html do budowania aplikacji, będziesz musiał powiązać widok z modelem za pomocą funkcji i obiektów JS. Ale jeśli uważasz, że te dwukierunkowe wiązanie danych w praktycznym zastosowaniu przemysłowym to samo podejście staje się nudne z powodu długich kodów. Jest to jeden z głównych powodów, dla których istniała potrzeba uczenia się i rozwijania AngularJS.

Czas nauczyć się podstawowych pojęć, zanim zaczniesz opracowywać aplikacje, w których zbudowany jest AngularJS:

• Model: model zawiera dane, obiekty i logikę.
• Widok: Jest to wizualna prezentacja aplikacji, która jest również nazywana interfejsem użytkownika.
• Wiązanie dwukierunkowe widok na model: Obiekt javascript, tj. Obiekt, który chcesz powiązać z DOM HTML Html, np. Dla pola tekstowego, danych wejściowych lub dowolnych znaczników HTML i odwrotnie, można łatwo wykonać przy użyciu niektórych wstępnie zdefiniowanych bibliotek AngularJS.
• Kontrolery: Kontrolery to funkcje javascript, które łączą model i widok.
• Usługi: usługi AngularJS to funkcje javascript, które wykonują określone zadania lub funkcje, które są utrzymywane i testowane przez javascript. Niektóre z przykładowych usług to $ scope, $ http, $ rootScope.
• Wyrażenia: Wyrażenia są używane do wiązania danych za pomocą HTML. Ta funkcja jest również znana jako interpolacja. Wyrażenia są zapisywane za pomocą ((expression)) nawiasów klamrowych. Wyrażenia są oceniane i można je pisać bez tagów HTML.
• Moduły: Moduły działają jako kontener zawierający różne części aplikacji kątowej, takie jak kontroler, usługi, dyrektywy itp.

Dyrektywy i zakres

Skoncentrujmy się na niektórych z predefiniowanych dyrektyw i na tym, jak one faktycznie działają. Większość tej dyrektywy zaczyna się od „ng” zaczerpniętego z Angulara

1 Zakres

• Zakres definiuje obiekt javascript, za pomocą którego dane mogą być dostępne od modelu do HTML. Zakres działa jako łącznik między nimi.
• Niektóre usługi zakresu to $ scope, $ rootScope. „$” oznacza, że ​​usługi te są wstępnie zdefiniowane i nie można ich modyfikować. Pamiętaj, że w HTML nie jest rozróżniana wielkość liter, ale w AngularJS rozróżniana jest wielkość liter, więc $ Scope zgłosi błąd jako niezdefiniowany.
• Należy je zadeklarować w naszej funkcji kontrolera, a kątowy wstrzyknie go automatycznie.

2. kontroler ng

• Ta dyrektywa służy do tworzenia instancji / obiektu kontrolera, przez który HTML DOM będzie komunikował się z rzeczywistą logiką.
• HTML mówi, że każdy znacznik z „-” zostanie zignorowany podczas tworzenia DOM HTML.
• Po utworzeniu DOM interpreter Angular znajduje dyrektywę ng-kontroler i tworzy instancję konkretnego kontrolera zapewniającego również usługę $ scope.
• Na jednej stronie HTML może znajdować się wiele kontrolerów ng.

3. ng-app

• Dyrektywa ta działa jak kontener zawierający kontrolery, dyrektywy, filtry, wyrażenia itp. Rejestruje lub uruchamia aplikację lub moduł.
• W twoim HTML jest tylko jedna aplikacja ng. Pod jedną aplikacją ng może znajdować się wiele kontrolerów ng.

To tworzy instancję obiektu aplikacji za pomocą usługi $ rootScope.

• Zatem zmienne / funkcje $ rootScope są dostępne w pełnej aplikacji.

4. model ng

• ng-model służy do wiązania danych z html do obiektu modelu. Zapewnia wiązanie dwukierunkowe.

5. ng-if

• Aby wykonać instrukcje warunkowe na tagach HTML używane jest ng-if. Jeśli warunek nie jest spełniony, DOM nie zawiera tego div w DOM.

6. ng-bind

• Zamiast używać (()) do interpolacji, można również użyć ng-bind.

7. ng-wyłączone

• W zależności od warunku element w widoku można wyłączyć.

8. ng-show

• Jeśli podany warunek dla ng-show jest spełniony, wówczas dany element jest pokazywany w DOM.

9. ng-hide

• Jeśli podany warunek ng-hide jest spełniony, dany element pozostanie ukryty w DOM.

10. powtórzenie ng

• Powtórzy określony div lub rozpiętość w HTML z podaną długością tablicy lub listy.

11. kliknij ng

• Po zdarzeniu kliknięcia elementu html wykona on dostarczoną funkcjonalność lub zadanie.

Wskazówka: najlepszym sposobem na naukę dowolnego języka jest jego kodowanie. Zobaczmy więc nasz pierwszy kod.

Przykłady wersji AngularJS

Oto niektóre przykłady podane poniżej




First Name:
Last Name:
Your name is: (( fname +" "+ lname))






First Name:
Last Name:
Your name is: (( fname +" "+ lname))






First Name:
Last Name:
Your name is: (( fname +" "+ lname))






First Name:
Last Name:
Your name is: (( fname +" "+ lname))






First Name:
Last Name:
Your name is: (( fname +" "+ lname))






First Name:
Last Name:
Your name is: (( fname +" "+ lname))






First Name:
Last Name:
Your name is: (( fname +" "+ lname))



Wynik:

Imię: Joseph
Nazwisko: Alex
Nazywasz się: Joseph Alex

Z powyższego fragmentu kodu należy się skupić:

• W linii 3 plik angular.min.js jest dodawany do strony, która załaduje wszystkie biblioteki wymagane do uruchomienia aplikacji AngularJS.
• AngularJS ma głównie 2 biblioteki angular.js i skompresowaną wersję tego pliku jako angular.min.js.
• W linii 5 możesz zobaczyć dyrektywę jako ng-app, która jest ignorowana przez Html podczas tworzenia DOM HTML i przyjmowana przez AngularJS jako jedna z jej dyrektyw w celu uruchomienia aplikacji.
• W linii 6, 7 ng-model jest związany tekst, który wprowadzisz do pola tekstowego ze zmiennymi fname i lname. Pamiętaj, że w zmiennych tych rozróżniana jest wielkość liter.
• W wierszu 8 zobaczysz wyrażenie ((fname + ”„ + lname)), który kąt będzie oceniał i wyświetlał dane, które wprowadzasz w polach tekstowych. Jest to znane jako interpolacja.

Przeanalizujmy jeszcze jeden przykład:



var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));



Imię:

Nazwisko:

Nazwa klienta to ((customerName)), a wiek to ((customerAge))

W tym przykładzie w wierszu 5 tworzona jest aplikacja o nazwie CustomerApp, która obejmie wszystkie części aplikacji. W następnym wierszu tworzony jest kontroler, który otrzymuje nazwę firstController. Zakres $ jest zadeklarowany jako parametr funkcji. AngularJS wstrzykuje go automatycznie do aplikacji w celu bezpośredniego użycia, programista nie musi go jawnie tworzyć.

Ta funkcja jest znana jako wstrzykiwanie zależności. W podobny sposób kontroler ng jest używany dla tego samego kontrolera pod tagiem ng-app. Pamiętaj, że zakres aplikacji lub kontrolera będzie znajdować się tam, gdzie kończy się div lub cokolwiek zdefiniujesz aplikację lub kontroler. W takim przypadku nie można uzyskać dostępu do kontrolera lub aplikacji po wierszu 16.

Polecane artykuły

To jest przewodnik po Co to jest wersja AngularJS. Tutaj omawiamy Wersje AngularJS z dyrektywami, zakresem i jak działa AngularJS. Możesz także zapoznać się z następującymi artykułami, aby dowiedzieć się więcej -

1. Architektura AngularJS
2. Aplikacja kątowa JS
3. Testowanie jednostek AngularJS
4. Kariera w AngularJS
5. Co to jest Angular 2?