Programuju s Aran

AngularJS 4: Controllers

Programuju Aran's photo
Programuju Aran
·

0 min read

V minulém díle jsme se dozvěděli, jak funguje Data binding a Directives. Dnes si povíme něco o Controllers a o directive ng-controller.

Controller

je javascriptová funkce, která udržuje data a chování aplikace (metody).

Directive ng-contoller

je užívána k definování controlleru.

Vyzkoušejme si to na příkladě:

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="mojeApk" ng-controller="mujController">
    {{zprava}}
    </div>
<script>
    var ngApk = angular.module('mojeApk',[]);
    ngApk.controller('mujController', function($scope){
        $scope.zprava = "Hello World!";
    });
</script>
</body>
</html>

Výsledkem je "Hello World!".

Naši aplikaci jsme pojmenovali pomocí directive ng-app. Toto jméno (v našem případě mojeApk) jsme použili pro tvorbu modulu.

Module je kontejner pro controllery z aplikace. Každý controller vždy patří do nějakého modulu.

Poté, co jsme vytvořili module, přidáme funkci controlleru pomocí metody controller(), kde prvním parametrem je jméno controlleru a druhým funkce, kterou bude controller vykonávat.

$scope

$scope je vestavěný objekt, který obsahuje data aplikace a metody. Díky $scope jsme inicializovali vlastnost (property) zprava a použili v našem view. AngularJS vytváří a implementuje v aplikaci odlišné objekty $scope do každého controlleru. Data a metody připojené ke $scope v jednom controlleru ovšem nemůžeme využít v dalších controllerech.

Controllery se používají k:

  • inicializování (vzniku) objektu $scope
  • přidávání chování objektu $scope

Aplikace AngularJS se sestává z:

  • View - element DOM, který uvidí uživatel.

  • Model - data zobrazená uživateli ve View.

  • Controller - logická činnost skrytá za View.