AngularJS – wstęp do programowania

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ść.

Spis treści

Toggle

Jak zainstalować bibliotekę na stronie internetowej?

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

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.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="" class="container">
 
<p>Wprowadź tekst:</p>
<p>Text: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>

</div>

</body>
</html>

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ą.