WordPress Rest API ile AngularJ’lerin Temelleri

Geçtiğimiz birkaç ay boyunca, iki ilgili şey hakkında kapsamlı bir şekilde yazdım, ancak çelişkili görünüyor: birincisi, JavaScript MVC çerçevesini incelemenin JavaScript’i derinlemesine incelemekle aynı olmadığı. İkincisi Angularjs olağanüstü – beğendim ve sen de yapmalısın. JavaScript’i derinlemesine öğrenmek istiyorsanız, kursları izleyin, kitapları okuyun ve dili öğrenin. Hızlı bir şekilde havalı bir şey inşa etmek istiyorsanız, açısal öğrenin. Ancak JavaScript’in temellerini öğrenmeyi kaçırmayın. Bence açısal öğrenmenin oldukça kolay olduğunu düşünüyorum, ama bunun nedeni JavaScript’in temellerini anlıyorum. JavaScript’te yeniyseniz, bu makale sizin için değildir. Herkes için, AngularJS ve WordPress Rest API ile başlamak için kısa rehberim.
AngularJS, WordPress Rest API gibi dinlendirici yangınlar kullanır. Açısal öğrenmek için, WordPress veya diğer ateşi olsun, ateşinizi anlamanız gerekir. Aslında Firebase Fire ve onların açısal müşterileriyle oynayarak açısal başladım. Firebase çok güzel bir hizmettir. Angular’ın temellerini anladıktan sonra, WordPress’te Firebase kullanımı hakkında Torsi Roy Sivan makalesini okumalısınız. Açısal sadece ateşten daha fazlasıdır. Başlamak için, yangını unutmalı ve dosyanızda zor kodladığınız nesnede verilerinizle çalışarak başlamalısınız. Şablonu, denetleyiciyi ve yönü anladıktan sonra, açısal HTTP arayüzünde çalışabilir ve uzun mesafeli ateşle bağlantı kurmak için kullanabilirsiniz.
Angular, bir model kontrol modeli kullanır, bu da açısal nasıl çalıştığını açıklamaya başlamak için bir yer seçmeyi zorlaştırır.MVC modeline alışık değilseniz, şöyle düşünün: Görüntüleme veya şablon, verilerin görsel temsilini tanımlar
Kontrolör, uzun mesafeli ateş kullanarak en son modeli yapan bir aracıdır.Ayrıca modeli ekranla etkileşiminize göre günceller.
Model, bugün kontrolör tarafından belirlenen ve ekran tarafından görüntülenen bir veri koleksiyonudur.
Açısal uygulama işlevini yapmak için en azından bir denetleyiciye ve şablona ihtiyacınız var.Önce şablonu ve sonra denetleyiciyi tartışacağım.Bu sizin için yeni ise, şablonla ilgili bölümü okumanız gerekebilir, anlamanıza izin verin, kontrolördeki kısmı okuyun, ardından şablondaki bölümü tekrar okuyun.Unutmayın, bunun çok doğrusal olmadığını … ve Ajax’a bile ulaşmadık.
Bu makalede, AngularJS’ye basit bir giriş yapacağım. Bu, sizi herhangi bir WordPress Rest API veya herhangi bir dinlendirici yangınla açısal kullanarak geliştirmede dalış yapmaya hazırlayacaktır. Şablonları Başlatma ve Bağlanma Açısaldan sevdiğim bir şey şablon basit bir HTML’dir ve HTML5 bağlanmasını kullanır. Bazı çerçeveler size tamamen yeni olan ancak açısal için olmayan HTML’yi nasıl yazacağınızı sağlar. Örneğin, “I-I-Element” sınıfı ile görünüşünüzde bir HTML öğesi istiyorsanız, Açısal ile:
Açısal görünümünüzü koruyun (V MVC’de V ) html. Bu arada, PHP HTML oluşturmak için bir araç olduğundan, normalde yaptığınız gibi şablon dosyasını PHP’de oluşturabilirsiniz. Bu her zaman çalışmanın en iyi yolu değil, bazen gerekli. Duvar görünümünüzü denetleyicinize bağlar. Ekranda, bağlanma HTML5 veri öznitelikleri veya çift kıvırcık braketlere sarılmış şablon etiketleri ile yapılır. İşte bağlanmayı göstermek için iki basit örnek. Birincisi, alanı modelden giriş formuna bağlamak için açı yönünü bir HTML5 veri özniteliği olarak kullanır: Bu form girişinin diğer form girişine benzediğini unutmayın, ancak Veri, geçerli POST.TITLE modeline bağlayan ek “Model” i özelleştirir. İkinci örnek, aynı model parçasını nasıl gösterebileceğimizi gösteriyorum:
{{Post.Title}}
Bu örneklerin her ikisi de herhangi bir denetleyici ile tanımlanmadığı için eksiktir. Denetleyiciye bağlanarak tanımlanan denetleyiciye bağlı öğelere ağ yapmalıyız. İkisini bunun gibi birleştirebilirsiniz:

{{Post.title}}
Bununla birlikte, denetleyici ayarlandıktan sonra, değeri girişe girebilir ve aşağıdaki kapta mucizevi bir şekilde görüntülenebilir.
MVC modelinde kontrol eden denetleyici, modeli tanımlamaktan ve ekranda gerekli herhangi bir mantık veya başka bir işlevi sağlamaktan sorumludur. Şu anda sadece yazı başlıklarını ele alıyor. Sabit kodlu bir modelle çalışacağız, ancak tahmin edebileceğiniz gibi, WordPress API dinlenmesini çekmek için yavaş yavaş çalışıyorum. Önceki bölümde, çok basit bir görünüm yaptık, ancak bir denetleyici olmadan. Şimdi, “yayın” ı görebilmemiz ve düzenleyebilmemiz için modeli bu görünüme enjekte edebilen bir denetleyici ile en temel açısal uygulamayı hazırlayalım.
Öncelikle açısal uygulamalarımızı yapan JavaScript dosyalarına ihtiyacımız var. (işlev (açı) {
‘sıkı kullan’;
Angular.Module (‘Belajarangular’, []);
}) (window.sudut); Bu koddaki üçüncü satır, sayfanızda açısal girdiğinizi varsayar. “Learnangular” adlı bir uygulama oluşturdu. Uygulamanızın ihtiyaç duyduğu ek bağımlılıkları bu işlevdeki boş bir dizide belirleyebilirsiniz. Örneğin, NG-Aimate kitaplığını sayfanıza yüklerseniz, satırı şu şekilde güncellemediğiniz sürece uygulamanızda mevcut olmayacaktır: Angular.module (‘Öğrenme’, [‘ng.animate’]);
Şu anda bir uygulamamız var, ancak denetleyicimizi eklemeliyiz. Uygulamaya denetleyici ve diğer bileşenleri eklemek için sözdizimiyle uğraşmanın birçok yolu vardır. Bu makalede sadece “” kullanacağım. Uygulamamıza denetleyici eklemek için. Burada boş bir denetleyici ile: (Function (açı) {
‘sıkı kullan’;
Angular.module (‘Belajarangular’, [])
.Controller (‘postxample’, [‘$ scope’, işlev ($ scope) {
}]);
}) (window.sudut); ‘Örnek sonrası’ dediğimiz bu denetleyiciye $ kapsamı enjekte ettiğimizi anlamak önemlidir. $ Scope değişkeni, ekranda bulunan verileri saklar. Bu noktada açısal olarak çalışırken, $ kapsamını model olarak düşünün. Bu biraz aşırı basitleştirme olsa da, bu bizim amacımız için işlev görür.
Görünüş hakkında konuştuğumda, $ Scope’un başlık adı verilen bir mülkle Post adlı bir özelliğe sahip olduğunu varsayan {{Post.title}} kullanıyorum. Öyleyse şunu ekleyelim: (işlev (açı) {
‘sıkı kullan’;
Angular.module (‘Belajarangular’, [])
.Controller (‘postxample’, [‘$ scope’, işlev ($ scope) {
$ scope.post = {
Başlık: ‘Başlığı gir’};
}]);
}) (window.sudut);Şimdi bunu son bölümün görünümüyle birleştirebilir ve diğer öğeleri mucizevi bir şekilde güncellemek için girdiyi görebilirsiniz.
Bu örneği HTML’de ve işleyen dosyalarda birleştirilmiş görmek istiyorsanız, bunu bu plunker üzerinde yapabilirsiniz.Aslında, onu açmanızı ve tek başına denemeye başlamanızı şiddetle tavsiye ediyorum.Daha fazla adım atmanın açısal bağlanma birçok varsayılan denetleyicisi vardır.Bunu sizin için dahil etmeyeceğim çünkü Angular’ın iyi bir belgesi var.Size bir giriş olarak saklanma yönünü göstermek istiyorum.Devam edelim ve Formumuza Gönder düğmesini ekleyelim.Bu şu kadar basit olabilir: ama, birisi Post.Title değerini varsayılan “Başlık Enter” den değiştirene kadar gizleyelim.Şuna girişi güncelleyin: başlıkını girin
Bu yeni gizleme direktifi, bağlamadaki ifade doğru olmadıkça girişi gizli hale getirecektir. Bu arada, girişi gizlemek ve görüntülemek, açısalın nasıl çok havalı bir arayüz oluşturabileceğinin ve güncellenmeye devam edebileceğinin sadece bir örneğidir. Ancak, daha fazla arayüz güncellemesinin, doğru yapılmazsa, araç kullanan birinin bunu kullanmak için daha zor olduğunu unutmayın. Açısal sevmemin nedenlerinden biri, açısal Aria’nın doğru Aria etiketini işaretlemenize yerleştirmek için çok fazla işi otomatikleştirmesidir. Lütfen modüle bakın ve ne yaptığına ekstra dikkat edin ve başvurunuza hala erişilebilmesi için yapılmaz. İlk başta garip görünebilir, denetleyicimde Post.Title’yi sadece başlığı değil. Teknik olarak yapabilirim, ancak yazıyı ayırıyorum çünkü kapsam da işlevler içerebilir. Örneğin, gizlememize yönelik daha karmaşık mantığa ihtiyacımız olursa, işlevi oraya çağırabiliriz. Bu işlevler denetleyicideki $ kapsamına eklenebilir ve bağlanma yoluyla çağrılabilir. Bunu nasıl kullanacağımızın mükemmel bir örneği, direktif göndermektir. Bu yön, form gönderildiğinde açısal ne yapacağını söylemek için kullanılır. Form öğesine gönderme ekleyelim, böylece denetleyicimiz şimdi şöyle görünüyor:

başlıkını girin

{{Post.Title}}
Denetleyiciye, Gönder işlevini $ kapsamına ekleyin: $ Scope. Send = function () {
Uyarı (‘Kaydet’);
}
Bu, formunuz gönderildiğinde bir uyarı uyarısına neden olur. Bu, kontrolör ve görünüm arasındaki bağı anlamak için yeterlidir. Ayrıca, modelimizi API REST’den alınan içeriğe göre yapmak için ihtiyacımız olan temel bilgileri de veriyor. Bunu yapmak, bir sonraki makalemde tork için tartışacağım $ HTTP Angular Hizmetlerinin kullanılmasını gerektirecektir. Ayrıca, hizmete girmeden önce çok önemli yön öğrenmelisiniz: diziyi ve nesneyi tekrarlamak için kullanılan tekrarlayıcı. Umut açısında, bu değişikliği takip etmek için daha önce gösterdiğim plunkeri değiştirdiniz. Şimdi böyle görünmeli. Mevcut görünümde, sadece bir gönderi var. Tabii ki, birçok yazının bir listesini yapmak istiyoruz ve her biri aynı şekilde görüntüleniyor. Bunu her zaman geleneksel WordPress temasında yaptık. Geçerli WP_Query nesnesindeki tüm yayınları tekrarlamak için bir döngü kullanıyoruz. Angular, öğelerin koleksiyonunu kapsama alanını tekrarlamamızı sağlayan NGEPEATER adlı yönlendirmeler verir. Bunu yeni bir görünüm ve denetleyici ekleyerek açıklayalım. Başlamak için, $ kapsamında birçok yayın içeren postsexample adlı yeni bir denetleyici ekleyelim. Bu bizim yeni denetleyicimiz: .Controller (‘postxample’, [‘$ scope’, işlev ($ scope) {
$ scope.post = {
Başlık: ‘Başlığı Girin’
};
}]). Denetleyici (‘possexample’, [‘$ scope’, işlev ($ scope) {
$ scope.postingan = [{başlık: ‘bir post’},
{Başlık: ‘pos dua’}
];
}]);Şimdi modelimizde bir yazı var, yeni bir görünüm yaratabiliriz.Bu ekranın şablonunda, bir döngü yapmak için bir tekrarlayıcı kullanıyoruz.Tekrarlayıcının sözdizimi, foreach php döngüsünün tersidir.PHP’de kullanırız: foreach ($ Post olarak $ Post) köşe tekrarlayıcımız şuna benziyor:
Gördüğünüz gibi, tekrarlamak istediğimiz modelin bir parçası olarak alıyoruz. Bu durumda, döngüde kullandığımız “yazı” ve ad, “post”.Güncellenmiş bir şablonun izlenmesi:

Gönderi:

{{yazı başlığı}}

Güncellenmiş demomu da görebilirsiniz. Başlamaya hazırsınız, bu çok fazla görünmeyebilir, ancak bu AngularJ’lerin temelleridir. Bir sonraki makalemde, WordPress API REST gibi uzun mesafeli bir API’ya Ajax istekleri yapmak için $ HTTP bileşeninin nasıl kullanılacağını tartışacağım. Bileşen, Ajax JQuery bileşeni gibi çalışır, bu nedenle aşina iseniz, devam edip veremeyeceğinizi ve sabit kod verilerinizi uzun mesafeli bir API’dan verilerle değiştirmeye başlayabileceğinizi göreceksiniz. Ayrıca, açısalın açısal olduğunu unutmayın. WordPress REST API’sını JSON verilerinin kaynağı olarak kullanmak küçük ayrıntılardır. WordPress Rest API ile çalışmakla ilgili güzel şeylerden biri, sizi yeni teknolojiye ve teknoloji hakkındaki tüm eğitim kaynaklarına açmasıdır. Bir WordPress geliştiricisiyseniz, JQuery ile çalışmaya AngularJS veya benzeri bir çerçeveden çok daha alışkın olabilirsiniz. Bu StackOverflow cevabının, JQuery’nin sizi DOM hakkında düşünmeye teşvik ettiğini düşünmeye alışkın olanlar için yeterli olduğunu tavsiye edemem. Angularjs çok popüler bir çerçevedir ve orada öğrenmenize yardımcı olacak birçok iyi kaynak vardır. WordPress açısal kaynakları arıyorsanız, REST WordPress ve AngularJS ile uygulamalar oluşturma ile ilgili Torsi Roy Sivan Katkıda Bulunma Serisi, WordPress Rest API ile AngularJS kullanma veya WordPress Rest API kursumun dördüncü kısmını kullanın. WordCamp Miami’de WordPress ile açısal kullanımı hakkında iki ders verdim.