Deklaratywny styl programowania
Do momentu pojawienia się biblioteki AngularJS programowanie w JavaScript miało charakter imperatywny. Czyli programista opisywał szczegółowo – jak i co program ma wykonać. Jquery ułatwiał jedynie operowanie na drzewie DOM. Wzorowany na tej bibliotece AngularJS wprowadził możliwość definiowania sposobu działania poprzez własne znaczniki HTML (dyrektywy). Był to początek trendu rozwoju programowania deklaratywnego. Opisujemy, co ma być zrobione, a nie jak (to zawiera biblioteka). Szczegółowy opis w Javascript ma dotyczyć algorytmu (logiki biznesowej), a nie jego implementacji w środowisku przeglądarki.
Angular 1.x
Zobaczmy najprostszy przykład programu z użyciem Angular 1.
<html ng-app="app">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.angularjs.org/1.6.7/angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
<p>Wiaj {{ name }}!</p>
</div>
</body>
</html>
<script type="text/javascript">
(function () {
var app = angular.module("app", []);
var MyController = function ($scope) {
$scope.name = "Jan Kowalski";
}
app.controller("MyController", ["$scope", MyController]);
}());
</script>
Widzimy, że pojawiły się nowe własności znacznikiów - dyrektywy ng-app i ng-controller. Są one wykorzystywane do opisu tego, jaki efekt chcemy osiągnąć. Dodatkowo używane są szablony - takie jak dotąd były stosowane przy renderowaniu stron na serwerze. Zapis:{{ name }}wskazuje miejsce w którym należy wstawić dane. Aplikacja Angulara to moduł (angular.module) zawierający funkcję kontrolera (function($scope)), w której podajemy dane do renderowania (wypełnienia szablonu).
Zapis ten można nieco skrócić:
<html ng-app="app">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.angularjs.org/1.6.7/angular.js"></script>
</head>
<body>
<div ng-controller="MyController2">
<p>Wiaj {{ name }}!</p>
</div>
</body>
</html>
<script type="text/javascript">
(function () {
angular.module("app", []).controller("MyController2",
[ "$scope",
function ($scope) {
$scope.name = "Józef";
}
]
);
}());
</script>
Kolejny przykład pokazuje użycie dyrektywyng-repeat – dla listy elementów, oraz ng-click. Zapis ng-repeat='item in list_items'skazuje, że item przyjmuje kolejne wartości z listy items.
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="myApp" ng-controller='MyController3'>
<ul>
<li ng-repeat='item in list_items'>{{item}}</li>
</ul>
<p>licznik={{ count }}</p>
<button ng-click='addListItem()'>Dodaj element</button>
<button ng-click="myFunction()">Zwieksz licznik!</button>
</div>
</body>
</html>
<script>
// https://www.w3schools.com/angular/angular_events.asp
var app = angular.module("myApp", []);
app.controller('MyController3', function ($scope) {
$scope.list_items = [
'Element 1',
'Element 2',
'Element 3'
];
$scope.count = 0;
$scope.addListItem = function () {
$scope.list_items.push('Element 4');
};
$scope.myFunction = function() {
$scope.count++;
}
});
</script>
Pewną wadą Angulara jest to, że jeśli z jakichś powodów nastąpi błąd Javascript (nie wczyta się biblioteka?) - na stronie zobaczymy szablon - z zaznaczonymi polami ({{ }} ). Jednak ta idea programowania została zastosowana także w rozwiązaniach pozbawionych tej wady (będzie o nich mowa w dalszej części podręcznika).