AngularJS - İlk Uygulama

Gerçek Merhaba Dünya oluşturmadan önce ! AngularJS kullanarak uygulama, AngularJS uygulamasının bölümlerini görelim. Bir AngularJS uygulaması aşağıdaki üç önemli bölümden oluşur -

ng-app - Bu yönerge bir AngularJS uygulamasını HTML'ye bağlar ve tanımlar.
ng-model - Bu yönerge, AngularJS uygulama verilerinin değerlerini HTML giriş kontrollerine bağlar.
ng-bind - Bu yönerge, AngularJS Uygulaması verilerini HTML etiketlerine bağlar.

AngularJS Uygulaması Oluşturma

Adım 1: Çerçeve yükleyin

Saf bir JavaScript çerçevesi olduğundan, <Script> etiketi kullanılarak eklenebilir.

<script 
   src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

Adım 2: ng-app direktifini kullanarak AngularJS uygulamasını tanımlayın

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

Adım 3: ng-model direktifini kullanarak bir model adı tanımlayın

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

Adım 4: Yukarıdaki modelin ng-bind yönergesi kullanılarak tanımlanan değerini bağlayın

<p>Hello <span ng-bind = "name"></span>!</p>

AngularJS Uygulamasını Yürütme

Bir HTML sayfasında yukarıda belirtilen üç adımı kullanın.

testAngularJS.htm

<html>
   <head>
      <title>AngularJS First Application</title>
   </head>
   
   <body>
      <h1>Sample Application</h1>
      
      <div ng-app = "">
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
      </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.

AngularJS HTML ile Nasıl Bütünleşir?

Ng-app direktifi, AngularJS uygulamasının başladığını belirtir.
Ng-model yönergesi, HTML sayfasıyla ve ng-app yönergesine sahip div içinde kullanılabilen name adında bir model değişkeni oluşturur.
Ng-bind daha sonra kullanıcı metin kutusuna girdi girdiğinde HTML <span> etiketinde görüntülenecek ad modelini kullanır.
Kapanış </div> etiketi, AngularJS uygulamasının sonunu belirtir.