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:

$ 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.

Screen Shot 2015-12-22 at 01.34.37

 

 

 

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

$ meteor

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! 😛

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.

<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 🙂

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!

 

Published by gulistan

Süleyman Demirel üniversitesi bilgisayar mühendisliği öğrencisiyim.Network ile ilgilenirken birden kendimi SAP-ABAP içinde buldum.İşimden sonra en büyük ilgi alanımsa yemek yapmak :)

Leave a comment

Your email address will not be published. Required fields are marked *