AngularJS – podstawy

facebooktwittergoogle_plusredditpinterestlinkedinmail

Czym jest AngularJS?

AngularJS to opensourcowy framework stworzony przez programistów z firmy Google, służący do pisania webowych aplikacji w języku Javascript. Został stworzony, aby ułatwić i przyspieszyć pisanie aplikacji front-endowych w oparciu o wzorzec MVC. Z dnia na dzień zdobywa coraz większą popularność wśród programistów, a także wśród firm produkujących oprogramowanie, które coraz częściej szukają osób, biegle znających tę bibliotekę.

Skąd wziąść angulara?

AngularJS można pobrać ze strony projektu https://angularjs.org/. Najnowsza wersja biblioteki to 1.4.x.

Pierwszy program

Stwórzmy prostą strukturę naszej nowej aplikacji:

app/
    js/
        angular.js
        app.js
    index.html

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script type="text/javascript" src="js/angular.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body ng-app="exApp">
        <div ng-controller="exController">
            {{ name }}
        </div>
    </body>
</html>

Do pliku index.html dodaliśmy bibliotekę AngularJS, którą wcześniej ściągnęliśmy oraz plik app.js.

app.js:

angular.module('exApp', []);
angular.module('exApp').controller('exController', [
    '$scope',
    function ($scope) {
        $scope.name = "John";
    }
]);

W pliku app.js definiujemy naszą pierwszą aplikację:

angular.module('exApp', []);

„exApp” to nazwa naszej aplikacji, natomiast pusta tablica to lista modułów, z których korzysta. Jako że aktualnie nie potrzebujemy żadnych zewnętrznych modułów, zostawiamy tablicę pustą. Jeśli byśmy tego nie zrobili, Angular, zamiast stworzyć nowy moduł, próbowałby odwołać się do wcześniej stworzonego modułu. W efekcie czego dostalibyśmy błąd o następującej treści:
„Module ‚exApp’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.”

Następnie musimy wskazać Angular’owi, gdzie zaczyna się kod HTML, który ma być powiązany z naszą aplikacją. Robimy to poprzez dodanie atrybutu ng-app. Przeważnie atrybut ten dodaje się do tagu html lub body. Dodatkowo informujemy Angular’a, że ma uruchomić naszą aplikację automatycznie. Jeśli mielibyśmy kilka sekcji oznaczonych atrybutem ng-app, Angular uruchomi tylko tę aplikację, której atrybut ng-app znajdzie jako pierwszy, a pozostałe zignoruje.

Do stworzonej aplikacji dodajemy pierwszy kontroler o nazwie „exController”:

angular.module('exApp').controller('exController', [
    '$scope',
    function ($scope) {
        $scope.name = "John";
    }
]);

Tworzenie kontrolera wygląda podobnie to tworzenia nowego modułu. Jako pierwszy atrybut podajemy jego nazwę, a potem tablicę dependencji. Jedyna różnica to taka, że na końcu dodajemy konstruktor naszego kontrolera. Nasz nowy kontroler korzysta ze wbudowanego modułu $scope, który umożliwia nam przypisywanie kontrolerowi atrybutów i funkcji. Gdybyśmy przypisali atrybuty do obiektu this, nie mielibyśmy do nich dostępu z poziomu kodu html.
Przypisanie naszemu kontrolerowi konkretnego wycinka kodu html odbywa się poprzez dodanie atrybutu ng-controller.

<div ng-controller="exController">
    {{ name }}
</div>

Za pomocą nawiasów klamrowych odwołujemy się do atrybutu name naszego kontrolera. Angular jest tak skonstruowany, że jeśli nie znajdzie podanego atrybutu w kontrolerze, zamiast wyświetlić błąd, jak to bywa w czystym kodzie JavaScript, zamieni nawiasy klamrowe na pusty string. Dzięki czemu aplikacja nie zostanie wstrzymana z powodu błędnego odwołania.

W efekcie po odpaleniu naszej aplikacji w przeglądarce powinniśmy zobaczyć napis „John”.

Jest to najprostszy przykład, pokazujący jak niewiele wysiłku wymaga od nas rozpoczęcie pisania pierwszej aplikacji z użyciem tego framework’a.

ciąg dalszy:

AngularJS i ngRoute

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

91 ÷ 91 =

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>