Witam w 2 części kursu z AngularJS dzisiaj pokażę wam co jeszcze ciekawego można zrobić z pomocą tej biblioteki.
Wprowadzenie do AngularJS
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.
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.
{{ 4 + 4 }} // wyrażenie {{ firstName + " " + lastName }} // wyrażenie, połączenie 2 wartości ze sobą
Pokażę wam teraz jak będzie wyglądał powyższy kod po umieszczeniu go w HTML.
<div ng-app=""> <p>My first expression: {{ 4 + 4 }}</p> </div>
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.
<div ng-app="" ng-init="quantity=2;cost=4"> <p>Total in dollar: {{ quantity * cost }}</p> </div>
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.
var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.name = "World"; });
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ł:
var app = angular.module("myApp", []);
Oraz te, które tworzą nam kontener dla obiektu
app.controller("myCtrl", function($scope){}
W HTML wywołanie naszego modułu wygląda następująco:
<div ng-app="myApp" ng-controller="myCtrl"> Hello {{name}} </div>
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:
<div ng-app="myApp" ng-controller="myCtrl"> Hello {{name}} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.name = "World"; }); </script>
Poniżej zamieściłam kolejny przykład bardzo prostego modułu:
<div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script>
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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.