Kurs z AngularJS – wypisywanie tekstu

Czas czytania: 2 minut

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