Angular Material ile Ultra Modern Web Uygulamaları Oluşturun

Google, 2014'teki Google I/O Konferansında yeni tasarım dili olan Material Design'ı duyurdu. O zamandan beri, tutarlı bir deneyim sağlamak amacıyla popüler uygulamalarının çoğunu bu yeni spesifikasyona uyacak şekilde dönüştürdüler. Şimdi sizi de takip etmeye ikna etmeye çalışıyorlar.

Materyal Tasarımı Nedir?

Resmi Materyal Tasarımı spesifikasyonunu ziyaret ettikten sonra, hemen ultra modern minimalizm hissine kapılacaksınız. Buradaki tema temel şekiller ve düz renklerdir. Belgeleri gözden geçirmek oldukça büyük bir deneyim. Kendiniz bir göz atmanızı tavsiye ederim, ancak burada özetleyeceğim.

Amaç

Amaç, iyi tasarımın klasik ilkelerini teknoloji ve bilimin yenilik ve olanaklarıyla sentezleyen bir görsel dil yaratmaktır. Ayrıca, çeşitli platformlar ve cihaz boyutları arasında birleşik bir deneyime izin veren tek bir temel sistem geliştirmek.

Prensipler

Materyal Tasarımı üç ilke üzerine kurulmuştur.

Malzeme Metafordur

Kağıt ve mürekkep çalışmasından ilham alan malzeme, 3B uzayda yaşıyor ve dokunsal gerçekliğe dayanıyor. Gerçekçi gölgeler kullanarak boşluk yanılsaması verir. Kağıt malzeme fizik yasalarına uymalıdır (yani iki kağıt parçası birbirinin içinden geçemez), ancak fiziksel dünyanın yerini alabilir (yani bir kağıt büyüyebilir veya küçülebilir).

Kalın, Grafik, Kasıtlı

Kasıtlı renk seçenekleri, uçtan uca görüntüler, büyük ölçekli tipografi ve kasıtlı beyaz boşluk, kullanıcıyı deneyime çeken cesur ve grafik bir arayüz oluşturur. Kayan Eylem Düğmesi veya FAB, bu ilkenin en iyi örneğidir. Google Gelen Kutusu uygulamanızda 'artı' sembolü olan o küçük daireyi fark ettiniz mi? Materyal Tasarımı, bunun önemli bir düğme olduğunu açıkça ortaya koyuyor.

Hareket Anlam Sağlar

Hareket anlamlı ve uygundur, dikkati odaklamaya ve sürekliliği korumaya hizmet eder. Geri bildirim ince ancak nettir. Geçişler verimli ancak tutarlıdır. Buradaki ana nokta, sadece bir amacı olduğu zaman canlandırmak ve aşırıya kaçmamaktır.

AngularJS Materyal Tasarımına Nasıl Uyuyor?

Google'ın “Süper Kahraman JavaScript MVW Çerçevesi” olan AngularJS, tek sayfalı uygulamaların (SPA) geliştirilmesinde karşılaşılan birçok zorluğu ele alır. API'lere bağlanan ve hiçbir zaman sayfanın yenilenmesine gerek duymayan modern web uygulamaları oluşturmak için gereken çerçeveyi sağlar.

AngularJS: Yeni Bir Yaklaşım

Angular, uygulamalar için tasarlanmış olsaydı HTML'nin ne olacağıdır. HTML, statik belgeler için harika bir bildirim dilidir, ancak dinamik uygulamalar oluşturmak çok fazla değildir.

HTML ile dinamik uygulamalar oluşturmak, her zaman tarayıcıyı yapmaması gereken şeyleri yapması için kandırma alıştırması olmuştur. Bunu yapmak için birkaç yaklaşım var.

1. Kütüphane - bir işlevler koleksiyonu. (jQuery)
2. Çerçeve - kod gerektiğinde statik öğeleri dinamik olarak doldurur. (Durandal, Köz)

Angular bu sorunu çözmek için farklı bir yaklaşım benimsiyor. Verilen HTML ile uğraşmak yerine yeni HTML yapıları oluşturur. Angular, tarayıcıya 'yönergeler' adı verilen bir yapı aracılığıyla yeni HTML sözdizimini öğretir. Angular, yerleşik olarak bu yönergelerden oluşan bir setle birlikte gelir, ancak aynı zamanda özel yönergeler oluşturmanıza da olanak tanır, böylece kendi HTML öğelerinizi yazmanıza olanak tanır.

Google, Materyal Tasarımı ilkelerine dayalı bir dizi yönerge oluştursa güzel olmaz mıydı?

Açısal Malzemenin Tanıtımı

Google, AngularJS'de Materyal Tasarımının bir uygulaması olan Angular Material'ı aktif olarak geliştirmektedir. Angular Material, Material Design sistemine dayalı bir dizi yeniden kullanılabilir UI bileşeni sağlar. Açısal Malzeme birkaç parçadan oluşur. Tipografi ve diğer öğeler için bir CSS kitaplığına sahiptir, tema için ilginç bir JavaScript yaklaşımı sağlar ve duyarlı düzeni esnek bir ızgara kullanır. Ancak Angular Material'ın en çekici özelliği, muhteşem direktifler koleksiyonudur.

Başlarken

Bir sonraki Angular Material projenizi hızlı bir şekilde başlatmanıza yardımcı olacak açık kaynaklı bir proje oluşturdum. Bu projenin amacı, Angular Material'in sunduğu her şeye tek bir çatı altında örnek vermektir. Gezinme, sayfalama, tema oluşturma ve tüm yönergeler koleksiyonu kullanıma hazır, tek yapmanız gereken verilerinizi beslemek ve HTML'ye bağlamak.

Buradaki demoya bir göz atın veya kodu GitHub'da çatallayın.

direktifler

Yönergeler temel bir Açısal özelliktir. Angular, ng-model veya ng-repeat gibi her zaman kullandığınız birkaç yönergeyle birlikte gelir. Çerçevenin olması gerektiği gibi çalışmasını sağlayan çok önemli bir Angular parçasıdır.

Açısal Malzeme Yönergesi Nasıl Kullanılır

Angular Material, bu yönerge kitaplığını bir dizi güzel Material Design esinli yönergeyle genişletir. Angular Material yönergeleri 'md' ile başlayan HTML etiketleridir; Material Design'ın kısaltması. Kullanımları çok daha kolay olamazdı. Örneğin, eski güzel düğmesine bir göz atalım.

Standart bir HTML düğmesi şöyle görünebilir.

 <button>Click Me</button>

Açısal Malzeme düğmesi şuna benzer.

 <md-button>Click Me</md-button>

Ve bir Malzeme düğmesi yapmak için gereken tek şey bu. Şimdi, bu yönerge için mevcut olan, onu temalandırmak ve önemi ima etmek için yüzeyden yükseltmek gibi başka seçenekler de var.

 <md-button class="md-raised md-primary md-hue-1">Click Me</md-button>

Hizmetler

Hizmetler ayrıca Angular işlevselliğinin özüdür. Uygulama genelinde kod paylaşmak için kullanılırlar. Angular uygulamalarında veri çağrıları için $http gibi ortak bir çekirdek hizmet kullanılır ve yeniden kullanılır.

Açısal hizmetler şunlardır:

1. Tembel bir şekilde örneklendi – Angular, yalnızca bir uygulama bileşeni buna bağlı olduğunda bir hizmeti somutlaştırır.
2. Singletons – Bir hizmete bağlı olan her bileşen, hizmet fabrikası tarafından oluşturulan tek örneğe bir başvuru alır.

Açısal Malzeme Hizmeti Nasıl Kullanılır

Angular Material, uygulamaya ekstra işlevsellik sağlayan bazı hizmetlerle birlikte gelir. Ayrıca bazı direktiflerin uygulanmasına da katkıda bulunurlar. Bir hizmetin harika bir örneği 'tost'tur.

Tost, ekranın üst tarafından kayan ve birkaç saniye sonra kaybolan küçük bir bildirimdir. Bu hizmeti kullanmak kolaydır.

JavaScript'te,

 $mdToast.show( $mdToast.simple('Simple Toast!') .position('left bottom') .hideDelay(3000) );

Bu örnek, ekranın sol alt köşesinde beliren ve 3 saniye sonra geri çekilen basit bir tostu göstermektedir.

Bazı hizmetler özel şablonlarla kişiselleştirilebilir. Bu durumda, $mdToast hizmeti, md-toast yönergesini kullanarak özel bir HTML şablonu kullanabilir.

Temalandırma

Materyal Tasarımı, temaların renk, tonlar ve kontrast yoluyla anlam ifade ettiği görsel bir dildir. Bu temalar, daha birleşik bir his sağlamak için uygulamanın tamamındaki bileşenler boyunca ifade edilir.

Materyal Tasarımı yönergelerine göre, "birincil paletten üç renk tonu ve ikincil paletten bir vurgu rengi seçerek renk seçiminizi sınırlandırmalısınız." Angular Material, temayı yapılandırmak için JavaScript kullanarak bu kılavuzun izlenmesini kolaylaştırır. Ama önce palet ve ton nedir?

• Ton: Bir ton, bir paletteki tek bir renktir.
• Palet: Palet, tonlardan oluşan bir koleksiyondur.

Örneğin, bir palet 'yeşil' olur ve bir ton yeşilin belirli bir tonudur. Angular Material, Material Design spesifikasyonundaki tüm geçerli paletlerle birlikte paketlenmiş olarak gelir. Geçerli renk paletleri hakkında daha fazla bilgiyi buradan edinebilirsiniz.

Temayı Yapılandırma

Projenizin teması çok kolay. app.js dosyasında, Tema Sağlayıcı hizmetini kullanarak istediğiniz paletleri ve tonları ayarlayın.

 angular.module('myApp', ['ngMaterial']) .config(function($mdThemingProvider) { $mdThemingProvider.theme('default') .primaryPalette('cyan', { 'default': '400', 'hue-1': '100', 'hue-2': '600', 'hue-3': 'A100' }) .accentPalette('amber') .warnPalette('red') .backgroundPalette('grey'); });

Temayı Kullanma

Temayı bileşenlere uygulamak için öğenin sınıfını istediğiniz palete ve renk tonuna ayarlayın.

 <md-button class="md-primary">Click me</md-button> <md-button class="md-primary md-hue-1">Click me</md-button> <md-button class="md-primary md-hue-2">Click me</md-button> <md-button class="md-accent">or maybe me</md-button> <md-button class="md-warn">Careful</md-button>

Düzen

Flexbox, duyarlı tasarımın en yeni ve en büyük eklentisidir ve Angular Material, onunla birlikte paketlenmiş olarak gelir. Bootstrap ızgara sistemine aşina iseniz, hızlı bir şekilde yakalayabilmelisiniz. Aslında Bootstrap, yaklaşan sürümünde Flexbox'a geçiyor. Alıştığınız tanıdık satırlar ve sütunlar düzenine sahiptir, ancak çok daha fazlası ile. Bu öğreticiyle Flexbox'ı nasıl kullanacağınızı öğrenin veya resmi belgeleri inceleyin.

En İyi 9 En İyi Açısal Malzeme Yönergesi

Hepsini listelemek için çok fazla Angular Material yönergesi var, bu yüzden sizinle favorilerimi paylaşmak istiyorum.

9. İlerleme Doğrusal

SPA'larda genellikle sayfaların sunucudan veri yüklemek için zamana ihtiyacı vardır. Bu süre zarfında uygulama boş bir sayfa gösterirse, kullanıcılar uygulamanın bozulduğunu ve ayrılacağını düşünebilir. Kullanıcıların, Progress Linear yönergesi ile verilerin yüklendiğini bilmelerini sağlayın. Kullanıcılar, bir şeyler olduğunu belirten hareketli bir ilerleme çubuğu gördüklerinde beklemeleri gerektiğini bilecekler. Alternatif olarak, yuvarlak bir gösterge için İlerleme Genelgesi yönergesini kullanın.

8. Tarih Seçici

Tarih Seçici yönergesi, tarih seçmeyi kullanıcı için temiz, basit bir deneyim ve gerçek bir tek satırlık yazma işlemi yapar. Basitçe md-datepicker'ı kullanın ve isteğe bağlı olarak aralığı md-min-date ve md-max-date ile sınırlayın ve hepsi bu kadar.

7. Otomatik tamamlama

Otomatik tamamlama, kullanıcının bir seçenek seçmesine yardımcı olarak hoş bir kullanıcı deneyimi sağlar. Google'ın arama motorunu en iyi yapan şey budur. Otomatik Tamamlama yönergesi, bir kullanıcının sözcüklerini yazarken tamamlayarak bu işlevi uygulamanıza ekler. Ancak bu yönergenin en iyi yanı özelleştirmedir. Otomatik tamamlamanızı md-item-template ile doldurarak önerilere daha fazla anlam verebilirsiniz. Örneğin, bir kullanıcı bir şirkette ad arıyorsa, otomatik tamamlama, eşleşen adları resim ve şirket rolüyle göstererek daha sağlam bir kullanıcı deneyimi sağlayabilir.

6. Alt Sayfa

Alt sayfa, ekranınızın altından yukarı doğru kayan, içeriği kaplayan ve odaklanan küçük bir menüdür. Başlangıçta yalnızca mobil cihazlar için kullanılması amaçlanan alt sayfa, daha büyük ekranlarda popülerlik kazanıyor. Bunu kullanmak için, sırasıyla bir ızgara düzeni veya liste düzeni için bir md-ızgarası veya bir md-listesi içeren md-bottom-sheet ile bir şablon oluşturun. Ardından Bottom Sheet hizmetiyle $mdBottomSheet.show() adını verin.

5. Giriş

Girdi formları sıkıcıdır ve internetin başlangıcından beridir. Ama olmak zorunda değiller! Giriş yönergesi ile girdilerinize biraz yetenek katın. Giriş etiketinizi md-input-container ile sarın ve canlanmasını izleyin. Yer tutucunuzun hareketli bir etikete dönüşmesini izleyin. Anında, ancak göze çarpmayan renk değişiklikleri ve uyarı mesajlarıyla girişinizi kolayca doğrulayın. Girdi yönergesi sıkıcı olması beklenen bir öğeyi alır ve hoş bir sürpriz sunar.

4. Tost

En ağırlaştırıcı kullanıcı deneyimi, uygulamanın ne yaptığını bilmemektir. Bu ağırlaştırmayı ekmek kızartma makineleri veya göze batmayan küçük bildirimlerle kolaylaştırıyoruz. Eski günlerde, sunucuya bir istek gönderdiğimizde, devam etmeden önce yanıt gelene kadar o sayfada beklerdik. Kullanıcının dikkat süresi o zamandan beri büyük ölçüde azaldı. Günümüzün SPA'larında, bir düğmeye tıklıyoruz ve sunucu yanıtı geldiğinde hemen ilgilenerek ilerlemeyi bekliyoruz. Tost yönergesi bunu çocuk oyuncağı yapar. Tost Hizmeti, $mdToast.show() kullanılarak ve metni, süreyi ve hangi köşede görüneceğini ayarlayarak bir ekmek kızartma makinesi çağrılır. md-toast ile kendi özel ekmek kızartma makinenizi yapın.

3. Izgara Listesi

Listelerinizde pizazz yok mu? Izgara listeleri, standart liste görünümlerine bir alternatiftir. Izgara listesi, görüntüleri sunmak için en iyisidir ve görsel anlama için optimize edilmiştir. Farklı büyüklükteki karoları bir ızgara üzerine yerleştirerek, dağınık, eklektik bir his vererek çalışır. Döşeme boyutu ve düzeni daha sonra ekran boyutuna yanıt verir. Bu yönerge, uygulamanıza heyecan verici ve eğlenceli bir görünüm kazandıracağından emin olabilirsiniz.

2. Beyaz çerçeve

Mekân kavramı, Materyal Tasarımının özü ve kağıt metaforudur. Aynı z konumunda (veya derinlikte) iki yaprak kağıt bir dikiş oluşturur ve birlikte hareket etmelidir. Farklı z konumlarına sahip üst üste binen iki kağıt yaprağı bir adım oluşturur. Birbirlerinden bağımsız hareket ederler. Tasarımı takip etmek için elemanları z ekseni boyunca kaydırabilmeliyiz. Angular Material bunu yapmanın basit bir yolunu sunar. Whiteframe yönergesini kullanarak, sınıfı md-whiteframe-z{x} olarak ayarlayın; burada x, arka plandan itibaren derinlik birimleridir. Sayı ne kadar büyük olursa, kağıdın gölgesi o kadar büyük olur.

1. Sidenav

Yan gezinme menüsü oluşturmak hiç bu kadar kolay olmamıştı. Sidenav yönergesi, ekranın soluna veya sağına bir gezinme menüsü yerleştirir. Mobil cihazlar göz önünde bulundurularak, beklendiği gibi veya bir düğme tıklamasıyla programlı olarak içeri ve dışarı kaydırılır. Güzel bir ek, kilit açma özelliğidir. Yan gezinme, ekran belirli bir boyuta ulaştığında açık olarak kilitlenecek şekilde ayarlanabilir. md-is-locked-open=”$mdMedia('gt-sm')” parametresini ayarlayarak, menü telefonda gizlenecek, ancak tablet ve daha büyük cihazlarda açık olarak kilitlenecektir.

Çözüm

Google, en popüler uygulamalarını Materyal Tasarımına dönüştürüyor. Şimdi, AngularJS'de yazılmış bir Materyal Tasarımı uygulaması olan Angular Material'ın geliştirilmesine öncülük ediyorlar. Materyal Tasarımı, kağıt bir metafor, cesur niyetler ve anlamlı hareket kullanır. AngularJS, tek sayfa uygulamaları düzenler. Angular Material, Materyal Tasarımı ilkelerini AngularJS uygulamalarına uygular.

Materyal Tasarımı burada ve Angular Material, Materyal tasarımı özelliklerini tek sayfa uygulamalarınıza uygulamanın harika bir yoludur. Kendi Angular Material uygulamanızı oluşturmak istiyorsanız sıfırdan başlayarak zamanınızı boşa harcamayın. Bunun yerine, direktiflerin demoları, temaları önceden ayarlanmış ve navigasyon ve yönlendirme kullanıma hazır tam olarak işleyen bir uygulama ile başlayın. Buradaki demoya bir göz atın veya kodu GitHub'da çatallayın. Tabii ki, resmi belgeleri ziyaret ederek Angular Material hakkında her şeyi öğrenebilirsiniz.

En iyi Angular Material direktifleri için seçimlerim hakkında ne düşünüyorsunuz? Onları doğru mu anladım? Favorileriniz neler?