AngularJS Direktifleri: ng-init, ng-app, ng-model ve ng-repeat

By: James Hartman James Hartman
Hours GรผncellenmiลŸ

AngularJS'de Yรถnerge nedir?

A Yรถnerge AngularJS'de HTML'ye yeni iลŸlevler kazandฤฑran bir komuttur. Angular, HTML kodunu incelediฤŸinde, รถnce sayfadaki yรถnergeleri bulacak ve ardฤฑndan HTML sayfasฤฑnฤฑ buna gรถre ayrฤฑลŸtฤฑracaktฤฑr. Daha รถnceki bรถlรผmlerde gรถrdรผฤŸรผmรผz AngularJS direktifinin basit bir รถrneฤŸi โ€œng-model direktifidirโ€. Bu yรถnerge veri modelimizi gรถrรผnรผmรผmรผze baฤŸlamak iรงin kullanฤฑlฤฑr.

Not: `ng-init`, `ng-repeat` ve `ng-model` yรถnergelerini kullanarak, denetleyicilere ihtiyaรง duymadan HTML sayfasฤฑnda temel Angular koduna sahip olabilirsiniz. Bu yรถnergelerin mantฤฑฤŸฤฑ, `Angular.js` dosyasฤฑnda yer alฤฑr ve bu dosya `Angular.js` tarafฤฑndan saฤŸlanฤฑr. GoogleDenetleyiciler (controllers), iลŸ mantฤฑฤŸฤฑna olanak saฤŸlayan bir sonraki seviye Angular programlama yapฤฑlarฤฑdฤฑr, ancak belirtildiฤŸi gibi bir uygulamanฤฑn Angular uygulamasฤฑ olmasฤฑ iรงin denetleyiciye sahip olmasฤฑ zorunlu deฤŸildir.

AngularJS'de Direktifler Nasฤฑl OluลŸturulur

GiriลŸte tanฤฑmladฤฑฤŸฤฑmฤฑz gibi AngularJS direktifleri, AngularJS'in iลŸlevselliฤŸini geniลŸletmenin bir yoludur. HTML.

TanฤฑmlanmฤฑลŸ 4 direktif vardฤฑr. angularjs.

AลŸaฤŸฤฑda AngularJS direktiflerinin listesi ve bunlarฤฑn her birini aรงฤฑklamak iรงin saฤŸlanan รถrnekler yer almaktadฤฑr.

AngularJS'de ng-app

Bu, bir Angular.JS uygulamasฤฑnฤฑ baลŸlatmak iรงin kullanฤฑlฤฑr. Bu yรถnerge bir HTML sayfasฤฑna yerleลŸtirildiฤŸinde, temel olarak Angular'a bu HTML sayfasฤฑnฤฑn bir angular.js uygulamasฤฑ olduฤŸunu sรถyler.

Np-app รถrneฤŸi

AลŸaฤŸฤฑdaki รถrnek ng-app direktifinin nasฤฑl kullanฤฑlacaฤŸฤฑnฤฑ gรถstermektedir. Bu รถrnekte, normal bir HTML uygulamasฤฑnฤฑn nasฤฑl angularJS uygulamasฤฑna dรถnรผลŸtรผrรผleceฤŸini gรถstereceฤŸiz.

AngularJS'de ng-app

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="">

    Tutorial Name : {{ "Angular" + "JS"}}

</div>

</body>
</html>

Code Aรงฤฑklama:

  1. Bu uygulamanฤฑn bir angular.js uygulamasฤฑ olduฤŸunu belirtmek iรงin div etiketimize โ€œng-appโ€ direktifi eklenmiลŸtir. Ng-app direktifinin herhangi bir etikete uygulanabileceฤŸini, dolayฤฑsฤฑyla gรถvde etiketine de yerleลŸtirilebileceฤŸini unutmayฤฑn.
  2. Bu uygulamayฤฑ angular.js uygulamasฤฑ olarak tanฤฑmladฤฑฤŸฤฑmฤฑz iรงin artฤฑk angular.js iลŸlevselliฤŸinden faydalanabiliyoruz. Bizim durumumuzda, 2 dizeyi basitรงe birleลŸtirmek iรงin ifadeler kullanฤฑyoruz.

Kod baลŸarฤฑyla yรผrรผtรผlรผrse, kodunuzu tarayฤฑcฤฑda รงalฤฑลŸtฤฑrdฤฑฤŸฤฑnฤฑzda aลŸaฤŸฤฑdaki ร‡ฤฑktฤฑ gรถsterilecektir.

ร‡ฤฑktฤฑ:

AngularJS'de ng-app

ร‡ฤฑktฤฑ, yalnฤฑzca uygulamayฤฑ bir angularjs uygulamasฤฑ olarak tanฤฑmladฤฑฤŸฤฑmฤฑz iรงin mรผmkรผn olan ifadenin รงฤฑktฤฑsฤฑnฤฑ aรงฤฑkรงa gรถsterir.

AngularJS'de ng-init

Bu, uygulama verilerini baลŸlatmak iรงin kullanฤฑlฤฑr. Bazen uygulamanฤฑz iรงin bazฤฑ yerel verilere ihtiyaรง duyabilirsiniz, bu ng-init direktifi ile yapฤฑlabilir.

Ng-init รถrneฤŸi

AลŸaฤŸฤฑdaki รถrnek ng-init yรถnergesinin nasฤฑl kullanฤฑlacaฤŸฤฑnฤฑ gรถstermektedir.

Bu รถrnekte ng-init direktifini kullanarak โ€œTutorialNameโ€ adฤฑnda bir deฤŸiลŸken oluลŸturup o deฤŸiลŸkenin deฤŸerini sayfada gรถrรผntรผleyeceฤŸiz.

AngularJS'de ng-init

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

Code Aรงฤฑklama:

  1. โ€œTutorialNameโ€ isimli local deฤŸiลŸkeni tanฤฑmlamak iรงin div etiketimize ng-init direktifi ekleniyor ve buna verilen deฤŸer โ€œAngularJSโ€ oluyor.
  2. Ng-init direktifimizde tanฤฑmlanan โ€œTutorialNameโ€ deฤŸiลŸken adฤฑnฤฑn รงฤฑktฤฑsฤฑnฤฑ gรถrรผntรผlemek iรงin AngularJs'deki ifadeleri kullanฤฑyoruz.

Kod baลŸarฤฑyla yรผrรผtรผlรผrse, kodunuzu tarayฤฑcฤฑda รงalฤฑลŸtฤฑrdฤฑฤŸฤฑnฤฑzda aลŸaฤŸฤฑdaki ร‡ฤฑktฤฑ gรถsterilecektir.

ร‡ฤฑktฤฑ:

AngularJS'de ng-init

ร‡ฤฑktฤฑda,

  • Sonuรง, โ€œAngularJSโ€ dizesini iรงeren ifadenin รงฤฑktฤฑsฤฑnฤฑ aรงฤฑkรงa gรถsterir. Bu, ng-init bรถlรผmรผnde 'TutorialName' deฤŸiลŸkenine "AngularJS" dizesinin atanmasฤฑnฤฑn bir sonucudur.

ฤฐLGฤฐLฤฐ MAKALELER

AngularJS'de ng modeli

Ve son olarak, bir HTML kontrolรผnรผn deฤŸerini uygulama verilerine baฤŸlamak iรงin kullanฤฑlan ng-model direktifine sahibiz. AลŸaฤŸฤฑdaki รถrnek ng-model yรถnergesinin nasฤฑl kullanฤฑlacaฤŸฤฑnฤฑ gรถstermektedir.

Ng modeli รถrneฤŸi

Bu รถrnekte,

  • โ€œMiktarโ€ ve โ€œFiyatโ€ adฤฑnda 2 deฤŸiลŸken oluลŸturacaฤŸฤฑz. Bu deฤŸiลŸkenler 2 metin giriลŸ kontrolรผne baฤŸlanacaktฤฑr.
  • Daha sonra hem fiyat hem de miktar deฤŸerlerinin รงarpฤฑmฤฑna gรถre toplam tutarฤฑ gรถrรผntรผleyeceฤŸiz.

AngularJS'de ng modeli

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="quantity=1;price=5">

    People : <input type="number" ng-model="quantity">

    Registration Price : <input type="number" ng-model="price">

    Total : {{quantity * price}}

</div>

</body>
</html>

Code Aรงฤฑklama:

  1. 2 yerel deฤŸiลŸkeni tanฤฑmlamak iรงin div etiketimize ng-init yรถnergesi eklenir; birine โ€œmiktarโ€, diฤŸerine โ€œfiyatโ€ denir.
  2. ลžimdi โ€œKiลŸilerโ€ ve โ€œKayฤฑt รผcretiโ€ metin kutularฤฑnฤฑ sฤฑrasฤฑyla yerel deฤŸiลŸkenlerimiz โ€œmiktarโ€ ve โ€œfiyatโ€a baฤŸlamak iรงin ng-model yรถnergesini kullanฤฑyoruz.
  3. Son olarak, Toplamฤฑ, miktar ve fiyat deฤŸiลŸkenlerinin รงarpฤฑmฤฑ olan bir ifadeyle gรถsteriyoruz.

Kod baลŸarฤฑyla yรผrรผtรผlรผrse, kodunuzu tarayฤฑcฤฑda รงalฤฑลŸtฤฑrdฤฑฤŸฤฑnฤฑzda aลŸaฤŸฤฑdaki ร‡ฤฑktฤฑ gรถsterilecektir.

ร‡ฤฑktฤฑ:

AngularJS'de ng modeli

  • ร‡ฤฑktฤฑ, KiลŸi ve Kayฤฑt fiyatฤฑ deฤŸerlerinin รงarpฤฑmฤฑnฤฑ aรงฤฑkรงa gรถsterir.

ลžimdi metin kutularฤฑna gidip KiลŸi ve Kayฤฑt fiyatฤฑnฤฑn deฤŸerini deฤŸiลŸtirdiฤŸinizde Toplam otomatik olarak deฤŸiลŸecektir.

AngularJS'de ng modeli

  • Yukarฤฑdaki รงฤฑktฤฑ, angularJ'lerde veri baฤŸlamanฤฑn gรผcรผnรผ gรถsterir; bu, kullanฤฑmฤฑyla elde edilir. ng-model direktifi.

AngularJS'de ng-tekrar

Bu, bir HTML รถฤŸesini tekrarlamak iรงin kullanฤฑlฤฑr. AลŸaฤŸฤฑdaki รถrnek, nasฤฑl kullanฤฑlacaฤŸฤฑnฤฑ gรถsterir ng-tekrar direktifi.

Ng-tekrar รถrneฤŸi

Bu รถrnekte,

  • Bir dizi deฤŸiลŸkeninde bir dizi bรถlรผm adฤฑmฤฑz olacak ve
  • daha sonra dizinin her รถฤŸesini bir liste รถฤŸesi olarak gรถrรผntรผlemek iรงin ng-repeat yรถnergesini kullanฤฑn.

AngularJS'de ng-tekrar

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

Code Aรงฤฑklama:

  1. 3 string iรงeren bir dizi deฤŸiลŸkeni olan โ€œchaptersโ€ adฤฑ verilen bir deฤŸiลŸkeni tanฤฑmlamak iรงin div etiketimize ng-init direktifi eklenir.
  2. Ng-repeat รถฤŸesi, "isimler" adฤฑ verilen bir satฤฑr iรงi deฤŸiลŸkenin bildirilmesi ve bรถlรผmler dizisindeki her รถฤŸenin รผzerinden geรงilmesiyle kullanฤฑlฤฑr.
  3. Son olarak yerel satฤฑr iรงi deฤŸiลŸken 'names'in deฤŸerini gรถsteriyoruz.

Kod baลŸarฤฑyla yรผrรผtรผlรผrse, kodunuzu tarayฤฑcฤฑda รงalฤฑลŸtฤฑrdฤฑฤŸฤฑnฤฑzda aลŸaฤŸฤฑdaki ร‡ฤฑktฤฑ gรถsterilecektir.

ร‡ฤฑktฤฑ:

AngularJS'de ng-tekrar

  • Yukarฤฑdaki รงฤฑktฤฑ sadece ng-repeat direktifinin "bรถlรผmler" adฤฑ verilen dizideki her deฤŸeri aldฤฑฤŸฤฑnฤฑ ve dizideki her รถฤŸe iรงin HTML liste รถฤŸeleri oluลŸturduฤŸunu gรถsterir.

ร–ZET

  • Yรถnergeler HTML'nin iลŸlevselliฤŸini geniลŸletmek iรงin kullanฤฑlฤฑr. Angular aลŸaฤŸฤฑdaki gibi dahili yรถnergeler saฤŸlar:
    • ng-app โ€“ Bu, aรงฤฑsal bir uygulamayฤฑ baลŸlatmak iรงin kullanฤฑlฤฑr.
    • ng-init โ€“ Bu, uygulama deฤŸiลŸkenleri oluลŸturmak iรงin kullanฤฑlฤฑr
    • ng-model โ€“ Bu, HTML kontrollerini uygulama verilerine baฤŸlamak iรงin kullanฤฑlฤฑr
    • ng-repeat โ€“ ร–ฤŸeleri aรงฤฑsal kullanarak tekrarlamak iรงin kullanฤฑlฤฑr.

Bu yazฤฑyฤฑ ลŸu ลŸekilde รถzetleyin: