Merhaba arkadaşlar,
Devextrem Angular, React, Asp.NET Core veya Vue gibi farklı platformlarda kullanılabilen bir UI widgetidir. Projelerimde sıkça kullandığım bu widgetlerin angular tarafında kullanımını göstermeye çalışacağım, peki nedir bu widgetler? ne işimize yarayacaklar?
Devextreme’nin en çok kullanılan widgetleri; Data grid, pivot grid, tree list, charts, editors(textbox,checkbox,radiobutton vs) , forms, notifications.
Daha fazla bilgi için Devextreme’nin sitesini bu bağlantıdan ziyaret edebilirsiniz.
Angular kurulumunu daha önceki yazılarımda anlatmıştım bu bağlantıdan ulaşabilirsiniz.
Yeni bir proje oluşturduğumuzu farz ediyorum. Terminalimizi açıp devextreme kurulumunu yapalım
npm install devextreme-angular --saveardından
npm install devextreme --savediyoruz ve paketleri ekliyoruz. Kurulumlar tamamlandıktan sonra package.json dosyasını açıp dependencies altında devextreme’i arıyoruz.
Devextreme sürümünü buradan görebilirsiniz.
Kurulum tamamlandı şimdi kullanıma gelelim. Angular’da yeni bir şey kullanacağımız zaman, yapmayı unutmamamız gereken bir şey var, kullanacağımız şeyi app.module dosyasına import etmek. AppModule dosyasını açıp Devextreme’de kullanacağımız widgetleri import ediyoruz.
Projeniz kalabalıksa, module dosyalarını ayırmanızı öneririm. Örneğin Projemiz 3 farklı kısımdan oluşuyor, her kısım için bir module tanımlayıp o 3 module dosyasını AppModule içine import ederseniz anlaşılır bir şekilde kod yazmış olursunuz.
Projemizin karmaşık olmadığını varsayalım. Örnek olarak basit bir button ekleyelim.
AppModule dosyasını açıyoruz ve içine
import { DxButtonModule} from 'devextreme-angular';yazıyoruz. İmport işlemini tamamlamak için @NgModule altında importun içine DxButtonModule’i ekliyoruz
Module’yi tanımladık. Artık kullanabiliriz.
app.component.html dosyasını açıyoruz ve içine
yazıyoruz.
ng serve --odiyerek projemizi çalıştırıyoruz.
Evet butonumuz geldi. Devextreme kurulumu bu kadar. Daha sonra ki yazılarımda widgetler hakkında detaylı bilgi vereceğim. İyi kodlamalar.