Co to jest?
Angular jest to projekt open-source stworzny przez Google jako JavaScriptowy framework. Jak mówi wikipedia: „wspiera on tworzenie i rozwijanie aplikacji internetowych na pojedynczej stronie”. Biblioteka używa wzorca Model-View-Controller (MVC) aby ułatwić rozwój i testowanie aplikacji internetowych. Biblioteka posiada specjalne znaczniki którę wczytywane są z plikiem HTML przez którę następują akcję z plików angulara napisanych w JavaScripc. W angular.js występuje dwukierunkowe wiązanie danych (two-way binding) czyli kiedy w modelu następuje zmiana widok zostaje od razu zaktualizowany oraz kiedy następuje zmiana w widoku zmiana natychmiastowo wysyłana jest do modelu.
Pierwszy program
Aby utworzyć aplikacje z użyciem Angular.js należy dodać bibliotekę do pliku HTML oraz użyć wbudowanych tagów angulara przeznaczonych dla pliku HTML.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"> </script> <script src="app.js"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Pierwsza aplikacja z Angular</title> </head> <body ng-app> <p>Pierwsze wyrażenie w angular: {{ 1 + 2 }}</p> </body> </html> |
Wynikiem powyższego kodu jest:
Pierwsze wyrażenie w angular: 3
Jak to działa?
Aby uruchomić Angular.js musimy dodać bibliotekę do naszego pliku HTML oraz wstawić specjalny tag angularowy do HTML mianowicie mowa o dyrektywie ng-app. Aby można było używać angulara musimy w aplikcji dodać tag ng-app od teraz wszystkie operacje angulara muszą być potomkami dyrektywy ng-app, ng-app musi być rodzicem.
Dodanie dyrektywy ng-app mówi tyle, że „Angularze wykonaj swoją magię”. Wyrażenie {{ 1 + 2 }} jest ocenione przez Angular i wyrenderuje wynik 3.
Użycie angularowej dyrektywy po za ng-app spowoduję, że zadziała jako zwykły tag HTML bez użycia Angular.js. Usunięcie dyrektywy ng-app spowoduję, że aplikacja wyświetli wszystko tylko jako tagi HTML, bez użycia Angular.js.
|
1 2 3 |
<body> <p>Pierwsze wyrażenie w angular: {{ 1 + 2 }}</p> </body> |
Wynikiem operacji będzie:
Pierwsze wyrażenie w angular: {{ 1 + 2 }}
Na pierwszy wpis z Angularem.js (pierwszym) to tylę, w następnych wpisach poruszymy więcej zagadnień.
Pozdro 🙂