İÇİNDEKİLER VII İÇİNDEKİLER 1 HIBRIT UYGULAMA GELIŞTIRMEYE GIRIŞ 1 Native ve Hibrit Uygulama Karşılaştırması 3 AngularJS Nedir? 5 Cordova ve Native Platform İlişkisi 6 Hibrit Uygulamaların Geleceği 6 Online Geliştirme Araçları 7 JSFiddle (jsfiddle.net) 7 CodepenIO (codepenio.com) 7 JSBin (jsbin.com) 8 Plunker (plnkr.co) 8 2 ANGULARJS NIN TEMELLERI 9 AngularJS Tarihçesi 10 JavaScript MV* Mimari Design Pattern leri 11 MVC (Model View Controller) 11 MVP (Model View Presenter) 12 MVVM (Model View View Model) 13 AngularJS Çalışma Mantığı 15 Digest Cycle (Digest Çevrimi) 17 İlk AngularJS Uygulaması 22 3 ANGULARJS UYGULAMA VE MODULE YAPISI 25 Dependency Injection 28 Routing 31 Scope Kavramı 33 Digest Loop, Model ve Scope İlişkisi 35 4 ANGULARJS CONTROLLER YAPISI 37
VIII ANGULARJS İLE WEB VE MOBİL UYGULAMA GELİŞTİRME 5 ANGULARJS EXPRESSION VE FILTRE YAPILARI 41 Expressions (İfadeler) 41 Filters (Filtreler) 42 Yapısal Filtreler 43 Currency (Para Birimi Filtresi) 43 Date (Tarih ve Saat Formatlama) 43 UpperCase ve LowerCase Filtresi 44 OrderBy Filtresi (Sıralama Filtresi) 45 Number (Rakam) Filtresi 46 LimitTo Filter (Limitleme filtresi) 47 Custom Filtre Geliştirmek 48 Formlar 49 6 ANGULARJS DIRECTIVE 53 AngularJS ve JQuery Karşılaştırması 54 İlk AngularJS Directive 57 Directive leri Kategorilendirmek 59 Built-In Directives (Yapısal Directive ler) 64 ngapp Directive 64 ngbind Directive 64 ngbindhtml Directive 65 ngclick Directive 66 ngdblclick Directive 66 ngif Directive 67 ngcloak Directive 68 ngshow Directive 69 nghide Directive 70 ngsrc Directive 71 ngstyle Directive 71 ngchange Directive 71 ngclass Directive 74
İÇİNDEKİLER IX ngchecked Directive 76 nginclude Directive 76 ngswitch Directive 77 ngoptions Directive 77 ngrepeat Directive 79 NgInit 82 ngmodel 82 ngform 82 ngdisable Directive 83 Custom Directive Geliştirmek 83 templateurl 84 Link 85 SCOPE 89 Tek Yönlü Bağlama 92 Çift Yönlü Bağlama (Two Way Binding) 93 Parent Fonksiyon Çağırma 94 TRANSCLUDE 94 CONTROLLER 96 7 ANGULARJS ANIMASYONLAR 99 CSS3 Transitions ile Animasyon Hazırlamak 100 CSS3 Animayonları ile Birlikte Animasyon Hazırlamak 102 JavaScript ile Animasyon Hazırlamak 103 8 ANGULARJS SERVIS KONSEPTI 107 Service 108 Factory 109 Provider 110 Yapısal Servisler 111 $HTTP Servisi 111 $TIMEOUT Servisi 112
X ANGULARJS İLE WEB VE MOBİL UYGULAMA GELİŞTİRME $LOG Servisi 113 Promises 113 AngularJS I18N 116 9 ANGULARJS TEST 119 AngularJS ile Test Yazma 120 AngularJS ile Unit Test Yazma 122 10 MOBIL UYGULAMALARDA UI YAKLAŞIMI 125 AngularJS ve Bootstrap Framework Karşılaştırması 125 Preprocessor Kullanımı 129 SASS Preprocessor 130 SASS Syntax 130 Değişken Kullanımı 130 Nested İç içe Kullanım 133 & Referansının Kullanımı 134 @import Direktifi 136 Mixins 136 Function Kullanımı 137 Interpolation 138 @extend İfadesi 138 @media Kullanımı 140 Kontrol Direktifleri ve İfadeler 141 Sass ile Proje Yapısını Oluşturma 142 AngularJS ve Bootstrap Framework ile Kullanımı (AngularUI) 144 11 FRONTEND GELIŞTIRME ARAÇLARI 149 Webstorm 149 Bower 150 Grunt Task Runner 153 GulpJS 154
İÇİNDEKİLER XI Gulp ve Grunt Karşılaştırması 156 Yeoman 157 Batarang Chrome Extension 159 nginspector 160 12 CORDOVA FRAMEWORK VE MOBIL GELIŞTIRME ORTAMININ KURULUMU 161 Android Geliştirme Ortamı Kurulumu 161 ios Geliştirme Ortamı Kurulumu 163 Cordova Çalışma Mantığı 163 Cordova Genel Bakış 177 config.xml 180 Cordova Plugin leri 183 13 ANGULARJS ILE MOBIL UYGULAMA GELIŞTIRME FRAMEWORK LERI 187 Mobile Angular UI 188 Components 194 Navbar 195 Scrollable 196 SideBar 196 Onsen UI 197 IONIC Framework 199 IONIC Framework Giriş 200 IONIC Framework Kurulumu 202 Cordova IONIC Node Paketi ile Kurulumu 202 Webstorm Proje Olarak Kurulumu 203 Yeoman ile Kurulumu 204 IONIC Framework Yapısal İncelemesi 205 IONIC UI Komponentleri 209 Ionic Framework Grid Yapısı 210 HEADER UI Komponenti 216 SubHeader Komponenti 217
XII ANGULARJS İLE WEB VE MOBİL UYGULAMA GELİŞTİRME Footer UI Komponenti 218 IONIC Butonları 218 Header Bölümüne Buton Ekleme 220 IONIC Framework ile Listeleme 220 Liste Ayracı Eklemek 223 Listelere Buton Eklemek 224 Listeye Thumbnaıl ve Avatar Eklemek 225 Inset Listesi 226 IONIC Formlar 227 Inputlara HEADER Eklemek 228 Checkbox Kullanımı 229 Toggle Kullanımı 229 Radio Button Kullanımı 230 Select Elementi 230 Card 231 Tab Komponenti 232 IONIC İşlevsel Komponentler 233 Routing ve Navigation 234 Ion-Nav-View Directive 235 Caching 238 Ion-view 239 ion-nav-bar 240 nav-direction 240 Ionic-bar-header 240 $ionicactionsheet Kullanımı 241 IonSlideBox 242 Sık Kullanılan Servisler 244 $ionicbackdrop 244 $ionicloading 244 Gestures 245
İÇİNDEKİLER XIII Ion-Content 246 Ion-List 246 Ion-modal-View 247 SideMenu 248 14 HAVA DURUMU UYGULAMASI 251 OpenWeather API Tanıtımı 251 Uygulamanın İskeletinin Oluşturulması 254 Uygulamanın Geliştirme Süreci 255
XIV