Onun açısal 8?

Feb 8, 2026
Nasıl Yapılır
Angular 8
(Görüntü Kredi: Gelecek)

Açısal 8, Google'ın açısalının en son sürümüdür - en iyi javascript çerçeveleri etrafında. Bu makalede, açısal 8 hakkındaki özel olanları takip edeceğiz ve size nasıl başlayacağınızı göstereceğiz. İlk olarak, şu ana kadar çerçevede olanlara kısa bir bakış.

Açısının Girişi, Web Geliştirmede Paradigma Vardiyası'na yol açtı: Çoğu kütüphane kendilerini nispeten sınırlı mimari etkiye sahip geliştiricilere destek sağlamaya sınırlarken, açısal geliştirici ekibi diğer yöne gitti. Ürünleri sizi belirli bir mimariyi kullanmaya zorlar, aynı zamanda ticari olarak anlamsızlığa kadar zorlanıyor. Aslında, çoğu açısal kod, tarayıcıya çarpmadan önce nispeten karmaşık bir transpilasyon toolchain üzerinden geçer.

Açısal, hem içeride hem de Google Inc dışında, gelişimin içinde hem de büyük - stabilize edilmesinden dolayı. Bu, kopma kodu değişikliklerinin az olduğu anlamına gelir, yarı yıllık yükseltmeler çerçeveyi web tarama manzarasındaki değişikliklere uyarlamaya odaklanır.

Açısal 8 durumunda, örneğin, yeni bir JavaScript derleyicisi dağıtılır (hala deneysel olarak da olsa). Oluşturulan uyumluluk kodunu, eski tarayıcıların pahasına önemli ölçüde daha küçük ve daha hızlı olması için optimize eder. Ayrıca, web işçisi desteği, açısının işleme kabiliyetini arttırmak için entegre edilmiştir. Kısacası, görülecek çok şey var - öyleyse hemen dalın.

Kodsuz bir site tasarlamayı tercih ederseniz, bunlardan birini kolay deneyin Web Sitesi İnşaatçıları . Ve işleri daha da pürüzsüz hale getirmek için, ağ sağlayıcısı hizmet hakkı.

01. Bir sürüm kontrolü çalıştırın

Açısının Toolchain, NODEJS ortamının içinde yaşıyor. Bu yazı itibariyle, node.js 10.9 veya daha iyisi gerekir - eğer kendinizi daha eski bir versiyonda bulursanız, node.js web sitesini ziyaret edin ve bir yükseltme olsun. Aşağıdaki kod bu makinedeki sürüm durumunu gösterir. 

 TAMHAN @ tamhan18: ~ $ düğüm -V
v12.4.0
Tamhan @ tamhan18: ~ $ npm -v
6.9.0

02. Açısal yükleme

Açısal ToolChain, adlandırılan bir komut satırı yardımcı programında bulunur. ng . İyi bilinen NPM üzerinden monte edilebilir. 

 Tamhan @ tamhan18: ~ $ sudo npm install -g @gular / cli
Tamhan @ tamhan18: ~ $ ng versiyonu

Aşağıdaki resimde gösterilen soruyu cevaplamaya dikkat edin.

Click the icon in the top right to enlarge

Büyütmek için sağ üstteki simgeye tıklayın (Resim Kredisi: Tam Hanna)

Aletten sürüm bilgisi almak oldukça zordur - sadece sözdizimi benzersiz değil, aynı zamanda çıktı da verbose (aşağıdaki resme bakın).

Click the icon in the top right to enlarge

Büyütmek için sağ üstteki simgeye tıklayın (Resim Kredisi: Tam Hanna)

03. Proje iskeleti oluşturun

ng Bizim için açısal iskele üretir. Aşağıdaki adımlarda, yönlendirme eklemek ve CSS transpilasyonu için SASS kullanıyoruz. Dağıtımın bir nedenden dolayı başarısız olması durumunda, çalışma dizinini boşaltmalı ve yeniden başlatmalı mı? ng Süper kullanıcı haklarıyla. 

 TAMHAN @ Tamhan18: ~ $ MKDIR Angularspace
Tamhan @ tamhan18: ~ $ CD Angularspace /
TAMHAN @ tamhan18: ~ / mergularspace $ ng Yeni iş parçası

04. Koşum Diferansiyel Yükleme

Açısal'ın yeni sürümü, azaltılmış etki için geriye doğru uyumluluk kodunu optimize eder - denilen bir dosya tarayıcılar listesi Hangi tarayıcıların destekleneceğine karar vermeniz sağlar. Açık tarayıcılar listesi ve kelimeyi çıkarın değil IE 9'dan IE11'in önünde. 

. . .
& gt; % 0.5
Son 2 versiyon
Firefox esr
ölmedi
IE 9-11 # IE 9-11 için destek, 'Değil'.

05. ... ve sonuçları görün

Proje bir derlemeyi sipariş edin, dağıtım klasörüne geçin ve gereksiz harita dosyalarını temizleyin. 

 TAMHAN @ tamhan18: ~ / mergularspace / workertest $
sudo ng inşa
TAMHAN @ Tamhan18: ~ / AngularSpace / Workertest / Dist / Workertest $ ls

Sonuçları görmek için ağacı çağırın - ng Çeşitli kod dosyalarının birden fazla sürümü oluşturur (aşağıdaki resme bakın).

Click the icon in the top right to enlarge

Büyütmek için sağ üstteki simgeye tıklayın (Resim Kredisi: Tam Hanna)

06. Bir Web Çalışanını Yumurta

Web çalışanları JavaScript'in yerel uygulamaların son sınırını girmesine izin verdi: görevlerin kitlesel paralel işlenmesi. Açısal 8 ile, bir web işçisi hakkından hemen önce yaratılabilir. ng komut satırı yardımcı programı. 

 TAMHAN @ tamhan18: ~ / mergularspace / workertest $
sudo ng, web-çalışan myworker üretti
Tsconfig.worker.json (212 bayt) oluşturun
SRC / APP / MYWORKER.Worker.ts (157 bytes) oluşturun
Tsconfig.app.json (236 bytes) güncelleyin
Güncelleme Angile.json (3640 bytes)

07. Kodu Keşfedin

ng Çıktının ilk bakışta korkutucu görünmesi muhtemeldir. Dosyayı Açma SRC / APP / MYWORKER.Worker.ts içinde Kod Düzenleyicisi Seçim, iyi bilmeniz gereken kodu ortaya çıkarır. Webworker Şartname. Prensip olarak, işçi mesaj alır ve bunları gerektiği gibi işler. 

 /// & lt; referans lib = "Webworker" / & gt;
addEventListener ('Mesaj', ({Data}) = & gt; {
 Const Tepki = `İşçi yanıtı
$ {data} `;
 Mesleki Mesaj (Yanıt);
});

08. iskele kurmak

Açısal uygulamalar bileşenlerden oluşur. Web işçiliğimizin ateş edilmesi en iyisi Appcomponent , bu, için bir dinleyici içerecek şekilde genişletildi. Oninit Etkinlik. Şimdilik, sadece durum bilgisi yayar. 

 '@ açısal / çekirdek' dan ithal {bileşen, ONINIT};
@Bileşen({
. . .
})
İhracat Sınıfı AppComponent Uygulamaları Oninit {
 title = 'Workertest';
 ngoninit () {
   konsol.log ("Appcomponent: ONINIT ()");
 }
}

09. Yapıcı eksikliği konusunda endişelenme

Tecrübeli TypeScript geliştiricileri, kodumuzun neden programlama dilinin sağladığı yapıcıyı kullanmadığını soruyor. Bunun nedeni budur. ngoninit Bir başlatma olayı ne zaman gerçekleştiğinde ateşlenen bir yaşam döngüsü olayıdır - bunun sınıf çağrısı ile ilişkili olması gerekmez.

10. Küçük bir derleme koşusu yürütün

Bu noktada, program çalışmaya hazırdır. İçindeki sunucudan yürüteceğiz ng , hizmet komutu ile çağrılabilir. Bu yaklaşımın temiz bir yönü, programın değişiklikleri algılaması ve sinemada projeyi yeniden derlemesidir. 

 TAMHAN @ tamhan18: ~ / mergularspace / workertest $
sudo ng hizmet ediyor

Bunu aşağıdaki resimde eylemde görmek için figürü bir göz atın.

Hit the icon in the top right to enlarge the image

Görüntüyü büyütmek için üstündeki simgeye basın (Resim Kredisi: Tam Hanna)

11. ... ve çıktıyı bulmak

ng servis Genellikle yerel web sunucusunun adresini taklit eder http: // localhost: 4200 / . Web sayfasını açın ve durum çıktısını görmek için geliştirici araçlarını açın. Aklında tut console.log Tarayıcı konsoluna veri verir ve NODEJS örneğinin konsolunu el değmemiş.

12. işe gidin

Bu noktada zaman içinde, işçinin bir örneğini oluştururuz ve bir mesajla sağlıyoruz. Sonuçları daha sonra tarayıcı konsolunda gösterilir. 

 Eğer (işçi tipi! == 'undefined') {
 // Yeni bir tane oluştur
 Const Worner = Yeni işçi ('./ Myworker.worker', {Tip: 'module'});
 işçi.onmessage = ({data}) = & gt; {
   console.log ('Sayfa mesajı var: $ \
{veri\}');
 };
 işçi. PostMessage ('merhaba');
} Başka {
     konsol.log ("işçi desteği yok");
}

13. Ivy'yi keşfedin

Açısal gelecekteki sürümleri daha da gelişmiş bir derleyici kullanacak, daha da küçük görünümlere yol açar. Ürün henüz bitmese de, sarmaşık özellikli bir iskelet yoluyla yayılabilir NG Yeni Ivy-Project - Enable-Ivy . Alternatif olarak, Snippet'te gösterildiği gibi derleyici ayarlarını değiştirin. 

 "AgularcompilerOptions": {
       "EnableIvy": Doğru
}

Bir uyarı sözü: Ivy, inanılmaz büyüklük düşüşlerine yol açar, ancak ücretsiz değildir. Ürün henüz stabilize etmedi, bu yüzden üretken ortamlarda kullanılması tavsiye edilmez.

14. Değiştirilmiş NG işlemeyi deneyin

Açısal ng Komut satırı aracı bir süre için dahili olarak çocuk komut dosyalarını kullandı. Açısal 8 UPS ANTE ANTE, ayrıca, uygulamanızın monte edildiği ve derlendiği için kendi görevlerinizi çalıştırmak için bu tesisi kullanın. 

 "Mimar": {
       "inşa etmek": {
         "Oluşturucu": "@ Açısal-Devkit /
Yapı-Açısal: Tarayıcı ",

Bir derli uygulama ng Scriptler, doğrudan bulut hizmetlerine uygulamaları yüklemeyi içerir. Git deposu Çalışmanızı bir FireBase hesabına yükleyen yararlı bir komut dosyası sağlar.

15. Geliştirilmiş göçün tadını çıkarın

Angularj'lar olarak da bilinen açısal 1.x'ten uzaklaşan geliştiriciler, Navigator'u 'kombine' uygulamalarda işe yaramasını sağlayan sorunların adil bir şekilde payına sahipti. Yeni birleşik konum servisi bu süreci daha pürüzsüz hale getirmeyi amaçlamaktadır.

16. Çalışma Alanı Kontrolünü Keşfedin

Büyük projeler çalışma alanı yapısını dinamik olarak değiştirme yeteneğinden yararlanır. Bu, açısal 8.0'da tanıtılan yeni çalışma alanı API üzerinden yapılır - bu adıma eşlik eden snippet, davranışa hızlı bir şekilde genel bir bakış sunar. 

 Async işlevi gösterdi () {
   Const Host = çalışma alanları.
creatworkspacehost (yeni nodejssynchost ());
   Const Workspace = Çalışma alanlarını bekliyor.
ReadWorkSpace ('Yolu / / Çalışma Alanı / Dizini /',
ev sahibi);
   Const Project = Workspace.Projects.
Al ('My-App');
   Const BuildTarget = Project.Targets.
almak ('build');
   buildTarget.Options.Ontimization = true;
   Çalışma alanlarını bekliyor.WriteWorkspace (çalışma alanı,
ev sahibi);
}

17. Süreci Hızlandırın

Binası Büyük JavaScript kodları bazları sıkıcı olur. Angularj'lerin gelecekteki sürümleri, Google'ın Bazel oluşturma sistemini, işi hızlandırmak için kullanacak - ne yazık ki, yazma sırasında primetime hazır değildi.

18. Yürüyen ölülerden kaçının

Google, kodu kırmamak için aşırı özen gösterse de, bazı özelliklerin artık ihtiyaç duyulmadığı için kaldırılması gerekir. Kontrol Bu amortismanlar listesi Kaçınılması gereken özellikler hakkında daha fazla bilgi edinmek için.

19. Değişiklik günlüğüne bakın

Her zaman olduğu gibi, bir makale, bir sürümün tamamına asla adalet yapamaz. Neyse ki, Bu değişiklik günlüğü Tüm değişikliklerin ayrıntılı bir listesini sunar - sadece bir özelliğin nabzını kontrol etmek istemeniz durumunda, özellikle sevgili.

Sitenize yüklemeye hazır birçok dosya var mı? Onları en güvenilir olarak geri Bulut depolama .

Bu makale başlangıçta yaratıcı web tasarım dergisinde yayınlandı Web tasarımcısı .

Daha fazla oku:

  • Açısal olarak çok dilli destek ekleyin
  • En iyi JavaScript API'leri
  • Daha hızlı kod yapılır, daha hafif JavaScript

Nasıl Yapılır - En Popüler Makaleler

Amazon Başbakan Günü 2020 Başarısız Olmak

Nasıl Yapılır Feb 8, 2026

(Görüntü Kredi: Amazon) Henüz tam tarihi bilmemize rağmen Amazon Başbakan Günü 2020 Yine de, b..

P5.JS ile veri görselleştirmeyi keşfedin

Nasıl Yapılır Feb 8, 2026

(Görüntü Kredi: Net Dergisi) P5.JS, ünlü masaüstü yaratıcı kodlama ortamının işlenmesinin en son JavaScri..

Google'ın bulut vizyonuna yönelik bir rehber

Nasıl Yapılır Feb 8, 2026

Makine öğrenme. Derin öğrenme. Doğal dil işleme. Bilgisayar görüşü. Otomasyon. Ses tanıma. Muhtemelen tüm bunları ve..

Duyarlı ve cihaz-agnostik formların nasıl tasarlanması

Nasıl Yapılır Feb 8, 2026

Bir kayıt akışı mı yoksa çoklu görüşlü bir step, formlar, dijital ürün tasarımının en önemli bileşenlerinden bir..

15 fantezi portre ipuçları

Nasıl Yapılır Feb 8, 2026

Sayfa 1/2: Sayfa 1 Sayfa 1 Sayfa 2 ..

Fırçalarınızı yağlardaki geliştirmek

Nasıl Yapılır Feb 8, 2026

Yağlı boyalar, güçlü ve ilginç fırçaları elde etmek için ideal ortamı sunar. Bir sanatçının fırça darbeleri tarzı, işlerini tanımlayan ve ona kişiliğe sahip şeydir. Ayr�..

Yağlı boya ile nasıl başlanır

Nasıl Yapılır Feb 8, 2026

Yağlarla boyamak, sanat oluşturmak için heyecan verici bir yoldur. Bununla birlikte, pek çok insan yağlı boyalar aracılığıyla korkutulabilir, aslında öğrenmenin ideal bir yolunu ..

Kullanıcı dostu mobil arayüzleri nasıl tasarlanır

Nasıl Yapılır Feb 8, 2026

Bazı mobil tasarımlar bir sorundan muzdariptir: yüzeyde harika görünebilirler, ancak bunları kullanmaya başlayabilirler ve..

Kategoriler