Moduly AngularJS
Modul AngularJS definuje aplikaci.
Modul je kontejner pro různé části aplikace.
Modul je kontejner pro aplikační řadiče.
Ovladače vždy patří k modulu.
Vytvoření modulu
Modul je vytvořen pomocí funkce AngularJS angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
Parametr "myApp" odkazuje na HTML element, ve kterém bude aplikace spuštěna.
Nyní můžete do své aplikace AngularJS přidat řadiče, direktivy, filtry a další.
Přidání ovladače
Přidejte do své aplikace ovladač a odkazujte se na ovladač s
ng-controllerdirektivou:
Příklad
<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>
Více o ovladačích se dozvíte později v tomto tutoriálu.
Přidání směrnice
AngularJS má sadu vestavěných direktiv, které můžete použít k přidání funkcí do vaší aplikace.
Úplnou referenci naleznete v odkazu na směrnici AngularJS .
Kromě toho můžete modul použít k přidání vlastních direktiv do vašich aplikací:
Příklad
<div ng-app="myApp" w3-test-directive></div>
<script>
var app =
angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
Více o direktivách se dozvíte později v tomto tutoriálu.
Moduly a řadiče v souborech
V aplikacích AngularJS je běžné vkládat modul a řadiče do souborů JavaScript.
V tomto příkladu "myApp.js" obsahuje definici aplikačního modulu, zatímco "myCtrl.js" obsahuje řadič:
Příklad
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
myApp.js
var app = angular.module("myApp", []);
Parametr [] v definici modulu lze použít k definování závislých modulů.
Bez parametru [] nevytváříte nový modul, ale načítáte existující.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Funkce mohou znečišťovat globální jmenný prostor
V JavaScriptu je třeba se vyhnout globálním funkcím. Mohou být snadno přepsány nebo zničeny jinými skripty.
Moduly AngularJS tento problém redukují tím, že všechny funkce ponechávají v modulu lokální.
Kdy načíst knihovnu
I když je v aplikacích HTML běžné umísťovat skripty na konec
<body>prvku, doporučuje se načíst knihovnu AngularJS buď do, <head>nebo na začátek <body>.
Je to proto, že volání do angular.modulelze zkompilovat až po načtení knihovny.
Příklad
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<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>
</body>
</html>