Kurs z AngularJS – wypisywanie tekstu

Kategoria wpisu AngularJS, JavaScript, jQuery Tagi: , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Witam w 2 części kursu z AngularJS dzisiaj pokażę wam co jeszcze ciekawego można zrobić z pomocą tej biblioteki. Na razie nie będzie to nic skomplikowanego na bardziej zaawansowane rzeczy przyjdzie czas później. Na początku warto pamiętać, że w przypadku AngularJS w przeciwieństwie np. do jQuery nie pracujemy bezpośrednio na kodzie HTML. To co pokaże się na naszym ekranie jest wynikiem bezpośredniego połączenia ze sobą HTML, CSS i JavaScript. Wymaga to nieco innego podejścia do tematu niż dotychczas.

https://angularjs.org/

Wypisywanie zawartości (tekstu, liczb zapisanych w skrypcie)

Na początek zajmiemy się  wyrażeniami jakie można spotkać w AngularJS. Tylko bez paniki są one bardzo podobnych do tych spotykanych w JS np.

Pokażę wam teraz jak będzie wyglądał powyższy kod po umieszczeniu go w HTML.

See the Pen
AngularJS Expressions
by Aura (@Julka85)
on CodePen.

Powyżej tak naprawdę znajdują się 2 przykłady. Z pozoru są one identyczne jednak jeśli się im przyjrzeć widać różnicę. W 2 przypadku nie ma znacznika uruchamiającego AngularJS.

 

Podobnie sytuacja wygląda w przypadku mnożenia.

 

See the Pen
KLjrEd
by Aura (@Julka85)
on CodePen.

Proste moduły/skrypty

Tekst jak i inne elementy można wypisać z pomocą odpowiednich modułów. Bardzo prostym przykładem będzie napisanie modułu wyświetlającego krótki tekst.

W powyższym kodzie pojawiło się kilka nowych znaczników. Z pewnością jednym z ważniejszych będzie $scope.

  • $scope to specjalny obiekt, w którego zdaniem jest przechowane dane umieszczonych w kontrolerze. Dane  takie są ułożone w sposób hierarchiczny.

Aktualnie znajduje się w nim tylko jeden element, ale jak pokażę później może być ich znacznie więcej.

Inne ciekawe znaczniki to te dzięki, którym deklarujemy moduł:

Oraz te, które tworzą nam kontener dla obiektu

 

W HTML wywołanie naszego modułu wygląda następująco:

To z jakiego modułu mamy skorzystać definiujemy w ng-app=”myApp”ng-controller z kolei służy do kontrolowania obiektu. Te dwa obiekty łączą HTML z modułem.

Złożony kod wygląda następująco:

 

See the Pen
Angular
by Aura (@Julka85)
on CodePen.


Poniżej zamieściłam kolejny przykład bardzo prostego modułu:

Jedyne co robi nasz moduł to zapisywanie wartości do 2 zmiennych.

 

Jak widać tworzenie prostego modułu w AngulaJS nie jest zbyt skomplikowane. Poniżej znajdziecie linki do strony z której korzystałam podczas tworzenia kursu znajdziecie na niej więcej ciekawych przykładów.

żródła:

https://www.w3schools.com/angular/angular_modules.asp

https://www.w3schools.com/angular/angular_expressions.asp

https://mrzepinski.pl/angularjs-1-wprowadzenie.html

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *