AngularJS - Yönergeler

AngularJS yönergeleri HTML'yi genişletmek için kullanılır. İle başlayan özel niteliklerdirng-önek. Aşağıdaki direktifleri tartışalım -

ng-app - Bu yönerge bir AngularJS Uygulaması başlatır.
ng-init - Bu yönerge, uygulama verilerini başlatır.
ng-model - Bu yönerge, AngularJS'de kullanılacak değişken olan modeli tanımlar.
ng-repeat - Bu yönerge, bir koleksiyondaki her öğe için HTML öğelerini tekrarlar.

ng-app direktifi

Ng-app direktifi bir AngularJS Uygulaması başlatır. Kök elemanı tanımlar. AngularJS Uygulamasını içeren web sayfası yüklendiğinde uygulamayı otomatik olarak başlatır veya önyükler. Ayrıca, AngularJS Uygulamasında çeşitli AngularJS modüllerini yüklemek için kullanılır. Aşağıdaki örnekte, bir <div> öğesinin ng-app özelliğini kullanarak varsayılan bir AngularJS uygulaması tanımlıyoruz.

<div ng-app = "">
   ...
</div>

ng-init direktifi

Ng-init direktifi bir AngularJS Uygulama verisini başlatır. Değişkenlere değer atamak için kullanılır. Aşağıdaki örnekte, bir dizi ülkeyi başlatıyoruz. Ülkeler dizisini tanımlamak için JSON sözdizimi kullanıyoruz.

<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, 
   {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
   ...
</div>

ng-model direktifi

Ng-model direktifi, AngularJS Uygulamasında kullanılacak modeli / değişkeni tanımlar. Aşağıdaki örnekte isim adında bir model tanımlıyoruz .

<div ng-app = "">
   ...
   <p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>

ng-tekrar yönergesi

Ng-tekrar yönergesi, bir koleksiyondaki her öğe için HTML öğelerini tekrarlar. Aşağıdaki örnekte, ülke dizisi üzerinde yineleme yapıyoruz.

<div ng-app = "">
   ...
   <p>List of Countries with locale:</p>
   
   <ol>
      <li ng-repeat = "country in countries">
         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
      </li>
   </ol>
</div>

Misal

Aşağıdaki örnek, yukarıda bahsedilen tüm direktiflerin kullanımını göstermektedir.

testAngularJS.htm

<html>
   <head>
      <title>AngularJS Directives</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, 
         {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> 
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
         <p>List of Countries with locale:</p>
      
         <ol>
            <li ng-repeat = "country in countries">
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
            </li>
         </ol>
      </div>
      
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
   </body>
</html>

Çıktı

Bir web tarayıcısında testAngularJS.htm dosyasını açın . Adınızı girin ve sonucu görün.