Ionic View'da üstteki boşluk bir türlü gitmayooorr

Evet yaklaşık 1 haftadır o üstteki salak boşluğu gidermeye çalışıyorum ve en sonunda buldum Allah'a şükür :D

Şimdi konu şu: Ionic controller içindeki run fonksiyonunu çağırmak için cordova'dan deviceReady event'i bekliyor, geldiğinde de gidip kullanıcı (developer) için ready fonksiyonunu çağırıyor ve başlangıç kodlarını çalıştırılıyor. Sorun şu bu anda bir eklenti çağırırsanız hemen devreye girmiyor. Adamlar bunun için az bir bekleme yaparak sorunu çözmüşler. Yani o bir türlü çalışmayan Statusbar bileşeniniz de bu şekilde çalışıyor.

ionic.Platform.ready(function() {
  //hide the status bar using the StatusBar plugin
  if(window.StatusBar) {
    // org.apache.cordova.statusbar required
    StatusBar.hide();
  }
});

ama bu kod hala sorununuzu tam çözmüyor. Göreceksiniz ki ionic view içinde üst tarafta özellikle ios'ta 20 piksellik bir boşluk var ve bir türlü gitmiyor. Arkaplan resmim doğru biçimde ekranı kaplıyor ama header bar yapmak için oluşturduğum div'in iç div'leri bir türlü tepeye dayanmıyor. Boşuna css style'larınızla oynamayın. Olayın çözümü ionic.Platform.fullScreen();

ionic.Platform.ready(function() {
  //hide the status bar using the StatusBar plugin
  if(window.StatusBar) {
    // org.apache.cordova.statusbar required
    StatusBar.hide();
    ionic.Platform.fullScreen();
  }
});

Hadi kolay gelsin.

Ionic için Crosswalk kullanımı

Bir süredir ionic crosswalk desteklemekte. Crosswalk'un ne olduğunu bilmiyorsan lütfen bi google'la anam. Crosswalk kurmak basit, kullanmak ta basit.

Proje klasörün içinde:
ionic browser add crosswalk
çalıştırarak kurulumu yapılıyor.

Bu işin artıları:
- Tüm android cihazlarda aynı görünüm ve css özellikleri (Doğal olarak çünkü hepsinde crosswalk çalıştırıyor naneyi)
- Hızlı javascript ve görsel css çalıştırma

Eksileri:
- Dosya boyutuna 20MBçık ekliyor :)
- Eğer benim gibi wifi üzerinde CLI kullanıyorsanız ilk çalıştırmada yavaş proje derleme ve açılma.
- Android 4.2 üstü mecburiyeti

****** NOT *******
Yeni olarak bir de browser'lara crosswalk-lite geldi kurdum ama henüz incelemedim. Crosswalk gene ama boyut küçük herhalde.

Available browser'ları görmek için
ionic browser list

Platforma özel css tanımlama

Mesela .bar-header adında bir css class'ın var.

 .bar-header {  
   position: absolute;  
   top: 0px;  
   left: 0px;  
   right: 0px;  
   height: 70px;  
   display: flex;  
   align-content: flex-start;  
   align-items: top;  
   justify-content: flex-start;  
   background-image: url('../img/bar_header.png');  
   background-position: top;  
   background-size: 100% 50px;  
   background-repeat: repeat-x;  
 }  

sen bu class'ın padding-top'ının ios platformunda 10px olmasını istiyorsun.

 .platform-ios . bar-header {  
   padding-top: 10px; 
 }  

bu kadar basit. Hade bakem kopyala yapıştır.

Performans performans performansssss!!!!

http://www.gajotres.net/speed-up-your-ionic-application-using-these-techniques/2/
http://www.html5rocks.com/en/tutorials/speed/html5/
http://tombuyse.com/improving-the-performance-of-your-ionic-application/

Uzun süre uygulamaya dokunurksak... Nasıl yani?!?!?!? :)))))

Ionic uygulamanızda herhangi boş bir alana uzun süre parmağınızı basılı tutarsanız iOS9'dan beri olan bir bug'ı yani istemediğiniz o büyüteç özelliğinin aktif hale geldiğini göreceksiniz.

Aha da çözüm de burada:
https://github.com/EddyVerbruggen/cordova-plugin-ios-longpress-fix

Parametrik dom elementi style property'si değiştirme

Tamam angular'la css class'ını değiştirebiliyoruz. ng-show ile visibility de kontrol edebiliyoruz. ng-cloak yüklenene kadar dom elementinin gösterilmesini engelliyor. Buraya kadar ok ama ya ben bir durumda bir dom elementinin style'ının bir/birkaç property'sinin değerini değiştirmek istersem?

<div ng-style="count === 0 && {'background-color':'green'}  || count === 1 && {'background-color':'yellow'}" style="width:200px;height:100px;border:1px solid gray;background-color: blue"></div>

Parametrik dom element class'ını değiştirme

.largeWidth {
    width: 100%;
}

.smallWidth {
    width: 0%;
}

// [...]

ng-class="{largeWidth: myVar == 'ok', smallWidth: myVar != 'ok'}"

Cordova plugin'lerinden hangisini kullanmalıyım?

Bu aralar en çok kafa yorduğum ionic sorularından biri hangi cordova plugin'i daha güvenilir ve sağlam? Galiba bir ipucu buldum. Halihazırda http://cordova.apache.org/plugins/ adresinden cordova plugin'leri indirmekteyiz. Dikkat ettim ki en çok tavsiye edilen offical plugin'ler hep stevegill kullanıcı adıyla yollanmış. Baktım ki stevegill yazıp aradığımda site bana stevegill'e ait plugin'leri göstermeyi de destekliyor. Üstüne bir de bu şahıs tarafından yollanan tüm plugin'ler birçok platformu desteklediğini görünce artık bu plugin grubunu kullanmaya çalışmaya karar verdim. Bilmem size de mantıklı geliyor mu?...

Androdi cihaz üzerinde Livereload çalışmıyor?!?!??!

Kuruyorsunuz çalışıyor bakıyorsunuz Livereload çalışmıyor??!?!??

<head> açma kapaması arasına

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

ekliyorsunuz bir bakıyorsunuz tıkır tıkır çalışıyor...