Codecademy Günlükleri: AngularJS (1)
Merhaba,
Bu bir yazı dizisi olacak ve ilk yazım. Codecademy’de AngularJS öğreniyorum ve bunu ilerde Salesforce ile bağlayacağım. İşin ucu mobile bile bağlanabilir. Bakalım, fingers crossed!
Uyarı: Codecademy de öğrendiğim sırayla anlatıyorum, daha fazla detay için İngilizceniz iyiyse oradaki kursu tavsiye ederim.
Öncelikle AngularJS nedir? Yenir mi? Ona bir bakalım. Üzülerek söylüyorum ki AngularJS yenmiyor. Evet. Bu lanet yenmeyen şey bir javascript frameworkü ve web uygulamalarını kolayca yapmayı ve kontrol etmeyi sağlar. (mış, öyle dediler bana.)
Standart bir AngularJS dizini şöyle bir şey
->css/
->img/
->js/
–>controllers/
–>shared/
–>app.js
->index.html
Bir AngularJS uygulaması oluştururken standart akış ise şöyle.
- app.js içinde bir modül oluştur ve ng-app direktifi ile uygulamanın scope unu belirle
app.js içinde
var app = angular.module("myApp", []);index.html içinde
<body ng-app="myApp"></body>2.controllers klasörü içinde controller oluştur ve ng-controller direktifi ile controllerın scope unu belirle
js/controllers içinde
MainController.js
app.controller('MainController', ['$scope', function($scope){
$scope.title = 'Salesforce Test';
$scope.promo = 'Promo Degiskeni';
}]);index.html
<div class="main" ng-controller="MainController">
</div> <!-- main -->3.controllerda scope değişkenine veri ekle ve bu veriyi expressionlar ile sayfada göster
scope değişkenine veri ekleme bir üstte var onu sayfada gösterme şekli ise şöyle
index.html
{{ title }}
Bir obje oluşturmak için
$scope.objeadı = {field1: "deneme", field2 = 23};{{ objeadı.field1 }}
AngularJS de filtreler var. (Bu bile yenmiyor. Pes!) Mesela integer sayıyı para birimi olarak göstermek için;
{{ objeadı.field2 | currency }}
Angular filtreleri şu şekilde çalışıyor.
- objeadı.field2 deki değeri alıyor.
- Sayıyı currency filtresine gönderiyor. Pipe sembolü ( | )Linux konsol kullanan arkadaşların aşina olduğu bir şey. Görevi aynısı inputu alıp diğer tarafa gönderiyor.
- Filtre dolar işaretini ve uygun ondalıklı kısmı yerleştiriyor.
Daha fazla filtre için şuraya bakabilirsiniz: Filtreler
Şimdi neler öğrendik?
Modül (app.js de tanımladığımız) Angular uygulamasının farklı bileşenlerini içerir
Controller uygulamanın verilerini yönetir
Expression sayfada verileri göstermeyi sağlar
Filtre expressiondan gelen değerin formatını (biçimini) düzeltir.