Ana içeriğe atla

Devexpress using with Angular2+

After tousands of code in Asp.Net projects with DevExpress. When the time is coming for angular 2+ front-end applications, we are ready to go for it.

Couse of that devexpress now supporting angular 2+ for current features like jquery, asp.net, etc. In order to discover and get some experience about dev express with angular. Lets start to visit https://js.devexpress.com/Overview/DataGrid/ page and click "See Demo" options and check them with "Angular" source code tab.

To Start development with angular in real life we need to figure out someting such as download nodejs, gulp, etc.

If you want to follow official steps and get more knowledge instead of faster startup, let visit https://github.com/DevExpress/devextreme-angular/blob/master/README.md


My Steps to test angular2+ with Dev Express

1- Download node.js in offical angular page:   https://nodejs.org/en/download/

2- download angular via node console with typing following command in command line


npm install -g @angular/cli

3-Creating new angular project which is calling test-project

 ng new test-project
cd test-project

4-To build and run project with dev express, we need to install gulp with following command
npm install --global gulp-cli

5- lets install dev express npm module

npm install --save devextreme devextreme-angular

6- Now we are ready to use any of dev express component.
To say hello world. lets add a dev express button.

 - add to dev express button into app.component.html

<dx-button text="Press me" (onClick)="helloWorld()"></dx-button>

 - add to following function into app.component.ts

helloWorld() {
        alert('Hello world!');
    }

 - define dev express button into app.module.ts as an import item.

import { DxServerTransferStateModule } from 'devextreme-angular';

@NgModule({
    ...
    imports: [
        ...
        DxServerTransferStateModule,
        ...
    ]
})
export class AppModule {}


- time to run :)
ng serve --open








Bu blogdaki popüler yayınlar

SQL DATEADD() Fonksiyonu(Sql de tarihe ay,gün,yıl ekleme)

Kullanım Kalıbı : DATEADD (datepart , number , date ) . datepart ksımına month,year,day vs artırmak istediğimiz tarih birimini yazıyoruz. . number ksımına arttırmak istediğimiz miktarı yazıyoruz. . date kısmına da hangi tarih e ekleneceğini belirtiyoruz. Örnek olarak şu an ki tarihten 1 ay sonrasını görmek için : Şu anki tarih '10-1-2011' olsun(gün,ay,yıl) Sorgu : SELECT DATEADD(MONTH,+1,GETDATE()) Çıktı alacağımız tarih : '10-2-2011' şekinde olacaktır.

Sql IDENTITY_INSERT Kullanımı

Sql de bazen veri taşıma veya benzeri bir durumda aktarmak istediğimiz tablo kayıtlarını identity field olan ID leri ile aktarmak isteriz.Fakat sql server buna izin vermez.Bu Identity alana insert işlemi için aşşağıdaki gibi bir işlem uygulayabiliriz. Örnek Olarak aşşağıdaki sorguda eski tablomuza yeni başka bir tablo kayıtlarını aynen aktarıyoruz. SET IDENTITY_INSERT tabloadı ON -- identity insert yapılabilir konuma geliyor INSERT INTO eskiTablo SELECT * FROM yeniTablo SET IDENTITY_INSERT tabloadı OFF -- identity insert yapılamaz konumuna geliyor

Netsis NetOpenX50 Nesnesini C# Visual Studio Üzerinde Çalıştırma

Netsis ile sipariş, ürün, fiyat, stok entegrasyonları yaparken NetOpenX apisini kullanmamız gerekiyor. Netsis kullanan bir firma ile entegrasyon geliştirmeden önce yapmamız gereken şey firmanın netopenx api lisansı alıp almadığını öğrenmeliyiz.Bunu onaylattıktan sonra Visual Studio projemize NetOpenx50 dosyasını referans olarak eklemek kalıyor. Projemize referans eklemek için öncelikle NetOpenX50.dll ini bilgisayarımıza indiriyoruz.Ardından komut sataırına girerek aşağıdaki komutu vermeliyiz. regsvr32 C:\Netsis\NetOpenX50.dll Bu işlem sonrasında NetOpenX50 dosyamızı com objesi olarak işletim sistemimize kayıt etmiş oluyoruz. Hemen ardından visual studio projemizi açarak projenin üzerinde References kısmına sağ tuş tıklayarak yeni referens ekle diyoruz.Ardından çıkan pencereden sol panelden COM objelerini seçiyoruz ve orada "NetOpenX50 Kütüphanesi" alanı zaten çıkıyor ve direk seçip referans olarak projemize ekleyebiliyoruz. NetOpenX50 apisinin kullanımı için her d...