Angular Meteor – İlk yükleme(Bootstrapping)

Ö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:

İkinci adım ilk uygulamayı oluşturuyoruz.

Oluşturduğumuz ilk uygulamanın klasörüne gidip dosyaları şu komutla görebiliriz :

Akabinde 3 dosyayı görebilirsiniz.

Screen Shot 2015-12-22 at 01.34.37

 

 

 

Uygulamayı çalıştırmak için :

Screen Shot 2015-12-22 at 01.36.50

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.

Screen Shot 2015-12-22 at 01.39.10

 

 

 

 

 

 

 

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! :P

Screen Shot 2015-12-24 at 22.49.59

 

 

 

 

 

 

 

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.

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)

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.

index.html içine de aşağıdaki kod satırlarını ekliyoruz.

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ı;

Şimdi ng-app directivine de aynı uygulama adını verip, biraz angular kodu ekleyelim.

Ve çalıştıralım :)

Screen Shot 2015-12-25 at 00.01.00

 

 

 

 

 

 

 

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!

 

Bir Cevap Yazın

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

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">