jQuery’den AngularJS’e

Bundan 9-10 sene evvel jQuery ile büyük bir sıçrama yaşayan web dünyası , sanırım AngularJS ile de benzer bir sıçrama yaşayacak. Biliyorsunuz , jQuery , JavaScript ile yazılmış  ve DOM Manipülasyonunda vazgeçilmez bir kütüphane halini almıştı. Öncesinde saf JavaScript ile yapılan işlemler oldukça kısalmış ve yazılımcılara büyük kolaylık sağlanmıştı. jQuery hala yazılım geliştiriciler tarafından sürekli kullanılan bir kütüphane. Dün gece daha önce defalarca duyduğum AngularJS’ye bakma fırsatım oldu. Sonuç: Hayretler içerisindeyim.

Web uygulamalarına baktığımızda bugün hemen hemen her uygulama MVC modeline dayanarak üretiliyor. Bu model farklı işlerin birbirinden ayrılması mantığına dayanarak , yazılımcıların bir arada çalışmasını kolaylaştırıyor. İşte aynı modelin kullanıcı kısmında da vücut bulmuş hali AngularJS.

JavaScript ile yazılmış , ve bir anlamda MVC modellemesini benimsemiş bir kütüphane. Bir kaç araştırma ile gördüm ki geliştiriciye sağladığı kolaylıklardan test unitlere ve dökümantasyonlarına kadar profesyonelce hazırlanmış. Çok fazla met ettik , tabi ki bende yeni yeni araştırmaya başlıyorum burada sizlere extreme örnekler sunamam.  Önce şu , jQuery ile AngularJS arasındaki farklardan ufacık bir kısmını gösteren videoyu göstermek isterim.

 

 

Etkileyici öyle değil mi ?

MVC modellemesinden söz etmiştik , tabi videodaki tam olarak bu değil. Gelin bunu bir tık öteye taşıyalım.

Aslında AngularJS.org a baktığınızda , sizden çalışmalara başlamadan önce bir http server kurmanızı istiyor. Ama yapacağımız bu örnek için buna ihtiyacımız yok.
Buraya tıklayarak önce angularjs kütüphanesini indirelim. Daha sonra bunu html dosyamıza import edelim.

<!doctype html>
<html>
<head>
    <meta charset="utf8">
    <script type="text/javascript" src="lib/angular/angular.min.js"></script>
</head>
    <body>
       <h1>Öğrenciler</h1>
        Search : <input type="search">
        <ul>
            <li>Uğur</li>
            <li>Buğra</li>
            <li>Burak</li>
            <li>Zeliha</li>
        </ul>
        <p>Toplam öğrenci sayısı: 4</p>
    </body>
</html>

Gördüğünüz gibi burada sadece saf html kullandık. Şimdi buna AngularJS’in getirdiklerini ekliyoruz.

<!doctype html>
<html ng-app="firstApp">
<head>
	<meta charset="utf8">
    <script type="text/javascript" src="lib/angular/angular.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>
    <body ng-controller="firstCtrl">
       <h1>{{baslik}}</h1>
        Search : <input type="search" ng-model="query">
        <ul>
            <li ng-repeat="ogrenci in ogrenciler| filter:query">
                {{ogrenci.name}}
            </li>
        </ul>
        <p>Toplam Öğrenci sayısı: {{ogrenciler.length}}</p>
    </body>
</html>

Alışkın olduğumuz html dünyasına aykırı bir sürü saçmalık ekledik sanırım. Şimdi bu saçmalıklara index.js ile bir anlam kazandıralım.

 var firstApp = angular.module('firstApp',[]);



firstApp.controller('firstCtrl',function($scope){
    $scope.ogrenciler=[
        {'name':'Uğur'},
        {'name':'Buğra'},
        {'name':'Burak'},
        {'name':'Zeliha'}
    ];
    $scope.baslik = 'Öğrenciler';
});

İşte bu kadar. Gördüğünüz gibi html’den ayrı bir javascript dosyam var. Bunun içerisinde controller nesnemi yaratıyorum. Ve elementlerimi yerleştiriyorum. Yeni yeni öğrenmeye başladığım bu AngularJS hakkında , daha bir çok şey yazacağım sanırım.