Úvod do AngularJS
AngularJS je framework JavaScriptu . Lze jej přidat na stránku HTML pomocí značky <script>.
AngularJS rozšiřuje atributy HTML pomocí direktiv a váže data na HTML pomocí výrazů .
AngularJS je JavaScript Framework
AngularJS je JavaScript framework napsaný v JavaScriptu.
AngularJS je distribuován jako soubor JavaScript a lze jej přidat na webovou stránku pomocí značky skriptu:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
AngularJS rozšiřuje HTML
AngularJS rozšiřuje HTML o ng-directives .
Direktiva ng-app definuje aplikaci AngularJS.
Direktiva ng-model váže hodnotu ovládacích prvků HTML (vstup, výběr, textarea) na data aplikace.
Direktiva ng-bind váže data aplikace k pohledu HTML.
Příklad AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Vysvětlený příklad:
AngularJS se spustí automaticky po načtení webové stránky.
Direktiva ng-app říká AngularJS, že prvek <div> je „vlastníkem“ aplikace AngularJS .
Direktiva ng-model váže hodnotu vstupního pole k aplikační proměnné name .
Direktiva ng-bind váže obsah prvku <p> k aplikační proměnné name .
Směrnice AngularJS
Jak jste již viděli, direktivy AngularJS jsou atributy HTML s předponou ng .
Direktiva ng-init inicializuje aplikační proměnné AngularJS.
Příklad AngularJS
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Případně s platným HTML:
Příklad AngularJS
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Pokud chcete, aby byl HTML kód vaší stránky platný, můžete použít data-ng- místo ng- .
Mnohem více o direktivách se dozvíte později v tomto tutoriálu.
AngularJS výrazy
Výrazy AngularJS se zapisují do dvojitých složených závorek: {{ výraz }} .
AngularJS bude „vydávat“ data přesně tam, kde je výraz napsán:
Příklad AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Výrazy AngularJS vážou data AngularJS k HTML stejným způsobem jako direktiva ng-bind .
Příklad AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Více o výrazech se dozvíte později v tomto tutoriálu.
Aplikace AngularJS
Moduly AngularJS definují aplikace AngularJS.
AngularJS kontroléry řídí aplikace AngularJS.
Direktiva ng-app definuje aplikaci, direktiva ng-controller definuje kontrolér.
Příklad AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
Moduly AngularJS definují aplikace:
Modul AngularJS
var app = angular.module('myApp', []);
Řídicí systémy AngularJS řídí aplikace:
Ovladač AngularJS
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Více o modulech a ovladačích se dozvíte později v tomto tutoriálu.