AngularJS’ye Başlarken | Çoğul görüş

Bu, AngularJS’yi kullanmaya başlamak için hızlı bir başlangıç ​​kılavuzudur. AngularJS (2012’de piyasaya sürüldü), şimdi sadece Angular (2016’da piyasaya sürüldü) olarak adlandırılan şeyin eski bir sürümü olsa da, AngularJS’nin benimsenmesi çok büyüktü ve hala birçok kurumsal sistemde kullanılıyor. Yeni bir sistem oluşturuyorsanız, bunun yerine Angular’ın en son sürümünü kontrol etmelisiniz. Ancak eski bir AngularJS sistemi üzerinde çalışmayı planlıyorsanız ve hızla hızlanmak istiyorsanız doğru yerdesiniz! Ayrıca, bir video eğitiminden öğrenmeyi tercih ederseniz, AngularJS Fundamentals Pluralsight kursuna göz atabilirsiniz.

AngularJS Uygulamamızı Önyükleme

Başlamak için önce açısal içe aktarmanız gerekir. Bunu, html’nizin bölümünde CDN’den şöyle yapabilirsiniz:

kaynak=”https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js“>

Aşağıdaki adımların her birini takip edebilmeniz için zaten içe aktarılmış bir jsFiddle burada. Her değişiklikten sonra yeniden oluşturmaya zorlamak için jsFiddle’ınızı kaydetmeyi unutmayın.

Ardından, tek sayfalık uygulamamıza AngularJS’yi bağlamamız gerekiyor. Yukarıda içe aktarılan AngularJS ile, tek sayfa uygulamamızın index.html sayfamızdaki herhangi bir öğeye bir ng-app etiketi ekleyebiliriz. Bu genellikle gövde öğesinde şu şekilde yapılır:

“`

“`

Devam edin ve burada gösterildiği gibi body öğesine ng-app yönergesini ekleyin. Bu yazıda yönergelere girmeyeceğiz, ancak ng-app yerleşik bir AngularJS yönergesidir. Yönergeler, esasen ek işlevsellik ve/veya UI öğelerini kapsayan html öznitelikleri veya öğeleridir.

Temel İşaretleme

Artık AngularJS ifadelerini html ile karıştırmaya başlayabiliriz. Belgemize şu satırı ekleyelim:

“`

Merhaba {{1 + 1}} Dünya!

“`

Bu, çift parantez içindeki bit dışında tüm html’dir. Bu bir AngularJS ifadesidir! Angular bu ifadeyi değerlendirecek ve sonucu verecektir. Bu ifade “Merhaba 2 the World!” çıktısıyla sonuçlanacaktır. çevreleyen

içinde. Bu işe yarar, çünkü ifademiz ng-app yönergesine sahip olan body öğesinin içindedir, bu nedenle AngularJS, bunun gibi ifadeler için etiketimizin içindeki her şeyi tarar ve bunları değerlendirir.

ng-model ile Model Bağlama

AngularJS, html öğelerini sahne arkasındaki veri öğelerine bağlamak için iki yönlü model bağlama kullanır. Bir kullanıcı nesnemiz olduğunu hayal edin. Bir girdi öğesini, bu kullanıcı nesnesinin firstName özelliğine şu şekilde bağlayabiliriz:

“`“`

Bu ng-model yönergesi, bizim için tüm veri bağlamamızı sihirli bir şekilde işler. Bu nedenle, kullanıcı bu girdi öğesine herhangi bir şey yazdığında, kullanıcı nesnesinde güncellenir. Şimdi bu sınıra sahip olduğumuza göre, Hello world div’imizi bu sınır değeri kullanacak şekilde değiştirelim:

Merhaba {{user.firstName}}

Şimdi o giriş alanına yazmayı deneyin ve ne olduğunu görün. Tatlı! Biz bu girdi alanına yazarken model güncellenir ve {{user.firstName}} ifademiz yeni değeri yansıtacak şekilde yeniden değerlendirilir. Bu, işte iki yönlü veri bağlamadır!

Veri Modellerimizi ng-init ile Başlatma

Aşağıda, denetleyiciler hakkında konuştuğumuzda bunu yapmanın daha iyi bir yolunu göreceğiz, ancak yerleşik ng-init yönergesini kullanarak veri modellerinizi başlatabilirsiniz. Bunu göstermek için, birazdan burada kullanacağımız bir dizi kullanıcıyla veri modelimizi başlatalım. Bunu vücut etiketimizde şöyle yapabiliriz:

“`

ng-app

ng-init=”kullanıcılar = [{firstName: ‘Jane’, lastName: ‘Doe’, age:29}, {firstName: ‘John’, lastName: ‘Doe’, age: 32}]”>

“`

Bu ng-init satırındaki tırnak içindeki her şey sadece basit bir javascript. Sadece bir users dizisi oluşturuyoruz ve diziyi iki kullanıcı nesnesiyle (Jane ve John) dolduruyoruz. Bu dizi daha sonra modelimize ekleniyor. Artık sayfamızda erişebileceğimiz bir dizi kullanıcımız var.

ng-repeat ile Dizilere Bağlama

Bir web uygulamasında, bir dizi nesne üzerinde döngü yapmak ve dizideki her nesne için bir şey görüntülemek istemek çok yaygındır. Bunu ng-repeat yönergesini şu şekilde kullanarak yapabiliriz:

“`

“`

Şimdi, bu div dizideki her öğe için tekrarlanacak. Başka bir deyişle, dizideki her kullanıcı için ortaya çıkan html belgemize yeni bir div eklenecektir. Bunu, bu div’e şöyle bir içerik ekleyerek gösterebiliriz:

“`

{{user.firstName}} {{user.lastName}} – Yaş: {{user.age}}

“`

Filtreleri Kullanma

AngularJS ile verileri filtrelemek kolaydır. Bu ng-repeat yan tümcesini şimdi şöyle görünecek şekilde güncellemeyi deneyin:

“`

“`

Boru ( | ) sembolü Angular’a bir filtre uygulamak istediğimizi söyler ve ardından gelen filtre ifadesi, users dizisini o dizideki kullanıcı nesnelerinin herhangi bir özelliğinde Jane kelimesine sahip olan kullanıcılar için filtrele der. Bunu kaydederseniz, çıktının artık yalnızca Jane kullanıcısını çıkardığını görebilirsiniz! Oldukça havalı. Tüm bunların ne kadar kolay olduğu şaşırtıcı.

Filtrenizi şu şekilde dizide bulunan nesnelerde yalnızca belirli bir alanla sınırlayarak filtrelerinizle daha spesifik olabilirsiniz:

“`

“`

Şimdi yalnızca firstName’in Jane olduğu nesneleri döndürür.

Filtreler, biçimlendirme için de kullanabileceğinizi düşündüğünüzde, aslında biraz komik bir isimdir. Örneğin, para birimi olarak biçimlendirmek için sayısal alanlara uygulayabileceğiniz yerleşik bir para birimi filtresi vardır. Örneğin, bunun gibi bir ifade maaş alanını biçimlendirir: `{{ maaş | para birimi }}`.

Olayları İşleme

Angular, olaylara yanıt vermenize izin vermek için yerleşik yönergelere sahiptir. Örneğin, ng-click olayı, bir düğmeye tıklamak gibi bir öğeye tıklandığında kodu yürütmemize izin verir. Göstermek için, users dizimizdeki ilk kullanıcının soyadını değiştirecek bir buton oluşturalım. Bunu şu şekilde yapabiliriz:

“`“`

Bu düğmeye tıkladığınızda Jill’in soyadının, ng-tekrarımız tarafından görüntülenen verilerde değiştiğine dikkat edin. Oldukça havalı! ng-change, ng-blur, ng-mouseover, vb. gibi olaylar dahil olmak üzere ng-tıklamaya ek olarak birçok yerleşik olay vardır.

AngularJS Denetleyicilerini Kullanma

Şimdiye kadar gösterdiğimiz her şey basit görevler için gerçekten harika, ancak uygulamamız daha karmaşık hale geldiğinden her şeyi html uygulamamızda doğru yapmak istemiyoruz. Html şablonlarınızda ifadelerinize ne kadar JavaScript koyacağınızı sınırlandırmalısınız. İşler daha karmaşık hale geldikçe, kaçınılmaz olarak büyük miktarda JavaScript koyabileceğiniz bir yer istersiniz. Denetleyicilerin devreye girdiği yer burasıdır. Denetleyici temel olarak, uygulamanızın veya html şablonunuzun bir bölümü için tüm javascript’i kontrol eden veya işleyen ayrı bir javascript dosyasıdır. AngularJS Denetleyicileri, AngularJS modüllerine eklenir, bu nedenle bir denetleyici ekleyebilmemiz için önce bir modül eklememiz gerekir. Modülümüzü ve denetleyicimizi eklemek için jsFiddle’ın javascript bölümünü kullanacağız (muhtemelen jsFiddle pencerenizdeki sol alt panel). Bu, ayrı bir JavaScript dosyası oluşturmayı simüle edecektir. Normal bir uygulamada muhtemelen bir .js dosyası oluşturur ve onu bir komut dosyası etiketiyle içe aktarırsınız.

Modülümüzü oluşturmak için bunu jsFiddle’daki JavaScript bölmesine ekleyin:

“`var myModule = angular.module(‘myModule’, []);“`

Tamam, şimdi myModule adında bir AngularJS modülümüz var. Artık bunun gibi bir denetleyici ekleyebiliriz (bunu yukarıdaki satırın altındaki JavaScript bölmesine de ekleyin):

“`

myModule.controller(‘myController’, function($scope) {

});

“`

Tamam, şimdi benim Controller adında bir controller’ımız var. Şimdi JavaScript’imizin bir kısmını bu denetleyiciye taşımaya başlamanın zamanı geldi. Kullanıcı dizimizle başlayalım. Bu users dizisini body elementimize ng-init özniteliğini kullanarak eklediğimizi hatırlıyorsanız, önce bu özniteliği silin ve bunun yerine diziyi denetleyicimizin içine şu şekilde ekleyeceğiz:

“`

myModule.controller(‘myController’, function($scope) {

$kapsam.kullanıcılar =

[

          {firstName: ‘Jane’, lastName: ‘Doe’, age:29},

          {firstName: ‘John’, lastName: ‘Doe’, age: 32}

        ];

});

“`

Burada fark etmiş olabileceğiniz ilk ilginç şey, `$scope` değişkenidir. $scope, bir AngularJS uygulamasında önemli bir kavramdır. Temel olarak uygulamanızın bir bölümünün veri kapsamıdır, bu durumda bu denetleyicinin kapsamıdır. Daha önce kullanıcı dizimizi eklemek için ng-init kullanırken, temel olarak onu body elementimizin içerdiği kapsama ekliyordu.

Şimdi, bir denetleyici kullandığımıza göre, kullanıcı dizisini denetleyicinin kapsamına ekliyoruz. Ancak şu anda bu denetleyici kullanılmıyor, dolayısıyla bu kapsam erişilebilir değil. Bu nedenle, modülümüz de kullanılmıyor, bu yüzden ikisini de şu şekilde body etiketi üzerindeki şablonumuza ekleyelim:

“`“`

Bunların gövde öğesine eklenmesi gerekmez, sayfadaki herhangi bir öğeye eklenebilirler. Bunları burada gövde etiketine koymak, artık tüm sayfamızın denetleyiciye erişmesini sağlar.

Ve şimdi ng-init’i silip denetleyiciyi eklediğinize göre, sayfamızın yeniden çalıştığını görebilirsiniz, ancak şimdi yeni denetleyicimizden kullanıcı verilerini alıyor.

Olayları Denetleyiciyle İşleme

Artık bir controller eklediğimize ve ondan veri aldığımıza göre, event javascript’imizi controller’ımızdaki fonksiyonlara da taşıyabiliriz. Bunu Change Name butonumuzla yapalım. İlk önce, ilk kullanıcının soyadını değiştirmek için yeni denetleyicimizde bir işlev oluşturacağız. Bunu şu şekilde yapabiliriz:

“`

$scope.changeFirstUsersLastName = function(newLastName) {

$ kapsam.kullanıcılar[0].lastName = newLastName

};

“`

Şimdi kapsamımıza, onu şablonumuz için erişilebilir kılan bir fonksiyon ekledik. Şimdi yeni işlevimizi şöyle çağırmak için düğmemizin ng-click olayını değiştireceğiz:

“`“`

Harika, şimdi JavaScript mantığımızı ait olduğu denetleyicimize taşıdık ve bu düğmeyi tıklamak ilk kullanıcının soyadını tekrar başarılı bir şekilde değiştirmelidir.

Bu şimdi tipik bir AngularJS uygulamasına benzemeye başlıyor. Genel yapı bu. Bir denetleyiciye bağlı bir şablonunuz var ve denetleyici, kapsam aracılığıyla şablona veri ve işlevler sağlıyor.

Umarım bu eğitim, bir Angular uygulamasının temel yapısını anlamanıza yardımcı olmuştur. Ancak, özel AngularJS yönergeleri oluşturma ve özel AngularJS hizmetleri oluşturma ve kullanma gibi bazı temel kavramlar dahil olmak üzere AngularJS uygulamalarında çok daha fazlası vardır. Bunlara ve diğer kavramlara daha derin bir dalış için Pluralsight’ın AngularJS Fundamentals kursuna göz atmayı unutmayın.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.