[[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. Számítás
{{3 * 5}}
 ===== AngularJS API ===== ==== Az AgnularJS objektumai ==== Az Angular prefixum a $ és a $$ karakter. Az ütközések elkerülése érdekében az Angular bevezette a két prefixumot. A $ karakter publikus objektumok esetén, duplázva a két dollárjel $$ 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. ==== 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. A fenti példában a html elem összes tartalmára vonatkozik az AngularJS hatókör. Ajánlott megadni a modul nevét. ==== 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. ==== 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 {{kifejezés}}.

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

==== Az ngRepeat direktíva ==== Az asszociatív tartalommal kiegészített tömb:
{{kocsi.rendszam}}{{kocsi.tulaj}}
==== 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.
{{nev}}
 vagy:
==== Az ngClick és más eseménydirektívák ==== Esemény direktívák: * ngClick * ngBlur * ngChange * ngCopy * ngCut * ngDblClick * ngFocus * ngKeyPress * ngKeyDown * ngKeyUp * ngMousedown * ngMouseenter * ngMouseleave * ngMousemove * ngMouseover * ngMouseup * ngPaste SWBin Szám:
Lehet így is: Szám:
==== Az ngDisable direktíva ==== Nem engedélyezi a nyomógombot mindaddig, amíg üres az input mező. A levelezési cím eltér

 Teljes kód: ngDisable A levelezési cím eltér

 ==== Az ngClass direktíva ==== Osztály beállítása egy elem számára: SWBin
aaaaaa
 Beállítás select űrlapelemmel: ngDisable

Valami

 ==== Az ngOptions direktíva ==== Az ngOptions direktíva
{{valasztottDolgozo.id}}
{{valasztottDolgozo.nev}}
=== 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.

{{valasztottDolgozo}}

{{valasztottDolgozo.id}}

{{valasztottDolgozo.nev}}

 Az ngOptions direkt legördülő listadobozok használatára tervezték. ==== Az ngStyle direktíva ====
alma
 ==== Az ngShow és ngHide direktíva ====
alma
 SWBin
Vannak elemek
Nincs elem
 ==== Az ngIf direktíva ==== Az ngIf direktíva megegyezik a ngShow direktíva működésével. ==== Az ngInclude direktíva ==== Angular

Kettes fájl

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

Kettes fájl

 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:

Kettes fájl

 ==== Az ngInit direktíva ====
{{vezetekNev}}
 ==== Az ngBootstrap direktíva ==== Itt a script elemeknek HTML oldal végén kell lennie. SWBin
{{gyumolcs}}
 ===== Szűrők ===== {{ "aBcD" | lowercase }} {{ "aBcD" | uppercase }}
  • {{ dolgozo.nev + ', ' + dolgozo.telepules }}
    • ===== Űrlapok érvényessége ===== ==== Alapok ==== ===== Kattintás ===== Az ng-click attribútum használatával, egy elemhez eseményfigyelést tudunk hozzárendelni. Egyszerű klikk
    Számít
    {{eredmeny}}
     ===== Modul és kontroller ===== SWBin
    Számít
    {{eredmeny}}
     ===== Rejt ===== SWBin
    Rejt
    alma
     ===== Rejt és mutat ===== SWBin
    alma
     ===== Vált ===== SWBin
    Első
    Második
    Alap
    ===== Kötés ===== SWBin
    Név:

    Üdv: {{data.name}}

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

    Csoport tagok
    {{tag.nev}}