Az AngularJS egy nyílt forráskódú JavasScript alapú, webes alkalmazás keretrendszer. Néha csak Angular néven hivatkozunk rá. Karbantartója a Google és a hozzátartozó közösség. Segítségével könnyen létrehozható egyoldalas alkalmazás. Céljai közé tartozik kliens oldali MVC megvalósítása.
Az AngularJS kiterjeszti a HTML szótárát, mivel az egyes HTML elemeknek új attribútumokat határoz meg. Jól olvasható kódot eredményez, gyors alkalmazásfejlesztést tesz lehetővé.
Miško Hevery, a Google dolgozója 2009-ben kezdte fejleszteni, 2012-ben jelent meg az 1.0 verzió.
Az AngularJS 1.3.x bevezetésével szigorítva lett a kontroller használata. Már nem lehet globális kontrollert létrehozni. Az ng-app kötelezően értéket kell, hogy kapjon ha kontrollert használunk. A kontroller csak modulon belül hozható létre.
Hosszú ideje népszerű a Model-View-Controller (MVC) tervezési minta. A különböző platformok más és más megoldásokat kívánnak. Az AngularJS a Model-View-Whatever (MVW), magyarul Model-Nézet-Bármi elvet követi.
A Nézet, amelyet néha template-nek is nevezünk, HTML nyelven íródik. A nézet mögött mindig egy kontroller van. A kontroller tartalmazza az üzleti logikát. A nézet és a kontroller közötti kapcsolat a scope, magyarul hatáskör vagy érvényesség. A scope segítségével kapcsolódunk a modellhez.
A modell egy egyszerű Plain-Old-JavaScript-Object (POJO).
Az AngularJS alkalmas matematikai kifejezések kiértékelésére. Ezzel, azt is ellenőrizhetjük, hogy helyesen linkeltük-e az AngularJS keretrendszert.
A kiértékelendő kifejezést, írjuk dupla kapcsos-zárójelek közzé, az alábbi mintának megfelelően.
<!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8" /> <title>Számítás</title> </head> <body> <div>{{3 * 5}}</div> <script src="http://code.angularjs.org/1.2.8/angular.min.js"></script> </body> </html>
Az Angular prefixum a
Az AngularJS moduláris felépítésű. Az alábbiakban felsoroljuk a használható modulokat. Minden modul külön .js kiterjesztésű állományt jelent. A fő, azaz a core modul, az angular.js.
A direktívák a HTML szótár kiegészítései, amelyek új viselkedési formákat engedélyeznek. Ez a technológia lehetővé teszi újrahasznosítható komponensek írását. Az AngularJS esetén a direktíva általában egy új HTML attribútum.
Kijelöli az AngularJS alkalmazás gyökerét.
<!doctype html> <html ng-app> <head> <script src="angular.js"></script> </head> <body> </body> </html>
A fenti példában a html elem összes tartalmára vonatkozik az AngularJS hatókör.
Ajánlott megadni a modul nevét.
<!doctype html> <html ng-app="parkolas"> <head> <script src="angular.js"></script> <script> var csoport = angular.module("parkolas", []); </script> </head> <body> </body> </html>
Az ngController direktívával szintén egy hatókört adunk meg. Az ngController mindig rendelkezik egy név értékkel.
Az ngBind direktíva segítségével egy elem tartalmát tudjuk megváltoztatni. Ugyanaz mint a kapcsos zárójeles forma, a {{kifejezés}}.
<!doctype html> <html ng-app="parkolas"> <head> <script src="angular.js"></script> <script> var parkolas = angular.module("parkolas", []); parkolas.controller("parkolasCtrl", function($scope) { $scope.appTitle = "Parkolás"; }); </script> </head> <body ng-controller="parkolasCtrl"> <h3 ng-bind="appTitle"></h3> </body> </html>
Az ngBindHtml direktíva használatához szükség van a ngSanitize modulra.
Az ngBindHtml direktíva segítségével egy elem tartalmát tudjuk megváltoztatni, mint a ngBind esetén, azonban a tartalomban itt szerepelhetnek HTML elemek is.
<!doctype html> <html ng-app="parkolas"> <head> <script src="angular.js"></script> <script src="angular-sanitize.js"></script> <script> var parkolas = angular.module("parkolas", ['ngSanitize']); parkolas.controller("parkolasCtrl", function($scope) { $scope.appTitle = "<i>Parkolás<i>"; }); </script> </head> <body ng-controller="parkolasCtrl"> <h3 ng-bind-html="appTitle"></h3> </body> </html>
<!doctype html> <html ng-app="parkolas"> <head> <script src="angular.min.js"></script> <script> var parkolas = angular.module("parkolas", []); parkolas.controller("parkolasCtrl", function($scope) { $scope.kocsik = [ "ABC-123", "DCE-456" ]; }); </script> </head> <body ng-controller="parkolasCtrl"> <ul> <li ng-repeat="kocsi in kocsik" ng-bind="kocsi"></li> </ul> </body> </html>
Az asszociatív tartalommal kiegészített tömb:
<!doctype html> <html ng-app="parkolas"> <head> <script src="angular.min.js"></script> <script> var parkolas = angular.module("parkolas", []); parkolas.controller("parkolasCtrl", function($scope) { $scope.kocsik = [ {rendszam: "ABC-123", tulaj: "Nagy János"}, {rendszam: "DCE-456", tulaj: "Erős Béla"} ]; }); </script> </head> <body ng-controller="parkolasCtrl"> <table> <tr ng-repeat="kocsi in kocsik"> <td>{{kocsi.rendszam}}</td><td>{{kocsi.tulaj}}</td> </tr> </table> </body> </html>
Az ngModel direktíva egy elemet egy tulajdonsághoz csatol a hatókörben. Tulajdonképpen a nézet és a modell összekapcsolása.
A direktívát input, select és textarea elemeknél használjuk.
<input type="text" ng-model="nev"> <div>{{nev}}</div>
vagy:
<input type="text" ng-model="nev"> <div ng-bind="nev"></div>
<button ng-click="parkol(kocsi)">Parkolás</button>
Esemény direktívák:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>SWBin</title> <script src="http://code.angularjs.org/1.3.15/angular.min.js"></script> </head> <body ng-app> Szám: <input type="text" ng-model="szam"> <button ng-click="eredmeny = szam * 2; szam = '';">Dupla</button> <div ng-bind="eredmeny"></div> </body> </html>
Lehet így is:
<input type="text" ng-model="szam"> <button ng-disabled="!szam">Mehet</button>
Nem engedélyezi a nyomógombot mindaddig, amíg üres az input mező.
<input type="checkbox" ng-model="masCim">A levelezési cím eltér<br> <label>Település</label> <input type="text" ng-disabled="!masCim"><br> <label>Cím</label> <input type="text" ng-disabled="!masCim">
Teljes kód:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ngDisable</title> <script src="https://code.angularjs.org/1.8.2/angular.js"></script> </head> <body ng-app=""> <input type="checkbox" ng-model="masCim">A levelezési cím eltér<br> <label>Település</label> <input type="text" ng-disabled="!masCim"><br> <label>Cím</label> <input type="text" ng-disabled="!masCim"> </body> </html>
Osztály beállítása egy elem számára:
<!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8"> <title>SWBin</title> <script src="https://code.angularjs.org/1.8.2/angular.js"></script> <style> .egy { background-color: orange; } </style> </head> <body> <div ng-class="'egy'">aaaaaa</div> </body> </html>
Beállítás select űrlapelemmel:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ngDisable</title> <script src="https://code.angularjs.org/1.8.2/angular.js"></script> <style> .egy { background-color: lightblue; color:white; } .ketto { background-color: orange; color: black; } </style> </head> <body ng-app=""> <select ng-model="vmi"> <option>egy</option> <option>ketto</option> </select> <p ng-class="vmi">Valami</p> </body> </html>
Az ngOptions direktíva <select> elemek feltöltésére szolgál <option> elemekkel. Ezt megtehetjük a ngRepeat direktívával i, viszont az ngOptions jobb teljesítményt nyújt sok elem esetén, mivel a ngRepeat mind egyes iterációhoz új hatókört hoz létre. Az ngOtpions ugyanakkor rugalmasabb felhasználást teszt lehetővé.
<!DOCTYPE html> <html ng-app="egyApp"> <head> <meta charset="utf-8"> <title>ngOptions</title> <script src="https://code.angularjs.org/1.8.2/angular.js"></script> <script> var egyApp = angular.module('egyApp', []); egyApp.controller('egyCtrl', function($scope){ $scope.dolgozok = [ {id: 1, nev: "Kérő Lajos"}, {id: 2, nev: "Adó Elemér"}, {id: 2, nev: "Ferge Imre"} ]; }); </script> </head> <body ng-controller="egyCtrl"> <select ng-model="valasztottDolgozo" ng-options="dolgozo.nev for dolgozo in dolgozok"> </select> <div>{{valasztottDolgozo.id}}</div> <div>{{valasztottDolgozo.nev}}</div> </body> </html>
Az ngRepeat a kiválasztás során egy stringet ad vissza, az ngOptions viszont az egész objektumot.
<select ng-model="valasztottDolgozo"> <option ng-repeat="dolgozo in dolgozok" value="{{dolgozo.id}}">{{dolgozo.nev}} </option> </select> <p>{{valasztottDolgozo}}</p>
<select ng-model="valasztottDolgozo" ng-options="dolgozo.name form dolgozo in dolgozok"> </select> <p>{{valasztottDolgozo.id}}</p> <p>{{valasztottDolgozo.nev}}</p>
Az ngOptions direkt legördülő listadobozok használatára tervezték.
<div ng-show="true">alma</div>
<!doctype html> <html ng-app="egyApp"> <head> <meta charset="utf-8"> <title>SWBin</title> <script src="http://code.angularjs.org/1.2.8/angular.min.js"></script> <script> var egyApp = angular.module('egyApp', []); egyApp.controller('egyCtrl', function($scope){ $scope.dolgozok = [ "Jóska", "körte", "szilva" ]; }); </script> </head> <body ng-controller="egyCtrl"> <div ng-show="dolgozok.length > 0">Vannak elemek</div> <div ng-hide="dolgozok.length > 0">Nincs elem</div> </body> </html>
Az ngIf direktíva megegyezik a ngShow direktíva működésével.
<!DOCTYPE html> <html ng-app> <head> <title>Angular</title> <meta charset="UTF-8"> <script src="http://code.angularjs.org/1.2.8/angular.min.js"></script> </head> <body> <div ng-include="'ketto.html'"></div> </body> </html>
<p>Kettes fájl</p>
Az ngInclude direktívával beemelt $scope-ra nem hivatkozhatunk a megszokott módon, ugyanis abban egy gyermek $scope jön létre.
<p ng-model="bekezdes1">Kettes fájl</p>
A példában a $scope.bekezdes1 nem érhető el a kontrollból. Egyik megoldás lehet ha megmondjuk a ketto.html állományban, hogy a szülő $scope-hoz szeretnénk kötni a bekezdes1 modellt:
<p ng-model="$parent.bekezdes1">Kettes fájl</p>
<body ng-app ng-init="vezetekNev = 'Szabo'; keresztNev = 'Janos';"> <div>{{vezetekNev}}</div> <div ng-bind="keresztNev"></div> <input type="text" ng-model="vezetekNev">
Itt a script elemeknek HTML oldal végén kell lennie.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>SWBin</title> </head> <body> <div ng-controller="egyCtrl"> <div>{{gyumolcs}}</div> </div> <script src="http://code.angularjs.org/1.3.15/angular.min.js"></script> <script> var egyApp = angular.module('egyApp', []); egyApp.controller('egyCtrl', function($scope){ $scope.gyumolcs = "szilva"; }); angular.bootstrap(document, ['egyApp']); </script> </body> </html>
{{ "aBcD" | lowercase }}
{{ "aBcD" | uppercase }}
<li ng-repeat="dolgozo in dolgozok | orderBy:'telepules'"> {{ dolgozo.nev + ', ' + dolgozo.telepules }} </li>
<input type="text"
name="user"
ng-model="user"
placeholder="Felhasználónév"
ng-required="true">
<input type="text"
name="user"
ng-model="user"
placeholder="Felhasználónév"
ng-required="true"
ng-minlength="6"
ng-maxlength="20"
>
<input type="text"
name="user"
ng-model="user"
placeholder="Felhasználónév"
ng-required="true"
ng-minlength="6"
ng-maxlength="20"
ng-pattern="/[a-zA-Z0-9]{6,20}/"
>
Az ng-click attribútum használatával, egy elemhez eseményfigyelést tudunk hozzárendelni.
<!DOCTYPE html> <html ng-app> <head> <script src="http://code.angularjs.org/1.2.8/angular.min.js"></script> <meta charset=utf-8 /> <title>Egyszerű klikk</title> </head> <body> <div ng-click="eredmeny = 3 * 5">Számít</div> <div>{{eredmeny}}</div> </body> </html>
<!doctype html> <html ng-app="egyApp"> <head> <meta charset="utf-8"> <title>SWBin</title> <script src="http://code.angularjs.org/1.3.9/angular.min.js"></script> </head> <body ng-controller="egyCtrl"> <input type="text" ng-model="szam"><br> <button ng-click="szamit()">Dupla</button> <script> var app = angular.module('egyApp',[]); var ctrl = app.controller('egyCtrl', function($scope){ $scope.szamit = function() { $scope.szam = $scope.szam * 2; } }); </script> </body> </html>
<div id="ketto" ng-app="egyApp" ng-controller="egyCtrl"> <div ng-click="szamit()">Számít</div> <div>{{eredmeny}}</div> </div> <script src="http://code.angularjs.org/1.3.9/angular.min.js"></script> <script> var egy = angular.module("egyApp", []); egy.controller("egyCtrl", function($scope) { $scope.szamit = function() { $scope.eredmeny = 35; } }); </script>
<!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title>SWBin</title> <script src="http://code.angularjs.org/1.3.9/angular.min.js"></script> </head> <body> <div ng-click="ez=true">Rejt</div> <div ng-hide="ez">alma</div> </body> </html>
<!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title>SWBin</title> <script src="http://code.angularjs.org/1.3.9/angular.min.js"></script> </head> <body> <button ng-click="ez=true">Rejt</button> <button ng-click="ez=false">Mutat</button> <div ng-hide="ez">alma</div> </body> </html>
<!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title>SWBin</title> <script src="http://code.angularjs.org/1.3.9/angular.min.js"></script> </head> <body> <button ng-click="doboz='egy'">Első</button> <button ng-click="doboz='ketto'">Második</button> <div ng-switch="doboz"> <div ng-switch-when="egy"> Első </div> <div ng-switch-when="ketto"> Második </div> <div ng-switch-default> Alap </div> </div> </body> </html>
<!doctype html> <html ng-app="csoport"> <head> <meta charset="utf-8"> <title>SWBin</title> </head> <body ng-controller="csoportCtrl"> <h3>Csoport tagok</h3> <table> <thead> <tr> <th></th> </tr> </thead> <tbody> <tr ng-repeat="tag in tagok"> <td>{{tag.nev}}</td> </tr> </tbody> </table> <input type="text" ng-model="tag.nev"> <button ng-click="add(tag)">Hozzáad</button> <script src="http://code.angularjs.org/1.3.9/angular.min.js"></script> <script> var csoport = angular.module("csoport", []); csoport.controller("csoportCtrl", function($scope){ $scope.tagok = [ {nev: 'Jóska'}, {nev: 'Pista'}, {nev: 'Kati'}, {nev: 'Mari'} ]; $scope.add = function(tag) { $scope.tagok.push(angular.copy(tag)); delete $scope.tag; } }); </script> </body> </html>