Planując pracę nad aplikacją, założyłem sobie cel zapoznania się z frameworkiem AngularJS. W końcu przyszedł czas przyjrzenie się tej bibliotece. Zaczniemy słowem wstępu. Z czym to jeść?
Angular jest to framework napisany w języku JavaScript i wykorzystuje on HTML. Dzięki niemu możliwe jest tworzenie dynamicznych i łatwych w utrzymaniu (wzorzec MVC) aplikacji internetowych działających po stronie klienta.
Ok wszystko super, ale to na pewno jest ciężkie do ogarnięcia, pomyślicie. Otóż nie, zobaczcie jakie to proste. Poniżej znajduje się kod pierwszej aplikacji. Nie trzeba pobierać żadnych bibliotek. Wystarczy napisać kawałek kodu w notatniku i działa. Magic 😀
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app> <body> Type something: <input ng-model='input'> <p> Your input: {{ input }} </p> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> </body> </html> |
Przeanalizujmy kod od początku. Jak widać wygląda jak zwykły HTML, ale coś tu dodano dodatkowo. W oczy rzuca się dyrektywa ng-app, jest ona dodana po to, aby określić jaką część drzewa DOM będzie zarządzał AngularJS. W tym przypadku Angular będzie zarządzał całością, ale nic nie stoi na przeszkodzie aby był to np. tylko jeden <div>.
Następnie mamy kontrolkę input z atrybutem ng-model, chodzi o to aby powiedzieć Angularowi, że to jest nasz model o nazwie input.
Kolejna linijka kodu zawiera takie dziwne znaki {{ input }}, to właśnie tutaj Angular wstrzyknie nową wartość, odświeży ją dynamicznie. W tym przypadku wartość z pola input.
Na końcu sekcji body określamy skrypt Angularowy, lepiej określić go w ten sposób, aby klient nie musiał go za każdym razem pobierać. Skrypt będzie przechowywany w pamięci cache przeglądarki, który jest dostępny dla wielu aplikacji.
To na tyle słowem wstępu do Angulara. W kolejnym wpisie/wpisach przyjrzymy się bliżej tej bibliotece.