szit

Felhasználói eszközök

Eszközök a webhelyen

Itt vagy: start » oktatas » web » angularjs » angularjs_keretrendszer
Nyomvonal: • angularjs_keretrendszer
oktatas:web:angularjs:angularjs_keretrendszer

Tartalomjegyzék

< AngularJS

AngularJS keretrendszer

  • Szerző: Sallai András
  • Copyright © 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

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. 

<!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>

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. 

<!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íva

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

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>

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

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>

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.

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>

Az ngRepeat direktíva

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>

Az asszociatív tartalommal kiegészített tömb:

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>

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. 

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

vagy: 

<input type="text" ng-model="nev">
<div ng-bind="nev"></div>

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

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

Esemény direktívák:

  • ngClick
  • ngBlur
  • ngChange
  • ngCopy
  • ngCut
  • ngDblClick
  • ngFocus
  • ngKeyPress
  • ngKeyDown
  • ngKeyUp
  • ngMousedown
  • ngMouseenter
  • ngMouseleave
  • ngMousemove
  • ngMouseover
  • ngMouseup
  • ngPaste
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>

Lehet így is:

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

Az ngDisable direktíva

<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:

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>

Az ngClass direktíva

Osztály beállítása egy elem számára:

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>

Beállítás select űrlapelemmel:

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>

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

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>

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. 

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

Az ngStyle direktíva

<div ng-style="{'background-color': 'orange'}">alma</div>

Az ngShow és ngHide direktíva

<div ng-show="true">alma</div>
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>

Az ngIf direktíva

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

Az ngInclude direktíva

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

ketto.html
<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:

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

Az ngInit direktíva

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

Az ngBootstrap direktíva

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

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>

Szűrők

{{ "aBcD" | lowercase }}
{{ "aBcD" | uppercase }}
<li ng-repeat="dolgozo in dolgozok | orderBy:'telepules'">
    {{ dolgozo.nev + ', ' + dolgozo.telepules }}
</li>

Űrlapok érvényessége

Alapok

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

Kattintás

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>

Modul és kontroller

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

Rejt

<!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>

Rejt és mutat

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>

Vált

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>

Kötés

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>

Függelék

Dolgozók példa

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>
oktatas/web/angularjs/angularjs_keretrendszer.txt · Utolsó módosítás: 2021/03/25 22:05 szerkesztette: admin