AngularJS Direktiflerini Kullanarak Tab Örneği

AngularJ direktiflerini kullanarak hiç javascript kodu yazmadan tab örneği hazırladık.



Örnekte kullanılan direktifler şunlardır;

ng-app
ng-init
ng-class
ng-click
ng-switch
ng-switch-when

Demo

Kısaca kodlarımız

<body ng-app ng-init="tab = 'tab1'">

	<div id="tab">
	
		<ul class="tab">
			<li ng-class="{active: tab == 'tab1'}">
				<a href="#" ng-click="tab = 'tab1'">1. tab</a>
			</li>
			<li ng-class="{active: tab == 'tab2'}">
				<a href="#" ng-click="tab = 'tab2'">2. tab</a>
			</li>
			<li ng-class="{active: tab == 'tab3'}">
				<a href="#" ng-click="tab = 'tab3'">3. tab</a>
			</li>
		</ul>
	
		<div ng-switch="tab">
			<div class="tab-content" ng-switch-when="tab1">
				1. tab içeriği
			</div>
			<div class="tab-content" ng-switch-when="tab2">
				2. tab içeriği
			</div>
			<div class="tab-content" ng-switch-when="tab3">
				3. tab içeriği
			</div>
		</div>
	
	</div>

</body>

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“AngularJS Direktiflerini Kullanarak Tab Örneği” üzerine 20 yorum

  1. Bence bu angularjs in amacından çok farklı birşey angularJs in amacı sunucunun bir tek data kısmına bakması ve bunu json olarak ön plana göndermesidir. Böylelikle arka planda for each, while vb sunucuyu kasacak ,yoracak , ufak tefek işlemleri tarayıcının yapmasını sağlıyor=)

  2. Bedava derslere bayılırım 😀 Bu yeni çıkan Sass, bootstrap ve AngularJS çok değişik geliyor. Bu özelliklerin bir önemi varmı? Bu arada yeni tema güzelmiş.

        1. Hepsi senin yararına aslında.
          Projelerde daha hızlı ve stabil sonuç almanı sağlayan şeyler.
          Özellikle CSS yazımını hızlandırmak için SASS,
          Responsive, Javascript ve diğer şeyleri daha kolaylaştırmak için Bootstrap,
          DOM’da daha fazla hakimiyet içinse AngularJS öğrenmen senin yararına olur.

          1. Bilgilendirdiğin için teşekkürler. Bootstarp derslerini bekliyorum.Hazırladığın dersler çok iyi. Bu bilgileri edinmek için nasıl bir eğitim aldın ve ya nasıl bir yol izledin merak ediyorum. Neyse iyi çalışmalar.

  3. Bende Angular öğrenmeye başlıyorum ama benim amacım mobil için ufak tefek şeyler yaparken kullanmak.

    Google hala angular.js vb. kütüphaneleri kullanan siteleri indexleyemiyor, extra çok fazla ayar yapmak gerekiyor ( indexlemek için ayrı yapı kurmak vb. ) bu yüzden çok kullanışlı ve hızlı da olsa web tabanlı projelerde özellikle google’dan hit bekleniyorsa bence uzak durulması lazım Angular’dan.

    1. Daha çok kullanıcıya hitap eden uygulamalar için kullanılabilir sanırım, o yönden sıkıntı yok 🙂 Ancak google geliştirdiğine göre eminim ki buna da yakın zamanda bir çözüm gelecektir.

      1. Ionic vb. frameworkleri inceleyip&öğrenip üzerine herhangi bir programlama diliyle REST bir server kurgulanıp çok rahatlıkla mobil uygulama geliştirilebildiği için öğreniyorum ben açıkcası.

        Ayrıca localStorage vb. ön tanımlı gelen bazı araçlar ile giriş yapan kullanıcıya bir token verip, daha sonra onu o cihazda hatırlayıp çok basit düzeyde üyelik gerektiren uygulamalar bile yazılabilir.

        Ionic’e bakmanı tavsiye ederim, Cordova pluginlerini çalıştırarak çok az kodla neredeyse native tadı veren ios ve android uygulamaları yazabiliyorsun ( titreşiminden, kamerayla resim çekip yüklettirmesine kadar envai çeşit plugini var )

        En basit mobil uygulama için 10-15.000 TL fiyat veriliyor şuan sektörde, bence bunları öğrenmek şart oldu 🙂

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir