02_AngularJs-Directive

Angulara girişin ardırdan Angular derslerimize başlayabiliriz.En başlangınçtan başlayarak ileriye doğru örnekleri anlatmaya çalışacağım. Bu süreçte çeşitli örneklerde yapılacak.

İlk olarak bir angularjs’in kullanıldığı bir sayfa yapalım ve burada anguların en önemli özelliklerinden biri olan data-binding olayınıda görmüş olalım.

NOT: Bu yazıyı yazdığım gün 9-10 ekimde github a erişim engeli vardı.

İlk directive : ng-app=’app’
Kodumuz bunu görerek angular uygulaması olduğunu anlıyor.

[sourcecode language=”html”]
<!DOCTYPE html>

<head>
<title>Learning AngularJS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js" type="text/javascript"></script>
</head>

<body ng-app=’app’ ng-controller=’MainController as mainCtrl’>
<label>Yazı giriniz:</label>
<input type="text" class="form-control" ng-model=’inputValue’ />

<label>
{{inputValue}}
</label>

</body>

</html>
[/sourcecode]

Örneği canlı görmek için Tıklayınız

https://plnkr.co/edit/iUeEul?p=preview

Evet diğer directiveler neler bir kaç tanesine daha bakalım. Daha sonra directivler nelere yarar bunları açıklayalım.

En çok kullanılarn Directivler

  • ng-if
  • ng-show
  • ng-model
  • ng-click
  • ng-repeat

Gördüğünüz gibi Directivleri HTML kodumuzun içine yazıyoruz. Bunlar sayesinde HTML kodumuzu genişletmiş oluyoruz.
HTML kodumuz artık Angular sayesinde daha çok iş yapabiliyor.

Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.