Öncelikle kısacık bir şekilde Angular ve Meteor’a değinmek istiyorum. Angular, en kısa tanımıyla dinamik web uygulamaları için kullanılan, Google destekli, client-side bir framework. Peki Meteor ne ? Meteor ise node.js üzerine inşaa edilmiş hem client hem de server-side çalışan bir framework. İki frameworkun gücü ve özellikleri kullanılarak oldukça kaliteli uygulamalar geliştirilmekte.
İlk adım olarak ; Terminalden meteoru kurup uygulamayı oluşturuyor, akabinde uygulama yapısına aşina oluyor ve ilk uygulamamızı çalıştırıyoruz.
İlk adım meteoru kuruyoruz (Bu arada bilgisayarınızda zaten node.js’in kurulu olduğunu varsayıyorum ve ben uygulamarı mac de yapıyorum). Teminalden şu şekilde meteoru kurabilirsiniz:
$ curl https://install.meteor.com/ | sh
İkinci adım ilk uygulamayı oluşturuyoruz.
$ meteor create socially
Oluşturduğumuz ilk uygulamanın klasörüne gidip dosyaları şu komutla görebiliriz :
$ cd socially
Akabinde 3 dosyayı görebilirsiniz.
Uygulamayı çalıştırmak için :
$ meteor
Localhosta gidip uygulamanızı görebilirsiniz, meteor hoşgeldiniz diyor! 🙂 Şuan elimizde hem client hem de server içeren ve tamamen fonksiyonel bir uygulamamız var.
Uygulamanızı webstorm (ya da herhangi bir IDE ) da açtıktan sonra deafult olarak gelen bir js, bit hmtl ve bir de css dosyası göreceksiniz. Silelim, daha güzellerini yazıcaz! 😛
Yeni bir index.html dosyası oluşturuyor ve <body> taglerinin arasına istediğimizi yazıyoruz. Meteorda bir html dosyasını işinize yarayan kısmını yazmanız yeterli çünkü meteor bütün html dosyalarını tarayıp birleştiriyor, yani bir html dosyasının hangi bölümünü yazarsanız yazın meteor bunu çalıştırabiliyor.
<body> <p>Nothing here</p> </body>
Client-side tarafında Angular ile çalışmaya karar verdiğimiz üzere meteorla birlikte gelen “Blaze ” UI paketini kaldırıp meteora anguları eklememiz gerekiyor. Ayrıca meteorun default gelen ecmascript paketini de kaldırmamız gerekiyor, çünkü Angular- Meteor aynı işlevi gören angular-babel paketini kullanıyor (her ikisi de ECMAScript2015)
$ meteor remove blaze-html-templates $ meteor remove ecmascript $ meteor add angular
Paketin ekleme işlemi bittikten sonra bundan sonra ana template sayfamız olacak olan main.html dosyasını oluşturuyoruz. Ardından index.html deki <p> tag ini buraya taşıyoruz.
<p>Nothing here</p>
index.html içine de aşağıdaki kod satırlarını ekliyoruz.
<body> <div ng-include src="'main.html'"></div> </body>
Angular uygulamaları moduller halindedir, ilk uygulama modulumuzu oluşturmak için app.js dosyasını projeye ekleyelim. Buradan sonra dikkat etmemiz gereken şey client- side’da angular ile server-side da ise meteor ile çalışmaya karar vermiş olduğumuz. Bu noktayıda bir if kontrolu ve Meteor.isClient (client-side da iseniz true return eden boolean) değişkeni ile çözüyoruz. Son durumda app.js şu şekilde olmalı;
if (Meteor.isClient) {
angular.module('socially', ['angular-meteor']);
}
Şimdi ng-app directivine de aynı uygulama adını verip, biraz angular kodu ekleyelim.
<p>Nothing here {{ 'yet' + '!' }}</p>
Ve çalıştıralım 🙂
Bütün terimleri türkçeye çevirip yazmayı isterdim, ancak ozaman hem yazının sonunda kendi yazdığımı anlamaz bir hale geliyorum hem de teknik terimlere çok uzaklaşıyorum. Bu arada tutorialın orjinali: http://www.angular-meteor.com/tutorials/socially adresinde bulabilirsiniz.
Kolay gelsin!