Angular, tek sayfalık uygulamalar oluşturmak için kullanılan bir TypeScript geliştirme platformu ve çerçevesidir.

Angular'ın karmaşık bir geçmişi vardır. Geliştiriciler, bu çerçevenin (AngularJS) ilk sürümünü oluşturmak için JavaScript'i kullandılar. Angulargeliştiricileri daha sonra Angular'ın tüm ardışık sürümlerini oluşturmak için TypeScript'i kullandılar (ilk sürümdeki hataların sayısı nedeniyle).

2021 itibariyle, Angular'ın en son sürümü 12.0'dır. Bu makalede, Angularframework hakkında bilmeniz gereken her şeyi öğreneceksiniz.

açısal nedir?

Birçok kişi Angularas'ı bir çerçeve olarak tanımlar ve bu tanım yanlış olmasa da Angular sadece bir çerçeve değildir. Angular aynı zamanda bir geliştirme platformudur. Bu, Angular uygulamalarını çalıştıran bir donanım ve yazılım sistemine sahip olduğu anlamına gelir.

TypeScript üzerine kurulmuş olmasına rağmen, platform kodunun çoğunu JavaScript'te yazabilirsiniz. Çoğu çerçeve gibi, Angular bileşen tabanlıdır. Bu, Angular kullanıcı arabiriminin her bölümünün bağımsız bir varlık olarak ele alındığı ve yeniden kullanılabilir kod ve ölçeklenebilir uygulamaların oluşturulmasına yol açtığı anlamına gelir.

Angular'ı kullanmak için HTML, CSS ve JavaScript'e aşina olmanız gerekir (TypeScript'i bilmek bir varlıktır, ancak bir gereklilik değildir). Angularis, sıklıkla VueJS ve ReactJS ile karşılaştırılır ve ana şikayetlerden biri, Angular'ın daha dik bir öğrenme eğrisine sahip olmasıdır.

İlgili: ReactJS Nedir ve Ne İçin Kullanılabilir?

Angular (bir geliştirme platformu olarak), aşina olmanız için daha fazla sayıda çekirdek yapıya sahip olduğundan, bu şaşırtıcı değildir. Bu yapılar şunları içerir:

• Modüller
• Bileşenler
• şablonlar

Ve bu temel özellikleri anlamak, Angular geliştirici olma yolunda ilerlemenizi sağlayacaktır.

Açısal Dosyaları Keşfetmek

Angular uygulaması, yeni proje klasörünüzde birçok dosya oluşturur (aşağıdaki resimde görebileceğiniz gibi). Angular'ı bilgisayarınıza nasıl kuracağınıza ilişkin talimatlar için Angular'ın resmi web sitesine bakın..

Ana proje klasörü içindeki daha önemli dosyalardan biri, paket.json dosya. Bu dosya size projenizin adını, projenize nasıl başlayacağınızı söyler (hizmet etmek), projenizi nasıl oluşturacağınızı (inşa) ve projenizi nasıl test edeceğinizi (ng testi) Diğer şeylerin yanı sıra.

Ana proje klasörünüz ayrıca iki klasör içerir—node_modules ve kaynak. NS kaynak klasör, tüm geliştirmenizi yapacağınız yerdir; birkaç dosya ve klasör içerir.

src Klasörü

NS stiller.css dosyası, tüm genel stil tercihlerinizi koyacağınız yerdir ve index.html dosya, tarayıcınızda görüntülenen tek sayfadır.

index.html Dosyasını Keşfetmek

içinde değiştirmek isteyeceğin tek şey index.html Yukarıdaki dosya uygulamanın başlığıdır. NS Yukarıdaki HTML dosyasının gövdesindeki etiket, app.component.ts uygulama klasöründe bulunan dosya (aşağıdaki resimde görebileceğiniz gibi).

app.component.ts Dosyasını Keşfetme

{Bileşen }'i '@angular/core'dan içe aktarın;
@Bileşen({
seçici: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
dışa aktarma sınıfı AppComponent {
başlık = 'uygulamam';
}

NS app.component.ts dosya kullanır uygulama kökü içinde bulunan seçici index.html yukarıdaki dosya. kullanır app.component.html şablon olarak dosya ve app.component.css stil için dosya.

NS app.component.css dosya oluşturulduğunda boştur çünkü HTML düzeniyle birlikte tüm stil tercihleri app.component.html dosya.

Angular uygulamasını şu komutla çalıştırma servis --open komutu tarayıcınızda aşağıdakileri görüntüler:

Tarayıcınızda görüntülenenleri değiştirmek için, app.component.html dosya.

Bu dosyanın içeriğini aşağıdaki kodla değiştirmek:

Selam Dünya

Tarayıcınızda aşağıdaki çıktıyı üretecektir:

Açısal Modülleri Anlama

Her Açısal uygulama olarak bilinen temel bir modül sistemi üzerine kuruludur. NgModülleri. Her uygulama en az bir tane içerir NgModülü. Açısal den iki modül üretir. yeni emretmek (app-routing.module.ts ve app.module.ts).

NS app.module.ts dosya, uygulamanın çalışması için bulunması gereken kök modülü içerir.

app.module.ts Dosyasını Keşfetme

{ NgModule } öğesini '@angular/core'dan içe aktarın;
{ BrowserModule } öğesini '@angular/platform-browser'dan içe aktarın;
{ AppRoutingModule } dosyasını './app-routing.module'den içe aktarın;
{ AppComponent } dosyasını './app.component' içinden içe aktarın;
@NgModule({
beyanlar: [
Uygulama Bileşeni
],
ithalat: [
tarayıcıModülü,
AppRoutingModule
],
sağlayıcılar: [],
önyükleme: [AppComponent]
})
dışa aktarma sınıfı AppModule { }

Yukarıdaki dosya JavaScript'i kullanıyor içe aktarmak içe aktarma ifadesi NgModülü, NS TarayıcıModülü, NS Uygulama Bileşeni, ve AppRoutingModule (projedeki ikinci NgModule'dür).

NS @NgModule dekoratör ithalattan sonra gelir. olduğunu belirtir app.module.ts dosya gerçekten bir NgModülü. NS @NgModule dekoratör daha sonra birkaç diziyi yapılandırır: beyannameler, NS ithalat, NS sağlayıcılar, ve önyükleme.

NS beyannameler dizi, belirli bir gruba ait bileşenleri, yönergeleri ve boruları depolar. NgModülü. Ancak, bir kök modül durumunda yalnızca Uygulama Bileşeni içinde saklanır beyanname dizi (yukarıdaki kodda görebileceğiniz gibi).

NS ithalat dizi diğerini içe aktarır NgModülleri uygulamada kullandığınız NS ithalat yukarıdaki koddaki dizi, TarayıcıModülü (DOM oluşturma gibi tarayıcıya özel hizmetleri kullanmasına izin verir) ve AppRoutingModule (bu, uygulamanın Açısal yönlendirici).

İlgili: Web Sitelerinin Gizli Kahramanı: DOM'yi Anlamak

NS sağlayıcılar dizi, diğer bileşenlerde bulunan hizmetleri içermelidir. NgModülleri kullanabilirsiniz.

NS önyükleme dizi çok önemlidir, çünkü Angular'ın oluşturup içine eklediği giriş bileşenini içerir. index.html ana proje klasöründeki dosya. Her Angular uygulaması şuradan başlatılır: önyükleme kökteki dizi NgModülü tarafından önyükleme NS NgModülü (bu, her bir bileşeni önyükleme tarayıcı DOM'sindeki dizi).

Açısal Bileşenleri Anlama

Her Angular bileşeni, dört belirli dosyayla oluşturulur. Yukarıdaki uygulama klasörü resmine bakarsanız, aşağıdaki dosyaları görürsünüz:

• app.component.css (bir CSS dosyası)
• app.component.html (bir şablon dosyası)
• app.component.spec.ts (bir test spesifikasyon dosyası)
• app.component.ts (bir bileşen dosyası)

Yukarıdaki tüm dosyalar aynı bileşenle ilişkilendirilmiştir. kullanırsanız oluşturmak yeni bir bileşen oluşturmak için komut, yukarıdakilere benzer dört dosya oluşturulacaktır. NS app.component.ts dosya şunları içerir: kök bileşenbileşenin farklı yönlerini (şablon ve stil gibi) birbirine bağlayan.

app.component.ts Dosyasını Keşfetme

{ Bileşen }'i '@angular/core'dan içe aktarın;
@Bileşen({
seçici: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
dışa aktarma sınıfı AppComponent {
başlık = 'uygulamam';
}

NS app.component.ts dosyası, Angular'ın çekirdeğinden "Bileşen"i içe aktarmak için JavaScript içe aktarma ifadesini kullanır. Sonra @Bileşen decorator, sınıfı bir bileşen olarak tanımlar. NS @Bileşen dekoratör, aşağıdakilerden oluşan bir nesne içerir: seçici, a şablon URL'si, ve bir stilUrl'ler dizi.

NS seçici anlatır Açısal ilgili etikete sahip herhangi bir HTML şablonuna uygulama bileşeninin bir örneğini eklemek için seçici (Böylece etiket). Ve eğer koda tekrar bir göz atarsanız, index.html yukarıdaki dosyayı bulacaksınız etiket.

Ana uygulama bileşeni dosyası ayrıca aşağıdakileri kullanarak şablon dosyasına bağlanır: şablon URL'si Emlak. bu app.component.html Belirli bir bileşenin bir Angular uygulamasında nasıl oluşturulması gerektiğini özetleyen dosya.

Nesnedeki son özellik, stilUrl'ler. Bu özellik, bir dizi stil sayfasına başvurur; bu, birden çok stil sayfası uygulayabileceğiniz anlamına gelir. tek bir bileşen (böylece src klasöründeki global stil sayfasını styleUrls dizisine şu şekilde ekleyebilirsiniz: kuyu).

Açısal Şablonları Anlama

NS app.component.html file, bir Angular şablonunun bir örneğidir. Bu dosya, bir HTML dosyası ve bir bileşen dosyasıdır (uygulama bileşeni). Bu nedenle, her bileşenin bir HTML şablonu olması gerekir, çünkü bir bileşenin DOM'da nasıl oluşturulacağını ana hatlarıyla belirtir.

Sıradaki ne?

DOM'u anlamak bir sonraki en iyi hamlenizdir. Açısal platform ve çerçeveyi üstlenmek kuşkusuz zorlayıcıdır. Bununla birlikte, mümkündür ve Angular'ın bileşenlerini DOM'da oluşturduğu göz önüne alındığında, DOM hakkında bilgi edinmek (Angular'da ustalaşmaya çalışırken) başka bir harika harekettir.

Web Sitelerinin Gizli Kahramanı: DOM'yi Anlamak

Web tasarımını öğreniyor ve Belge Nesne Modeli hakkında daha fazla bilgiye mi ihtiyacınız var? İşte DOM hakkında bilmeniz gerekenler.

Sonrakini Oku

Yazar hakkında