Angular input[datetime-local] Direktifleri

Angularjs’nin bu giriş tipi ile birçok ng argümanları ile dekore edilebilir.

Not: Birçok modern tarayıcı henüz bu giriş türünü desteklemez.

Codepen Ön izlemesi

Kullanım Şekli:

<input  type = “datetime-local”
ng-model = “string”
[ name = “string” ]
[ min = “string” ]
[ max = “string” ]
[ ng-min = “” ]
[ ng-max = “” ]
[ required = “string” ]
[ ng-required = “string” ]
[ ng-change = “string” ] >

Direktifler Tanım
ng-model Angularjs ifade veri bağlamak için.
name (optional) Kontrol giriş kontrolü adı.
min (optional) Geçerli bir tarih dizesi (yyyy-AA-gg). Bu minimum tarihi doğrulamasını ayarlamak için kullanılır.
max (optional) Geçerli bir tarih dizesi (yyyy-AA-gg). Bu maximum tarihi doğrulamasını ayarlamak için kullanılır.
ng-min (optional) Bu ifade Tarihte dk doğrulaması ve kısıtlamasını ayarlar.
ng-max (optional) Bu ifade Tarih maksimum doğrulama sınırlamasını ayarlar.
required (optional) Bu giriş tipi tarihi doğrulama için gereklidir.
ng-required (optional) Gerekli nitelikler girildiğinde true olur ve size veri bağlamaya olanak tanır.
ng-change (optional) Bu ifade giriş değeri değiştiğinde aktif olur.

Angular input[date] Direktifleri

Angular input[date] Direktifleri

Angularjs’nin bu giriş tipi ile birçok ng argümanları ile dekore edilebilir.

Not: Birçok modern tarayıcı henüz bu giriş türünü desteklemez.

Codepen Ön izlemesi

Kullanım Şekli

<input type=”date”
ng-model=”string”
[name=”string”]
[min=”string”]
[max=”string”]
[ng-min=””]
[ng-max=””]
[required=”string”]
[ng-required=”string”]
[ng-change=”string”]>

Direktifler Tanım
ng-model Angularjs ifade veri bağlamak için.
name (optional) Kontrol giriş kontrolü adı.
min (optional) Geçerli bir tarih dizesi (yyyy-AA-gg). Bu minimum tarihi doğrulamasını ayarlamak için kullanılır.
max (optional) Geçerli bir tarih dizesi (yyyy-AA-gg). Bu maximum tarihi doğrulamasını ayarlamak için kullanılır.
ng-min (optional) Bu ifade Tarihte dk doğrulaması ve kısıtlamasını ayarlar.
ng-max (optional) Bu ifade Tarih maksimum doğrulama sınırlamasını ayarlar.
required (optional) Bu giriş tipi tarihi doğrulama için gereklidir.
ng-required (optional) Gerekli nitelikler girildiğinde true olur ve size veri bağlamaya olanak tanır.
ng-change (optional) Bu ifade giriş değeri değiştiğinde aktif olur.

Angular input[checkbox] Direktifleri

Angular input[checkbox] Direktifleri

Checkbox giriş değerleri için aşağıdaki ng komutlarıyla süsleyebilirsiniz. Bu özelliklerin açıklamalarını yine sitemizde bulabilirsiniz.

Codepen Ön izlemesi

Kullanım Şekli:

<input type=”checkbox”
ng-model=”string”
[name=”string”]
[ng-true-value=”expression”]
[ng-false-value=”expression”]
[ng-change=”string”]>

Direktifler Tanım
ng-model Angularjs ifade veri bağlamak için.
name (optional) Kontrol giriş kontrolü adı.
ng-true-value (optional) Seçildiğinde oluşacak değer ayarlanabilir.
ng-false-value (optional) Seçili değil iken oluşacak değer ayarlanabilir.
ng-change (optional) Giriş, giriş elemanı ile kullanıcı etkileşimi nedeniyle değiştiğinde belirtilen ifade devreye girecek.

Angular input Direktifleri

Angular input Direktifleri

Bazı input türleri için eski tarayıcılar desteklemesede (input[file]) HTML için girdileri kontrol etmeniz için güzel bir yöntemdir. İnputa ne türde, kaç karakterli deperler girileceğini sınırlandırmaları yapabilirsiniz. Bunların dışına çıkıldığında kullanıcılara hata gösterebilirsiniz. Genel olarak bütün bu işlemleri html üzerinden yapmanız mümkün olacaktır.

Codepen Ön izlemesi

Kullanım Şekli

<input
ng-model=”string”
[name=”string”]
[required=”string”]
[ng-required=”boolean”]
[ng-minlength=”number”]
[ng-maxlength=”number”]
[ng-pattern=”string”]
[ng-change=”string”]
[ng-trim=”boolean”]>

</input>

Direktifler Tanım
ng-model Angularjs ifade veri bağlamak için.
name (optional) Kontrol giriş kontrolü adı.
min (optional) Geçerli bir tarih dizesi (yyyy-AA-gg). Bu minimum tarihi doğrulamasını ayarlamak için kullanılır.
max (optional) Geçerli bir tarih dizesi (yyyy-AA-gg). Bu maximum tarihi doğrulamasını ayarlamak için kullanılır.
ng-min (optional) Bu ifade Tarihte dk doğrulaması ve kısıtlamasını ayarlar.
ng-max (optional) Bu ifade Tarih maksimum doğrulama sınırlamasını ayarlar.
required (optional) Bu giriş tipi tarihi doğrulama için gereklidir.
ng-required (optional) Gerekli nitelikler girildiğinde true olur ve size veri bağlamaya olanak tanır.
ng-change (optional) Bu ifade giriş değeri değiştiğinde aktif olur.
ng-trim (optional) Bu komut ile boş alanları temizleyin.

Angular form Direktifleri

Angular form Direktifleri

Angularjs javascript frameworkleri arasında formlara bakış açısı en güzel olan framework dememizde sanırım bir sakınca yoktur. Formu post etmeden önce validliğini en iyi kontrol edebileceğiniz yöntemdir. Formların geçerliliğini aşağıdaki özelliklerden yararlanarak kullanıca belirtebilirsiniz.

Codepen Ön izlemesi

CSS Klasları

ng-valid: form geçerli ise ayarlanır.

ng-invalid: form geçersiz ise ayarlanır.

ng-pending: form bekleme durumunda ise ayarlanır.

ng-pristine: form henüz doldurulmamış ise ayarlanır.

ng-dirty:  form doldurulmaya başlanmış ise ayarlanır.

ng-submitted: form gönderildiğinde ayarlanır.

Angular a Direktifi

Angular a Direktifi

href özelliği boş olduğunda varsayılan eylemi önlenmiş olur, böylece html A etiketinin varsayılan davranışını yerine getirir ve sayfa yenilenmeden işlem yapabilmenize olanak sağlar.

Örnek

<a href="" ng-click="list.addItem()">Add Item</a>

angular.toJson Fonksiyonu

angular.toJson Fonksiyonu

Angularjs toJSON işlevi ile JSON biçimli dizi girdisini serileştirmeyi amaçlanmıştır.

Örnek

var mySource1 = [{isim : 'Jimi', yaş : '30'},{isim : 'Tom', yaş : '23'}]  
var mySource3 = {adres : '12-13/A12', telefon : '111-111-1111'}  
  
document.write(angular.toJson(mySource1));  
document.write("</br>");  
document.write(angular.toJson(mySource3));  
document.write("</br>");

Codepen Ön izlemesi

Kullanımı:

angular.toJson(obj, pretty);

angular.reloadWithDebugInfo Fonksiyonu

angular.reloadWithDebugInfo Fonksiyonu

Açık hata ayıklama bilgileri ile mevcut uygulamayı yeniden yüklemek için bu işlevi kullanın. Bu fonksiyon çağrı önceliklidir $compileProvider.debugInfoEnabled(false)

Örnek

app.config(['$compileProvider', function ($compileProvider) {
  // disable debug info
  $compileProvider.debugInfoEnabled(false);
}]);

 

angular.noop Fonksiyonu

angular.noop Fonksiyonu

Hiçbir işlem gerçekleştirmeyen bir fonksiyondur. İşlevsel bir tarzda kod yazarken bu fonksiyon yararlı olabilir.

Örnek

function foo(callback) {
  var result = calculateResult();
  (callback || angular.noop)(result);
}

Kullanımı:

angular.noop();

angular.module Fonksiyonu

angular.module Fonksiyonu

Kayıt oluşturma ve açısal modülleri almak için kullanılan evrensel birimdir. Bir uygulama için kullanılması gerekir, tüm modüller, kontroller bu mekanizmaya bağlı olmak zorundadır. Angular js’in olmazsa olmazlarından kabul edilir.

Örnek

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.ilkIsim = "Ahmet";
    $scope.Soyad = "Çağlayan";
});

Codepen Ön izlemesi

Kullanımı:

angular.module(name, [requires], [configFn]);