AngularJS 4: Controllers
Jsem nadšený (a přiznejme si v mnohém nezkušený) programátor, grafik a student - právě proto se rád učím a doufám, že tato vášeň mě jen tak neopustí. Tvořím webové stránky pro podnikatele a menší firmy - zejména z lékařského prostředí.
Některé z mých projektů:
Webové stránky tvořím ve Wordpressu, front-endová prostředí programuji v JS, upravuji pomocí HTML, CSS a Bootstrapu, volnočasově se dloubám v Javě a nyní je mým velkým cílem Node.JS, ve kterém vidím potenciálního nástupce PHP.
Kontakt:
e-mail: filip.janecek28@gmail.com telefon: 702 885 801
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.