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.