Form Gönderme Örneği ile AngularJS ng-submit

By: James Hartman James Hartman
Hours Güncellenmiş

AngularJS ng-gönderme Yönergesi

The ng-gönder AngularJS'deki yönerge, uygulamayı tarayıcının gönderme olayına bağlamak için kullanılır. Yani şu durumda angularjs gönder olayında denetleyicinin kendisinde bazı işlemler gerçekleştirebilir ve ardından işlenen bilgileri kullanıcıya görüntüleyebilirsiniz.

Ng-submit kullanarak AngularJS'de Form Nasıl Gönderilir

Bir web sayfasında bilgi gönderme işlemleri normalde web tarayıcısındaki gönder olayı tarafından gerçekleştirilir. Bu olay normalde kullanıcının bir web sayfasına girmiş olabileceği oturum açma kimlik bilgileri, form verileri vb. gibi daha ileri işlemler için sunucuya bilgi göndermek için kullanılır. Bilgilerin gönderilmesi GET veya POST isteği yoluyla yapılabilir.

AngularJS'de formların nasıl gönderileceğini görmek için Angular form gönderme örneğini ele alalım.

AngularJS form submit örneğimizde, kullanıcıya öğrenmek istediği konuyu girebileceği bir textbox sunacağız. Sayfada, basıldığında konuyu sıralanmamış bir listeye ekleyecek bir submit butonu olacak.

AngularJS'de ng-submit kullanarak bir Form gönderin
AngularJS'de ng-submit kullanarak Form Gönderme

AngularJS Form Gönderimi Örneği

Şimdi, ng-submit direktifini kullanarak Denetleyiciden AngularJS form gönderiminin bir örneğini göreceğiz:

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body  ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">

    <form ng-submit="Display()">
        &nbsp;&nbsp;&nbsp;
        Enter which topic you would like to learn
        <input type="text"  ng-app="sampleApp" ng-model="Topic"><br>

        <input type="submit" value="Submit"/>

        <ul ng-repeat="topicname in AllTopic">
            <li>{{topicname}}</li>
        </ul>
    </form>
</div>

<script>
   var sampleApp = angular.module("sampleApp",[]);

    sampleApp.controller("AngularController",function($scope) {
        $scope.AllTopic=[];
        $scope.Display = function () {
            $scope.AllTopic.push($scope.Topic);
        }
    });
</script>
</body>
</html>

Kod Açıklaması:

  1. Öncelikle, Angular form submit olay örneğinde gösterildiği gibi “metin kutusu” ve “gönder düğmesi” denetimini tutacak form HTML etiketimizi bildiriyoruz. Daha sonra, “Display()” işlevini formumuza bağlamak için ngsubmit Angular yönergesini kullanıyoruz. Bu işlev denetleyicimizde tanımlanacak ve form gönderildiğinde çağrılacak.
  2. Kullanıcının öğrenmek istediği Konuyu gireceği bir metin kontrolümüz var. Bu, denetleyicimizde kullanılacak 'Konu' adlı bir değişkene bağlanacaktır.
  3. AngularJS'de kullanıcının istediği konuya girdiğinde tıklayacağı normal gönder butonu bulunmaktadır.
  4. Kullandık ng-tekrar Kullanıcının girdiği konuların liste öğelerini görüntüleme yönergesi. Ng-repeat yönergesi 'AllTopic' dizisindeki her konuyu inceler ve konu adını buna göre görüntüler.
  5. Denetleyicimizde 'AllTopic' adında bir dizi değişkeni bildiriyoruz. Bu, kullanıcı tarafından Adım 2'de girilen tüm konuları tutmak için kullanılacaktır.
  6. Kullanıcı Gönder butonuna tıkladığında çağrılacak olan Display() fonksiyonumuzun kodunu tanımlıyoruz. Burada, kullanıcı tarafından 'Konu' değişkeni aracılığıyla girilen Konuları 'AllTopic' dizimize eklemek için push dizi fonksiyonunu kullanıyoruz.

AngularJS form örnek kodu başarılı bir şekilde yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:

AngularJS'de Form Gönderin

Kodun çalıştığını görmek için öncelikle yukarıda gösterildiği gibi metin kutusuna “Angular” gibi bir Konu adı girin ve ardından Gönder butonuna tıklayın.

AngularJS'de Form Gönderin

  • Gönder butonuna tıkladıktan sonra metin kutusuna girilen öğenin öğeler listesine eklendiğini göreceksiniz.
  • Bu, gönder düğmesine basıldığında çağrılan Display() işleviyle gerçekleştirilir.
  • Display() işlevi, metni 'AllTopic' adlı dizi değişkenine ekler. Ve ng-repeat direktifimiz 'AllTopic' dizi değişkenindeki her değeri inceler ve bunları buna göre liste öğeleri olarak görüntüler.

ÖZET

  • AngularJS'de form gönderimi için kullanıcı tarafından girilen girdiyi işlemek için "ng-submit" direktifi kullanılır.
  • Bir web sayfasında bilgi gönderme işlemleri normalde web tarayıcısındaki gönder olayı tarafından gerçekleştirilir.
  • Bilgilerin gönderilmesi GET veya POST isteği yoluyla yapılabilir.
  • Display() işlevi, metni 'AllTopic' adlı dizi değişkenine ekler.