There is no doubt that we all want our applications to load very fast. To do this, we need to keep the initial bundle size small. Lazy loading is one of the methods we use in this case. We can lazy load some third-party JavaScript files and some CSS files. In this article, we will learn how to lazy load our CSS files and how to extract them with a hash on production build to prevent browser cache.

While developing ABP Commercial, we were able to load CSS files lazy, but we could not extract these CSS files to the…


Usually, Angular developers don’t use libraries but Angular libraries are very easy to use. We can use Angular libraries in every Angular application so that we don’t repeat ourselves. When a developer starts a new application they usually move the infrastructure from their past applications. Why we don’t use the same infrastructure for every application, moreover we keep it up-to-date at all times.

Hafidh Satyanto — Unsplash

In this article series, we will create 3 libraries. These libraries will be called core, bootstrap-ui and auth. We will publish the libraries as private on Verdaccio. We will use these libraries in different applications. We will…


Şöyle bir düşünün:

Bir component geliştiriyorsunuz veya varolan bir componentinizin gösterimini yapmak istiyorsunuz. Bunun için genelde o componente özel bir route tanımlanır orada gösterimi yapılır. Veya hızlı erişim sağlanan bir ekranın en altında çağırılır. Sonrasında görüntülemek için projeye start verilir. Peki ya backend ayakta değilse? 404 dönecek ve uygulama sizi 404 sayfasına yönlendirme yapıcaktır. Bu durumda componentinizi görüntülemek için 404 sayfasına mı yerleştiriceksiniz? Muhtemelen ben böyle bir durumda böyle yapardım. Ya da token alamadığınız, guardlarınızın koşullarının sağlanmadığı durumlar olabilir. Tüm koşullar sağlansa bile. Bu görüntüleme sadece bir süreliğine orada kalacaktır. Bu haliyle asla canlıya çıkılmaz.

Angular Playground projenizden izole bir…


Merhaba, hızlı ve kolayca bir npm paketi nasıl oluşturulur? Ng Packagr ile build nasıl alınır ? Nasıl yayınlanır ? Bu soruların yanıtlarını alacak ve 2 adet de bonus bilgi bu makalede öğreneceksiniz. Şunu düşündünüz mü?
Birden fazla projeniz var ve haliyle bu projelerde kullandığınız bir alt yapınız da var. Bunu her projede ayrı bir şekilde tutacak olursanız. Bir projeniz geride kalıcak mutlaka. Bunu eşitlemeye çalışmak da en iyi durumda vakit kaybı olacaktır. Git ile yönetmenin de çok doğru bir çözüm olmadığını, sıkıntılar ile karşılaşabileceğinizi düşünürsek, size burada npm paketi çok güzel bir çözüm olacaktır. …


Öncelikle aşağıdaki scripti “index.html” içerisinde head tagleri arasına ekleyelim

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Sistem açılışına yük olmak istemiyorsanız Lazy Loading Script adlı makalemi okumanızı tavsiye ederim. Örneğimde pie chart kullandım. Aşağıda pie-chart.component.ts dosyamızı inceleyim.


Bu makalemde yukarıda gördüğünüz şekilde basit bir carousel nasıl yapılır, bunu anlatmaya çalışacağım. Öncelikle ne yapacağız ondan bahsetmek istiyorum. Responsive carousel yapmak için slick-carousel güzel bir çözüm. Js uzantılı bir paket, fakat çalışabilmek için Jquery’nin yüklü olmasını bekliyor. Önceki makalemde Jquery’i lazy load script ile nasıl yükleriz bunu anlatmıştım. Componentimiz açıldıktan sonra scriptlerimi yükleyeceğiz ki ilk açılışına yük olmayalım. Kodu inceleyelim:

Şunu yapıyoruz; lazy load script servisimiz ile jquery yüklüyoruz. Servis void Subject olduğu için mapleyerek herhangi bir değer basıyoruz ki Jquery’nin yüklendiğini anlayabilelim. Bunu yapma sebebimiz şu:

Slick.js yüklendiği anda Jquery yoksa hata fırlatıyor ve birdaha çalışmıyor.

Daha…


Bu makalemde component açıldıktan sonra nasıl bir js yüklenir bunu anlatacağım. Neden böyle bir şeye ihtiyaç duyulur onu anlatayım öncelikle:
Karşıma çıkan durumdan bunu açıklamak istiyorum. Bir responsive carousel yapmam gerekiyordu. Kısa bir vakitte bunu yazmak zor. Ben de third party bir paket aramaya başladım ve ihtiyacım olan aslında tam olarak “slick-carousel” paketiydi. Fakat jquery ile çalıştığı için hem slick.js hem de jquery.js yüklemem gerekiyordu. Tek bir componentte bu js paketleri kullanılacağı için bu paketleri projemizin açılışına ekleyemeyiz. Çünkü yük olacaktır ve dolasıyla performans kaybına yol açacaktır açılışta. Fazla uzatmadan kodu inceleyelim.

Kısaca servisi özetleyeyim;

loadScript fonksiyonu bir url…


Nedir Two Way Data Binding? Fazla söze gerek yok. Bir örneğini kullanmışsınızdır.

<input [(ngModel)]="myNumber">

Peki ne oluyor arka planda ?

<input [ngModel]="myNumber" (ngModelChange)="myNumber = $event">

Bence ne yapacağımızı anlamış olmalısınız.

Bir Input tanımlıyoruz. Örnek : value

Daha sonra da bir Output tanımlıyoruz. Örnek valueChange.

Sonrasında two way olarak value değerimizi kullanabiliyoruz.

<app-child [(value)]="myNumber"></app-child>

Alt componentten valueChange emit ettiğinizde üst component değişikliği yakalıyor.

Örneği incelediğinizde umarım daha iyi anlayacaksınız.

Okuduğunuz için teşekkürler.


Javier Allegue Barros — Unsplash

Bu dersimizde Routingi basit bir şekilde örnekleyeceğiz. Öncelikle Home adlı bir component oluşturdum. Şurada component nasıl oluşturur anlatmıştım. App Componentin Css ve Html dosyasını silip aşağıdaki gibi sade bir şekilde bıraktım. Önceki halini ise Home Component’e taşıdım.

Burada template kısmında sadece <router-outlet></router-outlet>taglerini görüyorsunuz. Bu şu anlama geliyor;

Benim url imde eşleşen component burada gözüksün. Siz artık App Component’i nerede çağırırsanız (app-root tagleri ile) artık orada route hangi componentiniz ile eşleşiyorsa o gözükecek.

Home Component’in içerisine App Component’in eski halini kopyaladıysanız devam edebiliriz.

“app.routing.module.ts” isimli dosya oluşturunuz, “app.module.ts” dosyasının olduğu dizine.

Şimdi gelelim anlatmaya;

Yukarıda importlarımız mevcut, biraz alt…


Hot Module Replacement, Angular’da default olarak sunulmayan fakat oldukça kullanışlı bir özelliktir. Değişiklikleri kaydettiğinizde Browser’i refresh etmeden hızlıca değişiklikleri anlık gösterir. Derlenir derlenmez çalışır ve bazı ayarlarınız da kaybolmamış olabilir. Nasıl uygulanır kısmına gelmeden önce default ve hmr ile çalışan iki örneği inceleyiniz.

Mehmet Erim

JavaScript developer, member of NG Turkey

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store