szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:angularjs|< AngularJS]]

====== AngularJS keretrendszer ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2013, 2014, 2015, 2017, 2021
  * Licenc: GNU Free Documentation License 1.3
  * Web: https://szit.hu

===== Bevezetés =====

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). 



===== Beszerzés =====

  * https://angularjs.org/
  * https://docs.angularjs.org/

===== Egyszerű számítás =====

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.

<code html>
<!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>
</code>

===== AngularJS API =====

==== Az AgnularJS objektumai ====

<html>
Az Angular prefixum a <m>$</m> és a <m>$$</m> karakter. Az ütközések elkerülése érdekében
az Angular bevezette a két prefixumot. A <m>$</m> karakter publikus objektumok esetén,
duplázva a két dollárjel <m>$$</m> a privát objektumok esetén használatos. 
Ezért kerüljük ezeknek a prefixumoknak a használatát a saját kódunkban.
</html>


==== Modulok ====

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.

=== Az ng core modul ===
  * direktívák
  * szolgáltatások és gyártók
  * szűrők
  * globális API

=== ngRoute ===
  * szolgáltatások és gyártók
  * direktívák

=== ngAnimate ===
  * szolgáltatások és gyártók
  * CSS alapú animáció
  * JS alapú animáció

=== ngAria ===
  * szolgáltatások

=== ngResource ===
  * szolgáltatások és gyártók

=== ngCookies ===
  * szolgáltatások és gyártók

=== ngTouch ===
  * szolgáltatások és gyártók
  * direktívák

=== ngSanitize ===
  * szolgáltatások és gyártók
  * szűrők

=== ngMock ===
  * szolgáltatások és gyártók
  * globális API


===== Direktívák =====
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. 

==== Az ngApp direktíva ====

Kijelöli az AngularJS alkalmazás gyökerét.

<code html>
<!doctype html>
<html ng-app>
<head>
<script src="angular.js"></script>
</head>
<body>
</body>
</html>
</code>

A fenti példában a html elem összes tartalmára vonatkozik az
AngularJS hatókör. 

Ajánlott megadni a modul nevét. 
<code html>
<!doctype html>
<html ng-app="parkolas">
<head>
<script src="angular.js"></script>
<script>
  var csoport = angular.module("parkolas", []);
</script>
</head>
<body>
</body>
</html>
</code>
==== Az ngController direktíva ====

Az ngController direktívával szintén egy hatókört adunk meg.
Az ngController mindig rendelkezik egy név értékkel. 


<code html index.html>
<!doctype html>
<html ng-app="parkolas">
<head>
<script src="angular.js"></script>
<script>
var parkolas = angular.module("parkolas", []);
parkolas.controller("parkolasCtrl", function($scope) {
    
});
</script>
</head>
<body ng-controller="parkolasCtrl">
</body>
</html>
</code>

==== Az ngBind direktíva ====
Az ngBind direktíva segítségével egy elem tartalmát tudjuk
megváltoztatni. Ugyanaz mint a kapcsos zárójeles forma, a <nowiki>{{kifejezés}}</nowiki>.

<code html index.html>
<!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>
</code>

==== Az ngBindHtml direktíva ====
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.


<code html index.html>
<!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>
</code>
==== Az ngRepeat direktíva ====

<code html index.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>
</code>



Az asszociatív tartalommal kiegészített tömb: 
<code html index.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 = [
    {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>
</code>

==== Az ngModel direktíva ====
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. 

<code html>
<input type="text" ng-model="nev">
<div>{{nev}}</div>
</code>

vagy:
<code html>
<input type="text" ng-model="nev">
<div ng-bind="nev"></div>
</code>

==== Az ngClick és más eseménydirektívák ====

<code>
<button ng-click="parkol(kocsi)">Parkolás</button>
</code>


Esemény direktívák:
  * ngClick
  * ngBlur
  * ngChange
  * ngCopy
  * ngCut
  * ngDblClick
  * ngFocus
  * ngKeyPress
  * ngKeyDown
  * ngKeyUp
  * ngMousedown
  * ngMouseenter
  * ngMouseleave
  * ngMousemove
  * ngMouseover
  * ngMouseup
  * ngPaste

<code html index.html>
<!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>
</code>

Lehet így is:
<code html index.html>
Szám: <input type="text" ng-model="szam">
<button ng-click="szam = szam * 2">Dupla</button>
<div ng-bind="eredmeny"></div>
</code>

==== Az ngDisable direktíva ====

<code html>
<input type="text" ng-model="szam">
<button ng-disabled="!szam">Mehet</button>
</code>
Nem engedélyezi a nyomógombot mindaddig,
amíg üres az input mező.


<code html>
<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">
</code>

Teljes kód:
<code html index.html>
<!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>
</code>

==== Az ngClass direktíva ====
Osztály beállítása egy elem számára:

<code html index.html>
<!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>
</code>

Beállítás select űrlapelemmel:

<code html index.html>
<!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>
</code>

==== Az ngOptions direktíva ====

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é.

<code html index.html>
<!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>
</code>

=== Különbség az ngRepeat és az ngOptions között ===

Az ngRepeat a kiválasztás során egy stringet ad vissza,
az ngOptions viszont az egész objektumot.

<code html>
<select ng-model="valasztottDolgozo">
  <option ng-repeat="dolgozo in dolgozok" 
  value="{{dolgozo.id}}">{{dolgozo.nev}}
  </option>
</select>
<p>{{valasztottDolgozo}}</p>
</code>

<code html>
<select ng-model="valasztottDolgozo"
  ng-options="dolgozo.name form dolgozo in dolgozok">
</select>
<p>{{valasztottDolgozo.id}}</p>
<p>{{valasztottDolgozo.nev}}</p>
</code>

Az ngOptions direkt legördülő listadobozok használatára 
tervezték.
==== Az ngStyle direktíva ====

<code html>
<div ng-style="{'background-color': 'orange'}">alma</div>
</code>
==== Az ngShow és ngHide direktíva ====


<code html>
<div ng-show="true">alma</div>
</code>

<code html index.html>
<!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>
</code>

==== Az ngIf direktíva ====
Az ngIf direktíva megegyezik a ngShow direktíva működésével.

==== Az ngInclude direktíva ====

<code html index.html>
<!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>
</code>



<code html ketto.html>
<p>Kettes fájl</p>
</code>


Az ngInclude direktívával beemelt $scope-ra nem hivatkozhatunk
a megszokott módon, ugyanis abban egy gyermek $scope jön létre.

<code html ketto.html>
<p ng-model="bekezdes1">Kettes fájl</p>
</code>

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:

<code html ketto.html>
<p ng-model="$parent.bekezdes1">Kettes fájl</p>
</code>

==== Az ngInit direktíva ====

<code html>
<body ng-app ng-init="vezetekNev = 'Szabo'; keresztNev = 'Janos';">
<div>{{vezetekNev}}</div>
<div ng-bind="keresztNev"></div>
<input type="text" ng-model="vezetekNev">
</code>

==== Az ngBootstrap direktíva ====

Itt a script elemeknek HTML oldal végén kell lennie.

<code html index.html>
<!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>
</code>

===== Szűrők =====

<code>
{{ "aBcD" | lowercase }}
</code>

<code>
{{ "aBcD" | uppercase }}
</code>

<code html>
<li ng-repeat="dolgozo in dolgozok | orderBy:'telepules'">
    {{ dolgozo.nev + ', ' + dolgozo.telepules }}
</li>
</code>
===== Űrlapok érvényessége =====
==== Alapok ====

<code>
<input type="text" 
       name="user"
       ng-model="user"
       placeholder="Felhasználónév"
       ng-required="true">
</code>


<code>
<input type="text" 
       name="user"
       ng-model="user"
       placeholder="Felhasználónév"
       ng-required="true"
       ng-minlength="6"
       ng-maxlength="20"
       >
</code>


<code>
<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}/"
       >
</code>

===== Kattintás =====

Az ng-click attribútum használatával, egy elemhez eseményfigyelést 
tudunk hozzárendelni. 

<code html>
<!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>
</code>
===== Modul és kontroller =====

<code html index.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>
</code>




<code 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>
</code>

===== Rejt =====

<code 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>
  <div ng-click="ez=true">Rejt</div>  
  <div ng-hide="ez">alma</div>  
  
</body>
</html>
</code>

===== Rejt és mutat =====

<code html index.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>
</code>

===== Vált =====

<code html index.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>
</code>
===== Kötés =====

<code html index.html>
<!doctype html>
<html>
<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-app>
    Név: <input type="text" ng-model="data.name"><br>
    <p>Üdv: {{data.name}}</p>
  
  </div>
  
</body>
</html>
</code>



===== Függelék =====
==== Dolgozók példa ====

<code html index.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>
</code>