ANGULARJS FONKSİYON – METOT KULLANIMI

Fonksiyonların  tanımlandığı ve metot tanımlamalarının yapıldığı kısım, AngularJS MVC (Model-View-Controller) yapısının controller tarafıdır. View ve Model yapıları arasındaki bağlantı ile işlevselliğin sağlandığı kısımda gerekli fonksiyon-metot tanımlamaları yapılmaktadır. Örnek bir angular fonksiyonunu aşağıda yer alan kısımda görmektesiniz.

angular.copy () fonksiyonunun kullanıldığı basit bir angularJS uygulaması aşağıda yer almaktadır…

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <title>addClass copy demo </title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div ng-controller="ExampleController">
<form novalidate class="simple-form">
İsim: <input type="text" ng-model="user.name" /><br />
E-mail: <input type="email" ng-model="user.email" /><br />
Cisnsiyet: <input type="radio" ng-model="user.gender" value="male" />erkek
<input type="radio" ng-model="user.gender" value="female" />kadın<br />
<button ng-click="reset()">SIFIRLA</button>
<button ng-click="update(user)">KAYDET</button>
</form>
<pre>form = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>

<script>
 angular.module('copyExample', [])
   .controller('ExampleController', ['$scope', function($scope) {
     $scope.master= {};

     $scope.update = function(user) {
       // Example with 1 argument
       $scope.master= angular.copy(user);
     };

     $scope.reset = function() {
       // Example with 2 arguments
       angular.copy($scope.master, $scope.user);
     };

     $scope.reset();
   }]);
</script>
</body>
</html>

Bu verdiğim örneğe benzer bir içeriği bağlantıda paylaştığım yazının başında sizlerle paylaşmıştır :

http://www.tolgasariyildiz.com.tr/2016/11/21/angularjs-nedir/

Bir çok fonksiyonun kullanıldığı AngularJS front-end kısmında kodlama yapan  birçok web tasarımcısı ve web programcısına belli kolaylıklar sağlamaktadır. Bu yazımızda Controller kısmında yaygın olarak kullanılan ve kullanılması gerekli fonksiyonlardan bahsedeceğiz.

angular.element (*Önemli*) : 

Angular’da en önemli fonksiyonlardan biri olan angular.element() ile Jquery kütüphanesinde yer alan fonksiyonları (işlevleri) kullanabilmekteyiz. Böylece AngularJS framework yapısını kullanarak yapmamız gereken işlemleri projemize Jquery kütüphanesini dahil etmeden (AngularJS de bu işlevin nasıl sağlandığını bilmek ya da öğrenmek şartıyla) yapabilmekteyiz. Jquery kullanımını daha basit hale getiren, daha doğrusu üst düzey bir proje tasarımını sağlayan bu fonksiyonun işlevselliği JqLite olarak da isimlendirilmektedir. Literatürde daha çok bu isimle anılmaktadır.

angular,element() fonksiyonu içerisinde kullanabileceğimiz Jquery metotlarını anlamak adına bu yazımızda daha çok Jquery konusuna ağırlık verdik. İsterseniz bu metotların bir kısmını birlikte inceleyelim.

Angular jqLite – Kullanılan Başlıca Jquery Metotları 

addclass() :

İstediğiniz herhangi bir HTML etiketi içerisine sınıf ataması yapabilirsiniz. Örneğin seçtiğiniz “HTML” etiketi “<p>” olduğunu düşünelim. Aşağıdaki örnek kullanımda angular ve HTML kodlarını görmektesiniz.

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <title>addClass demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 16px;
  }
  .secilen {
    color: blue;
  }
  .uygula{
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Merhaba</p>
<p>Güzel</p>
<p>Dünya</p>
 
<script>
$( "p" ).last().addClass( "secilen" );
$( "p:first" ).addClass( "secilen uygula" );
</script>
 
</body>
</html>

Kodumuzun uygulandığı örnek için bu bağlantıyı tıklayınız

Yararlanılan İngilizce Kaynağın Bağlantısı için tıklayınız

after() :

Sınıf tanımlaması yapılan elemandan sonra herhangi başka bir element eklememize yardımcı olan fonksiyondur. DOM (Data Object Management) yapısı içerisinde gerekli elemanın seçilmesi ve bu elemandan sonra yeni bir elemanın web sayfasına eklenmesini sağlar. Aynı sınıfa sahip bütün elemanlardan sonra tanımlanan eleman eklenir. Çok kullanışlı olan bu fonksiyonun örnek kullanımını aşağıda görmektesiniz.

<!DOCTYPE html>
<html lang='tr'>
<head>
<meta charset='utf-8'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").after("<p>Merhaba Millet!</p>");
    });
});
</script>
</head>
<body>

<button> Tüm p etiketlerinden sonra yeni bir p etiketi ekle! </button>

<p>Bu bir paragraftır.</p>
<p>Bu da diğer paragraftır.</p>

</body>
</html>

Yararlanılan İngilizce Kaynağın Bağlantısı için tıklayınız

append() :

Sınıfı belirtilen HTML etiketi içeriğinin sonuna, yapısı parantezler içinde tanımlanmış olan içeriği eklemeye yarayan bir Jquery fonksiyonudur.  Yukarıda bahsettiğimiz metot dan farkı da budur. Değişiklik yapılması sıkıntı yaratabilecek uzun Html kodlarına sahip üst düzey bir web sitesi projesi içerisinde daha kısa sürede etiket eklememiz gerektiğinde bu metot bize büyük kolaylık sağlayabilmektedir.

<!DOCTYPE html>
<html lang='tr'>
<head>
<meta charset='utf-8'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append(" <b>Ben içeriğin sonuyum</b>.");
    });
    $("#btn2").click(function(){
        $("ol").append("<li>Liste Eleman</li>");
    });
});
</script>
</head>
<body>

<p>Bu bir paragraftır</p>
<p>Bu da diğer paragraftır</p>

<ol>
  <li>Liste Eleman</li>
  <li>Liste Eleman</li>
  <li>Liste Elemanı</li>
</ol>

<button id="btn1">P içeriğinin sonuna yeni içerik ekle</button>
<button id="btn2">Liste elemanlarının sonuna yeni eleman ekle</button>

</body>
</html>

attr() :

Attr() metodu jquery içerisinde işimize oldukça yarayan bir metot dur. Angular içerisinde de yer yer kullanılması gereken bu metodun işlevi ise belirtilen HTML etiketi içerisine parametre (attribute) ekleyebilmemizi  sağlamasıdır. HTML etiketi içerisinde “title,id,style,rel ” gibi parametre tanımlamaları yapabilmek için bu önemli metodu kullanabilmekteyiz.

<!DOCTYPE html>
<html lang='tr'>
<head>
<meta charset='utf-8'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").attr("width", "400");
    });
});
</script>
</head>
<body>

<img src="http://www.tolgasariyildiz.com.tr/wp-content/uploads/2015/12/angularjs-jquery.jpg" alt="Pulpit Rock" width="167" height="191"><br>

<button>Resim genişliğini arttır</button>

</body>
</html>
bind() :

HTML Markup sayfası üzerinde belirlenen eleman içerisine event handler(onclick,mousedown) yani olay yakalayıcılar (bir web sayfası üzerinde fare tıklaması,sayfanın aşağı-yukarı kaydırılması gibi aktiviteler olay olarak adlandırılır.) ataması yapabilmemize yarayan oldukça önemli bir jquery metodudur. Yazımızda angularjs konusundan biraz çıksak da bu bahsettiğimiz metot ve diğer tüm metot lar, tüm JS kütüphanelerinde ve MVC çatılarında kullanılan önemli metot lardır.

Konuyu daha iyi anlamak ya da anladıysak daha da pekiştirmek adına aşağıda yermiş olduğum koddan yararlanabilir,kodların uygulandığı basit örneğimize vermiş olduğum linkten ulaşabilirsiniz.

<!DOCTYPE html>
<html lang='tr'>
<meta charset='utf-8'/>
<head>
<style>
p{color:blue;}
span {color:red;}    
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").bind("click", function(){
        alert("Paragrafa tıklandı");
    });
    $("span").bind("click", function(){
        alert("Alana tıklandı");
    });
});
</script>
</head>
<body>

<p>Beni Tıkla! <span>Alana tıkla!</span></p>

</body>
</html>

Yazı serimizin ilk kısmının sonuna geldik. Ancak AngularJS Derslerimizin 2. bölümü devam edecektir. Bir sonraki yazımızda kalan diğer metotlardan ve angularjs ile eleman eklemenin nasıl gerçekleştirileceğinden bahsedeceğiz.Bizi okumaya devam etmeniz dileğiyle.

Değerli yorumlarınızı ve kafanıza takılan durumları paylaşmanızı rica ediyorum. Herkesin yeni yılını kutlar mutlu ve bol kazançlı yıllar dilerim. ?

Önemli Not : Vermiş olduğumuz kodların uygulamalarına KendinDene adlı web sitemizden ulaşabilirsiniz