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.