Kayıtlar

Nisan, 2018 tarihine ait yayınlar gösteriliyor

Angular Notifications Kullanımı

Resim
Merhaba arkadaşlar. Bugünkü yazımızda Angular'da notification'lardan bahsedeceğiz. Aşağıdaki gibi bir görüntü ortaya çıkacak. Şimdi ilk olarak projemizi VS Code ortamında açalım. Sonra package.json içerisinde "  dependencies   " kısmının içine tırnak içinde "  angular2-notifications  " yazalım. İki nokta koyduktan sonra bize kararlı sürümleri gösterir. Bunlardan herhangi birini seçebilirsiniz. Bu projede 0.9.8 sürümü seçilmiştir. Daha sonra projemizi kaydedip View --> Integrated Terminal ekranında " npm install " komutunu yazalım ve notification için gerekli dosyalarımız yüklenmeye başlasın. Şimdi indirdiğimiz dosyaları projemizde kullanabilmek için import edelim. app klasörünün altında app.module.ts isimli dosyamızı açalım ve SimpleNotificationsModule, NotificationsService sınıflarını import edelim. import {SimpleNotificationsModule,NotificationsService} from 'angular2-notifications' Sayfada aşağılara doğru inelim ve Ng

İlk Angular Projesi ve Angular Tanımlamaları

Resim
Merhaba arkadaşlar. Bugün Angular ile ilk projemizi yapacağız. Basit bi uygulama olacak. Ama Angular yapısını öğrenmek için güzel bi örnek olduğunu düşünüyorum. Daha fazla uzatmadan projeye geçelim. Angular'da bir sınıfta tuttuğumuz öğrencileri ekranda listelemek istiyoruz. Şimdi ilk olarak bi component oluşturmamız gerekiyor. Bu component'i terminal ekranından ekleyeceğiz. VS Code içinde terminal ekranını açmak için  View --> Integrated Terminal menüsüne gidin. Aşağıdaki komutu yazın. "  ng g component student  " Dikkat ettiyseniz component oluştuktan sonra app klasörünün altına geldi. Şimdi biz student klasörünün üzerine sağ tıklayıp iki adet yeni dosya oluşturucaz. İlk dosyamız "student.ts" olacak. *  export --> Nesne yönelimli programlama dillerinde olan public'le aynıdır. *  Angular'da int,double,float vb. gibi tanımlamalar yerine direk number yazılır. İkinci dosyamız ise " student-list.ts " olacak.

Herhangi Bir Dosyayı Kendi Programımızda Açmak

Merhaba arkadaşlar. Bugün kendi uzantımız ile oluşturduğumuz dosyalarımızı yine kendi programımız üzerinden açmayı anlatmaya çalışacağım. Giriş biraz karmaşık oldu ama şöyle açıklamak istiyorum. .txt uzantılı dosyalarımız nasıl ki default olarak not defterinde açılıyor, bizde aynı şekilde bi uygulama ile örneğin .muharrem uzantılı dosyayı kendi projemizde açacağız. Gerekli yerlerde kullandığınızda büyük kolaylık sağlayacak olan projemize başlayalım. İlk olarak txt üzerinden örnek verdik ordan gidelim. Formumuza bi tane richTextBox atalım. İçerisindeki yazıyı görebilmek için. Şimdi formumuza yeni bi ctor tanımlayalım. Bu ctor çift tıklayıp açtığımızda çalışacaktır. Diğer ctor'u da silmeyelim ki direk açılışlarda orası çalışabilsin. string temp; public mainForm(string path) {             InitializeComponent();             temp = File.ReadAllText(path); } Daha sonra program.cs dosyasına gelip aşağıdaki kodları yazalım. Yukarıdaki kod bloğu ile kayıt defteri

Angular Projemiz ve VS Code Ortamı

Resim
Projemizin olduğu dizinde " code . " yaparak projemizi VS Code'da açılacağını söylemiştik bir önceki yazımızda. Şimdi ise karşımıza gelen ekranı tanıyalım. e2e à Unit test gibi testlerin konfigürasyonunu içerir. Node_modules à İndirdiğimiz paketlerin dosyalarını içerir. (angular, bootstrap, jquery gibi) Src à   Uygulamanın olduğu klasördür.             App à                      App.component.css dosyası app component’ine özel css’dir.                      App.component.html app component’inin HTML’idir.                      App.component.spec.ts app component’in unit testidir.                      App.component.ts app component’in kendisidir.                      App.module.ts ise uygulamamızın root modülüdür. Bir modülün modül olabilmesi için          içerisindeki @NgModule’den tanımlanması gerekir. App üzerinde bilerek bu kadar öok durdum. Çünkü projeyi geliştirirken en çok çalışacağımız kısımdır.            Assets à Fotoğ

Angular Nedir? Kurulum ve İlk Proje

Resim
Merhaba arkadaşlar. Bugün Angular yazı serisine başlıyoruz. İlk olarak Angular nedir, ne için kullanılır gibi sorulara cevap verelim. Gerekli kurumlarımızı yapalım ve diğer yazımızda ise çalışma ortamını tanıyalım. Angular; javascript tabanlı açık kaynak kodlu yazılım geliştiricilerin web, mobil ve masaüstü ortamda kolay uygulama geliştirmelerini sağlayan, Google tarafından desteklenen bir MVC platformudur diyebiliriz. Angular Single Page Application uygulamalar geliştirmemize olanak sağlayan bir frameworktür. Peki nedir bu Single Page Application(SPA)? İnternet sitelerinin hemen hemen hepsi HTML, CSS, JavaScript, backend' de ise PHP ya da ASP kullanarak geliştiriliyor. Bu geliştirme türlerinde ise sayfalar arası geçiş yaptığınız da bütün kodlar yeniden yükleniyor. Yazdığınız Javascript kodları, CSS kodları tekrar tekrar yüklenmektedir ki bu da ciddi bir kaynak israfı anlamına geliyor.  İşte burada devreye SPA giriyor. Sayfayı yeniden yüklemek yerine sade