İçerik
- 01. Bir sürüm kontrolü çalıştırın
- 02. Angular'ı kurun
- 03. Bir proje iskeleti oluşturun
- 04. Kablo demeti diferansiyel yüklemesi
- 05. ... ve sonuçları görün
- 06. Bir web işçisi yaratın
- 07. Kodu keşfedin
- 08. İskele kurma
- 09. Yapıcı eksikliği konusunda endişelenmeyin
- 10. Küçük bir derleme çalıştırması yürütün
- 11. ... ve çıktıyı bulun
- 12. işe koyulun
- 13. Ivy'yi keşfedin
- 14. Değiştirilmiş ng işlemeyi deneyin
- 15. Gelişmiş geçişin keyfini çıkarın
- 16. Çalışma alanı kontrolünü keşfedin
- 17. Süreci hızlandırın
- 18. Yürüyen ölülerden kaçının
- 19. Değişiklik günlüğüne bakın
Angular 8, Google Angular'ın en son sürümüdür - piyasadaki en iyi JavaScript çerçevelerinden biri. Bu makalede, Angular 8'in özel yönlerini inceleyeceğiz ve size nasıl başlayacağınızı göstereceğiz. İlk olarak, şimdiye kadar çerçevede neler olduğuna kısaca bir göz atın.
Angular’ın tanıtımı, web geliştirmede bir paradigma değişikliğine yol açtı: çoğu kitaplık, nispeten sınırlı mimari etkiye sahip geliştiricilere destek sağlamakla sınırlıyken, Angular’ın geliştirici ekibi diğer yönde gitti. Ürünleri, zordan ticari olarak anlamsız olana kadar değişen sapmalarla sizi belirli bir mimari kullanmaya zorlar. Aslında, çoğu Angular kodu, tarayıcıya ulaşmadan önce nispeten karmaşık bir kopyalama araç zincirinden geçer.
Google Inc içinde ve dışında Angular'ın muazzam başarısı nedeniyle, geliştirme büyük ölçüde istikrar kazandı. Bu, kırılma kod değişikliklerinin az olduğu anlamına gelirken, altı ayda bir yapılan yükseltmeler, çerçeveyi web tarama ortamındaki değişikliklere uyarlamaya odaklanır.
Örneğin, Angular 8 durumunda, yeni bir JavaScript derleyicisi (yine de deneysel olarak) konuşlandırılır. Oluşturulan uyumluluk kodunu, eski tarayıcılar pahasına önemli ölçüde daha küçük ve daha hızlı olacak şekilde optimize eder. Ayrıca, Web Çalışanı desteği, Angular’ın işleme kapasitesini artırmak için entegre edilmiştir. Kısacası, görülecek çok şey var - öyleyse hemen dalalım.
Kod içermeyen bir site tasarlamayı tercih ediyorsanız, bu kolay web sitesi oluşturuculardan birini deneyin. İşlerin daha da sorunsuz çalışmasını sağlamak için web barındırma hizmetinizi doğru şekilde alın.
01. Bir sürüm kontrolü çalıştırın
Angular’ın araç zinciri, NodeJS ortamında yaşar. Bu yazı itibariyle, Node.js 10.9 veya daha iyisi gereklidir - kendinizi daha eski bir sürümde bulursanız, Node.js web sitesini ziyaret edin ve bir yükseltme edinin. 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. Angular'ı kurun
Angular’ın araç zinciri, adlı bir komut satırı yardımcı programında bulunur ng. İyi bilinen NPM aracılığıyla kurulabilir.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng sürümü
Aşağıdaki resimde gösterilen soruyu cevaplarken dikkatli olun.
Araçtan sürüm bilgilerini almak oldukça zordur - yalnızca söz dizimi benzersiz değildir, aynı zamanda çıktı da ayrıntılıdır (aşağıdaki resme bakın).
03. Bir proje iskeleti oluşturun
ng bizim için Açısal iskeleyi üretir. Aşağıdaki adımlarda, yönlendirme eklemek ve CSS transpilasyonu için Sass kullanmak istiyoruz. Dağıtım herhangi bir nedenle başarısız olursa, çalışma dizinini boşaltın ve yeniden başlatın ng süper kullanıcı hakları ile.
tamhan @ TAMHAN18: ~ $ mkdir açısal uzay tamhan @ TAMHAN18: ~ $ cd açısal alan / tamhan @ TAMHAN18: ~ / açısal uzay $ ng yeni çalışma testi
04. Kablo demeti diferansiyel yüklemesi
Angular'ın yeni sürümü, etkiyi azaltmak için geriye dönük uyumluluk kodunu optimize eder - bir dosya tarayıcı listesi hangi tarayıcıların destekleneceğine karar vermenizi sağlar. Açık tarayıcı listesi ve kelimeyi kaldır değil IE 9 ila IE11'in önünde.
. . . >% 0,5 son 2 sürüm Firefox ESR ölü değil IE 9-11 # IE 9-11 desteği için "değil" seçeneğini kaldırın.
05. ... ve sonuçları görün
Projenin bir derlemesini sipariş edin, dağıtım klasörüne değiştirin ve gereksiz harita dosyalarını temizleyin.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build 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 çok sürümünü oluşturur (aşağıdaki resme bakın).
06. Bir web işçisi yaratın
Web çalışanları, JavaScript'in yerel uygulamaların son sınırına girmesine izin verir: görevlerin büyük ölçüde paralel olarak işlenmesi. Angular 8 ile, bir web çalışanı doğrudan cihazın rahatlığından yaratılabilir. ng komut satırı yardımcı programı.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng web çalışanı oluştur myworker CREATE tsconfig.worker.json (212 bayt) CREATE src / app / myworker.worker.ts (157 bayt) GÜNCELLEME tsconfig.app.json (236 bayt ) UPDATE angular.json (3640 bayt)
07. Kodu keşfedin
ng’In çıktısı ilk bakışta göz korkutucu görünebilir. Dosyayı Açmak src / app / myworker.worker.ts tercih edilen bir kod düzenleyicide, en iyi şekilde bilmeniz gereken kodu ortaya çıkarır. WebWorker Şartname. Prensip olarak, işçi mesajları alır ve gerektiği gibi işler.
/// referans lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `$ {data} için çalışan yanıt; postMessage (response);});
08. İskele kurma
Açısal uygulamalar bileşenlerden oluşur. Web çalışanımızı işten çıkarmak en iyi şekilde AppComponentiçin bir dinleyici içerecek şekilde genişletilen OnInit Etkinlik. Şimdilik yalnızca durum bilgilerini yayınlayacak.
{Component, OnInit} '@ angular / core'dan içe aktarın; @Component ({..}) Dışa aktarma sınıfı AppComponent, OnInit'i uygular {title = 'workertest'; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Yapıcı eksikliği konusunda endişelenmeyin
Deneyimli TypeScript geliştiricileri, kodumuzun programlama dili tarafından sağlanan kurucuyu neden kullanmadığını kendilerine sorarlar. Bunun nedeni şudur ki ngOnInit bir başlatma olayı gerçekleştiğinde tetiklenen bir yaşam döngüsü olayıdır - bunun sınıf çağrısı ile ilişkilendirilmesi gerekmez.
10. Küçük bir derleme çalıştırması yürütün
Bu noktada program çalışmaya hazırdır. Bunu içindeki sunucudan çalıştıracağız. ng, hizmet komutu ile çağrılabilir. Bu yaklaşımın güzel bir yönü, programın değişiklikleri tespit etmesi ve projeyi anında yeniden derlemesidir.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng hizmeti
Bunu aşağıdaki resimde iş başında görmek için şekle bir bakın.
11. ... ve çıktıyı bulun
ng servis yerel web sunucusunun adresini koyar, bu genellikle http: // localhost: 4200 /. Durum çıktısını görmek için web sayfasını açın ve geliştirici araçlarını açın. Unutmayın ki console.log verileri tarayıcı konsoluna çıkarır ve NodeJS örneğinin konsolunu el değmeden bırakır.
12. işe koyulun
Bu noktada, çalışanın bir örneğini yaratır ve ona bir mesaj veririz. Daha sonra sonuçları tarayıcı konsolunda gösterilir.
if (typeof Worker! == ’undefined’) {// Yeni bir const worker = new Worker oluşturun (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’sayfa mesajı aldı: $ {data }’); }; worker.postMessage ("merhaba"); } else {console.log ("Çalışan desteği yok"); }
13. Ivy'yi keşfedin
Angular'ın gelecekteki sürümleri, daha da küçük görünümler sağlayan daha gelişmiş bir derleyici kullanacak. Ürün henüz bitmemiş olsa da, sarmaşık özellikli bir iskelet, ng yeni sarmaşık projesi - enable-ivy. Alternatif olarak, kod parçacığında gösterildiği gibi derleyici ayarlarını değiştirin.
"angularCompilerOptions": {"enableIvy": true}
Bir uyarı: Ivy, inanılmaz boyutlarda küçülmelere yol açar, ancak ücretsiz değildir. Ürün henüz dengelenmemiştir, bu nedenle üretken ortamlarda kullanılması önerilmez.
14. Değiştirilmiş ng işlemeyi deneyin
Angular ng komut satırı aracı bir süre dahili olarak alt komut dosyalarını kullandı. Angular 8, şimdi yapabileceğiniz ante'yi yükseltir, ayrıca, uygulamanız birleştirilirken ve derlenirken kendi görevlerinizi yürütmek için bu özelliği kullanın.
"mimar": {"build": {"builder": "@ angular-devkit / build-angular: tarayıcı",
Temiz bir uygulama ng komut dosyaları, uygulamaları doğrudan bulut hizmetlerine yüklemeyi içerir. Git deposu, çalışmanızı bir Firebase hesabına yükleyen kullanışlı bir komut dosyası sağlar.
15. Gelişmiş geçişin keyfini çıkarın
AngularJS olarak da bilinen Angular 1.x'ten uzaklaşan geliştiriciler, gezginin 'birleşik' uygulamalarda doğrudan çalışmasını sağlayan sorunlardan adil bir pay aldılar. Yeni Birleşik Konum Hizmeti, bu süreci daha sorunsuz 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 becerisinden yararlanır. Bu, Angular 8.0'da sunulan yeni Workspace API aracılığıyla yapılır - bu adımla birlikte gelen snippet, davranışa hızlı bir genel bakış sağlar.
async function demonstrate () {const host = workspaces. createWorkspaceHost (yeni NodeJsSyncHost ()); const çalışma alanı = çalışma alanları. readWorkspace (’yol / / çalışma alanı / dizin /’, ana bilgisayar); const proje = çalışma alanı.projects. get (’uygulamam’); const buildTarget = proje.targets. get (’inşa’); buildTarget.options.optimization = true; await workspaces.writeWorkspace (çalışma alanı, ana bilgisayar); }
17. Süreci hızlandırın
Büyük JavaScript kod tabanları oluşturmak sıkıcı bir hal alır. AngularJS'nin gelecek sürümleri, süreci hızlandırmak için Google'ın Bazel derleme sistemini kullanacak. Ne yazık ki, bu yazı yazılırken kullanıma hazır değildi.
18. Yürüyen ölülerden kaçının
Google, kodu kırmamak için son derece dikkatli olsa da, artık ihtiyaç duyulmadığından bazı özelliklerin kaldırılması gerekir. Kaçınılması gereken özellikler hakkında daha fazla bilgi edinmek için bu amortismanlar listesini kontrol edin.
19. Değişiklik günlüğüne bakın
Her zaman olduğu gibi, bir makale asla tüm bir yayının hakkını veremez. Neyse ki, bu değişiklik günlüğü, özellikle sizin için değerli olan bir özelliğin nabzını kontrol etmek istediğinizde, tüm değişikliklerin ayrıntılı bir listesini sağlar.
Sitenize yüklenmeye hazır çok sayıda dosyanız mı var? Bunları en güvenilir bulut depolamada yedekleyin.
Bu makale ilk olarak yaratıcı web tasarım dergisinde yayınlandı Web tasarımcısı.
