✅ AngularJS'de Sınıflar ve Stiller

İçindekiler

Uygulamalarımızı ve kullanıcı arayüzünü çalışma şeklimiz, stillerde değişiklikler anlamına gelebilir, bu değişiklikler çoğunlukla en modern uygulamalara yansımaktadır. dersler CSS Bununla birlikte, elementlerimizi renkleri yerleştirmeyi, düzenlemeyi değiştirmeyi vb. HTML.
AngularJS model değiştiğinde bu değişiklikleri dinamik olarak yapmamızı sağlar, böylece uygulamanın bir bütün olarak nasıl göründüğünü işleyişine bağlayabiliriz, bunun için iki yolumuz var, biri enterpolasyon kullanarak ve ikincisi direktifle ng sınıfı.
Bu durumda elimizde bir tane olduğunu düşünelim. CSS sınıfı, onu belirli bir anda veya eylemde öğemize uygulamak istiyorsak, enterpolasyon gösterimini kullanabiliriz. açısal {{}} böylece değişikliği, üzerinde çalışan bir işlevle uygulayabilirsiniz. $ kapsam kontrolör.
Örneğin, aktif olmadığını göstermek için bir öğeyi gri olarak gösteren bir sınıfımız var:

 .menu-disabled-true {renk: gri; }

Bunu uygulamamıza uygulamak istiyorsak, gözlemlediğimiz gibi elementimizin direktiflerinin durumunu almasını sağlayabileceğimizi biliyoruz:


Devre dışı bırakmak

Şimdi içeriğimizi yapıyoruz Javascript, burada özelliği değiştireceğiz Devre Dışı elementimize her tıkladığımızda:

 function MenuController ($ kapsam) {$ kapsam.isDisabled = false; $ kapsamı. devre dışı bırak = işlev () {$ kapsam.isDisabled = 'true'; }; }

Şimdi uygulamayı başlatırken nasıl göründüğünü görüyoruz:

Ve şimdi devre dışı bırak'ı tıkladığınızda:

değişimin nasıl olduğunu gözlemleyebildik. CSS sınıfı basit bir şekilde ve denetleyicinin her şeyi halletmesi.
Stil değişikliklerini uygulamanın başka bir yolu direktiftir. ng sınıfı, bu, çalışma şeklinden yararlanabildiğimiz için bize biraz daha fazla esneklik sağlar. AngularJS böylece koşulları değerlendirmeyi başarabiliriz ve bunların yerine getirilmesine bağlı olarak şu veya bu sınıfı gösterebiliriz.
Aşağıdaki örnekte bir uyarı sınıfına ve bir hata sınıfına sahip olmak istediğimizi görelim, bununla farklı mesajlar bile gösterebiliriz, böylece kullanıcı neler olup bittiğinin farkında olabilir. Kullanacağımız CSS sınıflarımız var:

 .error {arka plan rengi: kırmızı; } .warning {arka plan rengi: sarı; }

Şimdi üreteceğiz HTML, yönergede kullanacağız ng sınıfı bazı özellikler hata: isError Y uyarı: isUyarıBu değerlendirmeler, CSS'de tanımladığımız sınıflardan birini veya diğerini seçmemize izin veren değerlendirmelerdir.
Sonra bir {{İleti}} denetleyiciye yerleştireceğimiz ilgili değeri gösterecek olan:

{{İleti}}Hatayı Simüle Et Uyarıyı Simüle Et

Son olarak Javascript'te işi yapıyoruz:

 function ClasesController ($ kapsam) {$ kapsam.isError = false; $ kapsam.isUyarı = yanlış; $scope.showError = function () {$scope.message = 'Bu bir hatadır!'; $ kapsam.isError = doğru; $ kapsam.isUyarı = yanlış; }; $ kapsam.mostrarUyarı = işlev () {$ kapsam. mesaj = 'Sadece bir uyarı.'; $ kapsam.isUyarı = doğru; $ kapsam.isError = yanlış; }; }

Bununla tarayıcımızda aşağıdaki gibi bir sonuç elde edeceğiz:

BÜYÜT

Bizi biz yapan görseldeki konsola bakıyoruz. ng bağlayıcı uyarılar için tanımladığımız uyarı sınıfı ile üzerine tıklarsak Hatayı Simüle Et sonra aynı şeyi hata sınıfıyla yapın. Bununla bu öğreticiyi bitiriyoruz, CSS stillerini ve sınıflarını içinde yapılan uygulamalarımızla ilişkilendirmeyi zaten öğrendik. AngularJS.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.