AngularJS – wstęp do programowania

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


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

AngularJS to jeden z frameworków opartych na języku JavaScript dość przydatny w tworzeniu stron, na których dochodzi do bezpośrednich interakcji z użytkownikiem.

Logo AngularJS https://angularjs.org/

AngularJS umożliwia nam rozszerzenie możliwości HTML. HTML w wielu przypadkach dobrze sobie radzi przy wyświetlanie statycznych dokumentów. W przypadku gdy próbujemy go wykorzystać do deklarowania dynamicznie zmieniających się widoków w aplikacjach internetowych nie zawsze daje radę. Prz czym czasami to nie wina HTML tylko nie dostosowania przeglądarek internetowych do co chwilę pojawiających się nowych standardów. AngularJS takiego problemu nie ma dzięki czemu doskonale rozszerza możliwości HTML.

Biblioteka wczytuje odpowiednio przygotowany plik HTML uzupełniony o dodatkowe specyficzne tagi. Na ich podstawie przeglądarka wyświetla pożądaną zawartość.

Jak zainstalować bibliotekę na stronie internetowej?

Dodawanie AngularJS do strony internetowej jest bardzo proste. Wystarczy, że podłączymy do naszej strony bibliotekę poprzez dodanie:

Następnie w kodzie dodajemy odpowiednie znaczniki np.

  • ng-app definiuje aplikację AngularJS. Umieścić go można np. <div ng-app> lub <HTML ng-app>
  • ng-model wiąże wartość kontrolek HTML (input, select, textarea) z danymi aplikacji.
  • ng-bind wiąże dane aplikacji z widokiem HTML.

Wiem trochę dziwnie to brzmi, ale wszystko się nieco bardziej rozjaśni kiedy zaczniemy pisać pierwsze kody.

Prosta aplikacja w AngularJS

Zbudujemy teraz prostą aplikację posiadającą jedynie jedno pole typu Input a zawartość tego pola będzie wyświetlana obok.

Demo:

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

Jak widać <div> w którym umieszczony został nasz skrypt dysponuje znacznikiem ng-app. W ten sposób zaznaczamy, że będziemy w tym miejscu korzystać z AngularJS. Następnie deklarujemy zmienną, którą będziemy wyświetlać z pomocą ng-model. Na koniec z pomocą ng-bind wyświetlamy zawartość pola.

To dość prosty przykład, ale w miarę czytelnie obrazuje to jak można działać z tą biblioteką.

Inne przykłady

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

żródła:

Dodaj komentarz

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