Boşuna spinner progress'i kasmayın kardeşim yaaaa

http://ionicframework.com/docs/api/directive/ionSpinner/

$ionicPopup için customization

http://www.codeandyou.com/2015/08/How-to-customize-color-and-theme-of-ionic-popup.html

git pull “unable to resolve reference” “unable to update local ref” hatası!

Fazla lafa gerek yok.

Sourcetree kullanıyorsanız üst sağdan terminal açıb

rm .git/refs/remotes/origin/master
git fetch

olay bitmiştir. Zati Pull ve Push'un üzerine gelen bekleyen işlem rakamlarından olayın düzeldiğini anlarsınız anında.

$rootScope'un uygulamanın farklı yerlerinde bind edilmesi

Mesela badge göstereceksiniz. Badge'i bir ana ekranda menü düğmesinin üzerinde bir de yan menüde ilgili bölümün yanında (5) gibi göstereceksiniz. Verinin ortak biyerden alınması lazım. Ana ekranınızda controller içinde $scope.badge = 5; derseniz doğal olarak sadece orada kullanırsınız. ortak kullanım için $rootScope.badge = 5; yapın. Arkasından html kod içinde {{$root.badge}} kullanımı işi halledecektir.

Sourcetree'ye neler oluyor? Cannot lock branch origin master

Windows ve Mac'te SourceTree kullanıyorum. Bazen kırk yılın başında bir local master brach bozuluyor ve windows'ta pull yapamaz hale geliyorum. En sonunda Allah'a şükür çözümü buldum :)

SourceTree'de sağ en üst kısımdan Terminal açılır.

rm .git/refs/remotes/origin/master

ve

git fetch

yapılır.

Kelebekler uçuşur... Haneye huzur gelir...

Çıldırtan CORS belası

"Evet çıldırdım... CORS'tan çıldırdım. Delice, hayvan gibi, ellerimle deliler gibi kod yazarak" :))))

CORS belası tamam bir güvenlik unsuru ama development yaparken sıçırtıcı derecede uğraştırıyor. Ama en azından asp.net mvc için bir çözüm buldum. CORS'u sunucudan response header'ına bir ekleme yaparak çözebiliyoruz.

Projenizin herhangi bir yerine AllowCrossSite.cs adında bir class oluşturun.
İçi de şöyle birşey olacak...

public class AllowCrossSiteAttribute : System.Web.Mvc.ActionFilterAttribute
{
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
            base.OnActionExecuting(filterContext);
        }
}

Bu filtre üzerine yazıldığı her action'ın header'ına Access-Control-Allow-Origin = "*" yapıyor.

Cross origin enable etmek istediğiniz action üzerine attribute'u ekleyebilirsiniz. Şu şekilde...

[AllowCrossSite]
public ActionResult AdBanners()
{
      return View();
}

Hadi kolay gelsin.

İstediğim emulatörle test yapmak istiyorum

Bu yazıyı yazdığım şu günlerde ionic emulate komudunu öyle yada böyle çağırınca default olarak 6S Plus emulatörü açılıyor. Başka birşey kullanmak isterseniz ki daha küçük ekran boyutlarını denemek isteyeceksiniz... notasyon aşağıdaki gibi. ios olarak belirmeyi ve --target'ı doğru yazdığınızdan emin olunuz sevgili ionic sevdalıları.

ionic emulate ios --target="iPhone5S" -l -c -s

Emulatör seçenkleri ise yaklaşık şöyle birşey

iPhone-4s

iPhone-5

iPhone-5s

iPhone-6-Plus

iPhone-6

iPad-2

iPad-Retina

iPad-Air

Resizable-iPhone

Resizable-iPad

Uygulamadan telefonun browser'ına url yollamak istiyorum.

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

proje klasörü içerisinde çalıştırılır ve kurulur...

<a class="item" href="#" onclick="window.open('http://www.google.com/', '_system', 'location=yes'); return false;">
    Open a Browser
</a>

şeklinde çağırılarak kullanılır. Olay nettir...

$http isteklerim error'a düşüyor!!!!

Evet sistemi baya çözdün ve bir uygulama yazmaya başladıııın :) Güzel. Ve sunucudan istekte bulunman gerekiyor. Envayi çeşit $http örneğini denedin ama bi sorun var. İstekler hep error'a düşüyor ve hata mesajı yok.

İlk olarak $http istek şekillerine bi bakalım

$scope.loadAds = function () {
        $http.get('http://www.domain_adim.com/MobileService/Ads'
        ).then(function (response) {
            console.info("success: ", response.data[0].LinkUrl);
        }, function (error, e2) {
            console.info("error %o %o", error, e2);
        });
    }

veya

[bu örneği sonra ekliycem :)) ]

Bu iki şekilden birini yaptığında dikkat edersen console çıktısı mesela Chrome console'unda

XMLHttpRequest cannot load http://www.superfaiz.com/MobileService/Ads. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.0.18:8100' is therefore not allowed access.

Cihaz diyo ki "abi bokunu yiyim ben CORS (Cross origin resource sharing) yüzünden başka biyerden veri çekmeye çalışıyorum ama yapamam" diyor :D Güvenlikten dolayı adamlar CORS için birkaç çözüm sunmuşlar. Bunlardan en işe yarar olanını şöyle tatbik ediyoruz.

ionic.project dosyamızın içine json'ın en sonuna

,
  "proxies": [
    {
      "path": "/MobileService/",
      "proxyUrl": "http://www.domain_adim.com/MobileService/"
    }
  ]

tanımlaması ekliyoruz

ve mevcut kodumuzdaki adresi şu şekilde değiştirelim

$http.get('http://192.168.0.18:8100/MobileService/Ads'
        ).then(function (response) {
            console.info("success: ", response.data[0].LinkUrl);
        }, function (error, e2) {
            console.info("error %o %o", error, e2);
        });

Böylece yerelde MobileService altına yaptığımız istekler yerel proxy sayesinde domain_adi altına yönleniyor.

Kolay gelsin.

iOS Emulator livereload'la çalışmıyor!!!!!

Bir sürü şey denedim. Yanlışlıkla ionic komutlarını sudo ile çalıştırdım ortalık daha da bi sıçtı, normal ionic emulate ios bile çalışmaz oldu sonra chown yaparak düzelttim de hala sorun devam ediyordu. En sonunda platforms/ios altındaki projeyi xcode'da açtım biraz inceledim sonra bir makalede <allow-navigation href="*"/> satırını config.xml'e ekleyin yazıyordu. <access origin="*"/> satırının altına ekledim ve şıkır şıkır çalışmaya başladı. Haydi hayırlı traşlar.

Ionic İpuçları

http://julienrenaux.fr/2014/05/09/ionic-framework-features-you-may-have-missed/
http://scottbolinger.com/4-ways-to-make-your-ionic-app-feel-native/
https://daneden.github.io/animate.css/

Ionic Cheat Sheet
http://julienrenaux.fr/2015/08/24/ultimate-angularjs-and-ionic-performance-cheat-sheet/

slider'ının noktası daaaaa beyaz olmuyormuş amannn amaannnn

Bu aralar ionic'i Hangi Film? adındaki oyunumu yazmak için kullanıyorum ve pek fazla ion tag'li dom elemanlarına ihtiyacım olmadı daha çok div'lerle olayı customized bir şekilde götürüyorum. Ama oyunun instructions yani nasıl oynandığı ne olduğuyla ilgili birşeyleri ilk kullanım sırasında göstermek istediğimde bir ion-slide-box kullanayım dedim. Gerçekten 2 dakikada çalışan bir slide-box (ios'taki ismiyle pagecontrol) mekanizmam oldu süper. Çalıştırırken sadece kayan sayfalar için height:100% sorunu yaşadım onu da ion-slide-box için bir css class tanımlayarak width, height 100% verdim çalıştı. Şimdi gelelim küçük makalemizin konusuna. Arkaplan resmim koyu bir resim o yüzden slide-box'ın sayfalar için aşağısına koydu noktaları beyaz yapmak istedim. Forumlarda bu konuyla ilgili çok sayıda post var. Buyur abicim çalışan kod.

<ion-slide-box class="view-instructions-slide-box slider-pager-page">
   <ion-slide class="slider-pager-page">
      <div class="view-instructions-page-red">
         red
      </div>
   </ion-slide>
   <ion-slide class="slider-pager-page">
      <div class="view-instructions-page-green">
         green
      </div>
   </ion-slide>
   <ion-slide class="slider-pager-page">
      <div class="view-instructions-page-blue">
         blue
      </div>
   </ion-slide>
</ion-slide-box>

Aha bunlar da css sınıfları

.view-instructions-slide-box {
    width: 100%;
    height: 100%;
}

.view-instructions-page-red {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: red;
}

.view-instructions-page-green {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    background-color: green;
}

.view-instructions-page-blue {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    background-color: blue;
}

.slider-pager-page {
  color: white !important;
}

.slider-pager-page.active {
  color: white !important;
}

ve sonuç

Ionic ile geliştirme yapmaya başladım ama acaba hybrid uygulama kodlayarak doğru mu yapıyorum?

Evet bu başlık sorusuna cevap veren makaleler burada:

https://www.airpair.com/javascript/posts/switching-from-ios-to-ionic
https://www.airpair.com/javascript/posts/a-year-using-ionic-to-build-hybrid-applications

Sass kurdum ama "ionic serve" çalıştırınca bir sürü install istiyor

Eğer bir sürü install istiyorsa tek tek kurmak yerine aşağıdaki listeyi proje klasörünüzde bir bat dosyası olarak saklayın ve çalıştırın. Tıkır tıkır kurulsun herşey...

tabiki önce

ionic setup sass

sonra

npm install gulp
npm install gulp-util
npm install bower
npm install gulp-concat
npm install gulp-sass
npm install gulp-minify-css
npm install gulp-rename
npm install shelljs

Sass kullanıyorum ve en küçük hatada nodejs sunucu sıçıyor

Sass kullanıyorum ve en küçük hatada nodejs sunucu sıçıyor diyorsanız aşağıdaki linkteki abimiz
olayı izah etmiş. Gulp için bir console istisnası yazarak olayı hallediyorsunuz.

http://blog.ionic.io/fixing-a-broken-sass-build-stream/

Olay
.pipe(sass({errLogToConsole: true}))
bu satır. Dikkatli ekleyin.

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

Uygulamam yüklenirken ng-show ile default olarak görünmez olan nesneleri bir anlık görünür oluyor

Evet bu kırpışma olayını çözmek için ilgili tag'in attribute'lerine ng-cloak (değer belirtmeden) eklemeniz yeterlidir.

<div id="optionsDialog" class="options-dialog" ng-show="showOptionsDialog" ng-cloak></div>

Statik veya Dinamik olarak bir div'in içeriğini değiştirmek

Statik olarak bir template'ten içerik yüklemek için ng-include kullanabilirsiniz

<div ng-include="'../templates/options.html'"></div>
(Tek tırnaklara dikkat!!!)

Dinamik olarak yüklemek için template ismini bir değişkenden almak isterseniz.

$scope.templateUrl = "../tempates/options.html";

<div ng-include="templateUrl"></div>
(Binding v.b. yok!!!, direkt dümdüz değişken ismi)

Cordova plugin'i ekleme/çıkarma ve listeleme

Plugin ekleme

cordova plugin add org.apache.cordova.camera

Plugin çıkartma

cordova plugin remove org.apache.cordova.camera
veya
cordova plugin rm org.apache.cordova.camera

Yüklü plugin'leri listeleme

cordova plugin
veya
cordova plugin list

Title kısmı olmadan popup gösterme

İlk olarak popup açılırken kullanılacak custom class'ı cssClass özelliğini kullanarak belirlemeliyiz.

var registerPopup = $ionicPopup.show({

    templateUrl: 'templates/register_popup.html',
    cssClass: 'custom-class', // Add
    scope: $scope

});

Ardından .popup-head 'i bu class yardımıyla gizleyebiliriz.

.custom-class .popup-head {
  display: none;
}

Dinamik olarak bir index değişkenine bağlı kalarak div içeriği değiştirme

Mesela bir listeniz var ama farklı item tipleri sahip ve listelenirken de bu farklı tipler için farklı görünüm oluşturmak istiyorsunuz.

<div ng-if="post.index">
  <ng-switch on="post.index">

    <ng-switch-when="'0'" ng-include="'blog/angular/angular_blog' + post.index + '.html'">

    <ng-switch-when="'1'" ng-include="'blog/angular/angular_blog' + post.index + '.html'">

  </ng-switch>
</div>