Ionic 2 - Proje Yapısı - Nazir Doğan Code Blog

Bir önceki yazımda Ionic 2' nin nasıl kurulacağından bahsettim.

Bu yazımda ise proje yapısınıdan bahsetmek ve önemli birkaç dosyayı göstermek istiyorum.

project structure

Not:Görseldeki editor Visual Studio Code ve ionic'in oluşturdugu blank projedir.Sadece homeSercives.ts dosyası eklenmiştir.

Projemizde Ionic 1.x de oldugu gibi platforms, plugins ,hooks gibi Cordova'nın eklediği klasörler mevcut.

node_modules klasörü ve diğer config dosyaları üzerinde durmayacağım. config dosyalarını biraz karıştırarak neler olduguna bakabilirsiniz.

Bizim için en önemli klasör app klasörü. app klasörü pages içersinde html'lerimiz ve .ts (typescript) dosyaları bulunmaktadır. ayrıca platformlara özel yazdığımız stillerin bulunduğu theme klasörü yer almaktadır. Ayrıca ana root'ta bir app.ts dosyası bulunmaktadır. adındanda anlaşılacağı üzere uygulama bu dosyadan başlamaktadır.

şimdi app.ts , home.ts , home.html ‘e bakalım.

//http://learnangular2.com/components/ import {Component} from '@angular/core'; /* ionic 1.x de karşşılıgı $ionicPlatform. Platform'a yönelik işler yapılacaksa Platform'u import etmek gerekiyor. ionicBootstrap ise uygulamayı başlatmak için kullanılan bir kök bileşendir. */ import {Platform, ionicBootstrap} from 'ionic-angular'; /* Bu kısımda oldukça önemli 1.x kullananların ngCordova olarak bildiği ionic 2 ionic-native adını almıştır. http://ionicframework.com/docs/v2/native/ */ import {StatusBar} from 'ionic-native'; // Burası ise kök sayfa olarak ayarlanacak dosyayı import ediyor. import {HomePage} from './pages/home/home'; // Componentimizi oluşturuyoruz. Bu kısım typescript ve Angular 2 oldugu için bu konulara aşina olmak gerekiyor. @Component({ template: '<ion-nav [root]="rootPage"></ion-nav>' }) // MyApp adında bir class oluşturuyoruz. export class MyApp { // rootPage olarak daha önceden import ettiğimiz HomePage'i belirliyoruz. rootPage: any = HomePage; // constructor içerisinde ise yine daha önceden import ettiğimiz Platform'u kullanıyoruz. constructor(platform: Platform) { // ionic 1.x deki gibi platform ready ile uygulamayı başlatıyoruz. platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. StatusBar.styleDefault(); }); } } // ionicBootstrap oldukça önemli eğer bunu çagırmaz isek uygulamamız başlamayacaktır. ionicBootstrap(MyApp);

Proje yapısına dair söylenebilecek çok şey olsada şimdilik bu kadar. İlk bakışta biraz karışık gelebilir ama konsepti öğrendikten sonra oldukça modüler ve kullanışlı geleceğinden eminim. ionic 1.x de şikayet ettiğim birçok şeyden kurtulmuşa benziyor. Ionic 2' ye başlamadan önce Angular 2 ve Typescript çalışmanızı şiddetle tavsiye ediyorum.

Comments