Wprowadzenie do AngularJS

Podziel się ze znajomymi

Wpis ten jest wprowadzeniem do nowej serii postów, którą planowałem rozpocząć na blogu już od dłuższego czasu. AngularJS jest jak dla mnie świetnym wyborem na początek przygody z tego typu frameworkami. Osobiście pozwolił mi opanować podstawowe mechanizmy, takie jak routing, komunikacja z serwerem za pomocą REST. Dodatkowo w tym frameworku tworze moją pracę inżynierską. To wszystko skłoniło mnie do opisania na blogu zdobytej przeze mnie wiedzy w ostatnich miesiącach.

Mimo iż, na dniach pojawiła się już 5 stabilna wersja Angulara, to nadal na polskim rynku pracy możemy znaleźć dużo ofert związanych z AngularJSem. To kolejny atut przemawiający za znajomością AngularJSa.

Podstawowe informacje

Aby móc sprawnie poznawać wybrany framework, trzeba wiedzieć, gdzie można szukać informacji na jego temat. Oto zbiór przydatnych miejsc w sieci związanych z AngularJSem.

Oficjalną stroną AngularJSa jest angularjs.org

Dokumentacje możemy znaleźć pod adresem angularjs – dokumentacja

Mamy możliwość korzystania z AngularJS bez korzystania z plików lokalnych, wykorzystując pliki udostępnione w sieci przez CDN angularjs CDN

Framework możemy pobrać z oficjalnej strony, wchodząc tam klikamy Download AngularJS.

Po kliknięciu przycisku, zobaczymy okienko z wyborem wersji. Na chwilę pisania wpisu, najnowsza wersja to 1.6.6.

Pierwsza apliakcja

Zwyczajem panującym w nauce programowania jest stworzenie Hello World w danym języku czy frameworku. Tak też i my zaczniemy przygodę z AngularJSem.

Zatem zacznijmy od przygotowania czystego kodu HTML5.

<!DOCTYPE html>
<html lang="pl">
<head>
<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>AngularJS #1</title>
</head>
<body>

</body>
</html>

Teraz musimy podpiąć plik z biblioteką AngularJS. Przed znacznikiem </body> dodajemy link do pliku AngularJSa.

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

Kolejnym krokiem jest utworzenie znacznika <script> i uzupełnienie go kodem korzystającym z mechanizmów AngularJSa.

Moduł

Na początek musimy utworzyć moduł. Moduł to taka przestrzeń, w której znajdują się wszystkie kontrolery, serwisy, dyrektywy, które wykorzystujemy w aplikacji. W projekcie może występować jeden moduł główny. Dodatkowo można tworzyć moduły, które będą wstrzykiwane do głównego modułu.

Kod modułu

var app = angular.module("nazwa_aplikacji", [])

Aby utworzyć moduł wystarczy zadeklarować zmienną o jakiejś nazwie, u mnie to będzie app, następnie przypisać jej wartość zwracaną przez metodę module(), obiektu angular. Jako pierwszy parametr przyjmuje nazwę aplikacji, natomiast drugi argument to tablica wstrzykiwanych zależności. To tutaj możemy dodawać inne moduły, z których będzie składał się moduł główny aplikacji. W przykładzie powyżej tablice pozostawiamy pustą.

Teraz musimy połączyć nasz moduł aplikacji z kodem html. Dzieje się to przez wykorzystanie dyrektywy ng-app, którą najczęściej dodaje się w znaczniku <html> lub <body>.

Po dodaniu dyrektywy znacznik <html>, wygląda jak poniżej.

<html lang="pl" ng-app="nazwa_aplikacji">

Kontroler

Teraz czas utworzyć pierwszy kontroler. Kontroler jak sama nazwa wskazuje odpowiada za przetwarzanie danych przed wyświetleniem ich na stronie np. mamy aplikację liczącą BMI, użytkownik podaje dane, kontroler przelicza podane dane według określonego wzoru i przekazuje do wyświetlenia na stronie. Dzięki wstrzyknięciu zależności $scope, możemy wyświetlać w pliku html, dane przetworzone przez kod js.

Nasz kontroler będzie wyświetlał napis Hello World.

Zatem utwórzmy takowy kontroler.

app.controller("nasz_controler", function ($scope) {
     $scope.hello = 'Hello World'
})

Chwila na wyjaśnienia. Nasza zmienna app, jest obiektem AngularJSa, w której tworzymy kontroler, wywołując metodę controller(). Podobnie jak przy module, pierwszy argument to nazwa kontrolera. Drugi argument to wywołanie zwrotna, w którym wykonują się wszystkie operacje naszego kontrolera. Funkcja zwrotna function ($scope) w parametrze ma wstrzykniętą zależność $scope.

$scope to przestrzeń nazw, która jest dostępna z poziomu pliku html. Zatem wszystkie atrybuty obiektu $scope możemy wyświetlić na naszej stronie.

Nasz kontroler zawiera jeden atrybut obiektu $scope, jest nim hello, które przechowuje ciąg znaków Hello World.

Jednak abyśmy mogli cokolwiek wyświetlić, musimy wcześniej skorzystać z dyrektywy ng-controller, dodając go do pliku html, najlepiej w znaczniku <body>.

<body ng-controller="nasz_controler">

Po dodaniu tej dyrektywy, mamy możliwość wykorzystywania atrybutów $scope. Zatem wyświetlmy nasz napis jako nagłówek.

<h1>{{hello}}</h1>

Aby wyświetlić wartość z kontrolera musimy użyć klamerek {{ }}. Warto zaznaczyć, że pomijamy słowo $scope.

Efekt pracy

Cały kod

<!DOCTYPE html>
<html lang="pl" ng-app="nazwa_aplikacji">

<head>
    <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>AngularJS #1</title>
</head>

<body ng-controller="nasz_controler">

    <h1>{{hello}}</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <script>
    var app = angular.module("nazwa_aplikacji", [])
    
    app.controller("nasz_controler", function ($scope) {
        $scope.hello = 'Hello World'
    })

    </script>
</body>

</html>

Podsumowanie

W tym wpisie udało nam się stworzyć pierwszą aplikację, która wyświetla popularne Hello World. Dzięki temu poznaliśmy podstawy tworzenia aplikacji w AngularJS, dowiadując się czym jest moduł, kontroler, a także $scope. To początek nowej serii na moim blogu, teraz często będą się pojawiały wpisy związane z JSem, nie tylko z AngularJSem.

Pozdrawiam,

sirmarbug