Açısal 4'te yeni olanlar?

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

Mart ayında, açısal ekip 4. versiyonu yayınladı ve onunla birlikte keşfedilecek bazı heyecan verici özellikler. Bu eğitimde size göstereceğiz Bir uygulama nasıl yapılır Bazı bu yeni özelliklerin bazılarını kullanarak, güçlü performans arttırıcısından bazılarını göstermenin yanı sıra, başlık altındaki değişiklikler.

Ne var ne yok?

Açısal ekip, 'görünmez bir makyaj' olarak adlandırıyor, çünkü değişikliklerin çoğu temel kodlama işlevselliğinden ziyade arka planda. Önemli bir değişiklik, doğru kullanıldığında performansı büyük ölçüde iyileştirme potansiyeline sahip olan standart olarak zamanın önündeki derlemeye geçmesidir. Tipescript 2.1+ ayrıca, Bize Bize ES2015'in tüm yeni özelliklerine erişim sağlayan desteklenir.

Bu, temel bilgilerde de önemli değişikliklerin olmadığını söylemek değildir - örneğin, örneğin, bir tane ekleyerek kodumuzu basitleştirmemize olanak sağlayan faydalı bir yeni şablon bağlayıcı sözdizimi var. Başka seçenek ngif ve içinde yerel değişkenler atama yeteneği ngfor .

3.0 özledim mi?

Açısal 4, anlamsal sürümün benimsenen çerçevesinin ilk ana versiyonudur. Öyleyse endişelenme, 3.0'ı kaçırmadın - iki ana güncelleme vardı ve her ikisi de 4.0 sürümüne yuvarlandı.

Ayrıca, açısal 1.x'in şimdi Angularj'lar olarak bilindiğini ve açısal 2+ 'nın sadece açısal olarak adlandırıldığını unutmayın. Bazı üçüncü taraf öğreticiler ve kütüphaneler bu şartların kullanımını güncellememiş gibi dikkatli olun.

Eğitim dosyalarını alın

Bu eğitimde, bir çiçekçi dükkanı uygulamasıyla birlikte çalışacağız. Örnek uygulamayı indirmek için Fileilo , ücretsiz şeyler seçin ve öğreticinin yanındaki ücretsiz içerik seçin. Not: İlk kez kullanıcıların FileSilo'yu kullanmak için kaydolması gerekecektir. Giriş yaptıktan sonra, örnek uygulamayı indirebilirsiniz. İşte .

Başlayalım!

01. Düğümle başlayın

Download and install Node.js by following the instructions in the wizard

Sihirbazdaki talimatları izleyerek NODE.JS'yi indirin ve yükleyin.

Sıfırdan başlayalım ve merhaba bir dünya uygulaması oluşturmak için açısal CLI'yu kullanın. Mevcut bir uygulamayı güncellemek istiyorsanız, 4. adıma geçin. Henüz yapmadıysanız, Düğümü indirin , NPM ile önceden paketlenmiş olan. Zaten bir düğümünüz varsa, komut satırından en az 6.9.x ve npm 3.x.x düğümünü kontrol edin. 

 $ node -v
v6.10.2
$ npm -v
3.10.10

02. Yeni bir proje kur

Create a simple Hello World app in the Angular CLI

Açısal CLI'da basit bir Hello World uygulaması oluşturun

Şimdi bir paket yöneticimiz var, açısal ve açısal CLI'yu takmak için kullanabiliriz. Diğer şeylerin yanı sıra, CLI kolayca yeni projeler ve bileşenler üretmenizi sağlar. 

 $ NPM Kurulum -G @ Açısal / CLI
$ ng yeni my-first-angular4-app # açısal cli komutları 'ng' kullanıyor
$ NG Servis -Open # Bu komut, uygulamanızı önyükleyip tarayıcıda başlatılır

03. Sürümünü kontrol edin

Daha önce açısal bir proje görmediyseniz, kendinizi CLI tarafından oluşturulan dosya yapısı ile tanıştırmak için zaman ayırın. Yeni projemiz için package.json 4.0.0 açısal paketleri listelemelidir. 

 "Bağımlılıklar": {
"@ Açısal / Ortak": "^ 4.0.0",
"@ Açısal / Derleyici": "^ 4.0.0",
"@ Açısal / Çekirdek": "^ 4.0.0",
"@ Açılar / Formlar": "^ 4.0.0",
"@gular / http": "^ 4.0.0",
"@ Açısal / Platform Tarayıcı": "^ 4.0.0",
"@ Açısal / Platform Tarayıcı-Dinamik": "^ 4.0.0",
"@ Açısal / Router": "^ 4.0.0" [...]}

04. Açısal 4'e yükseltme

Listelenen 2.x sürümleriyle mevcut bir açısal bir uygulamanız varsa, çoğu durumda 4. sürüm 4'e güncellenmek gerçekten kolaydır. Sadece ilgili paketleri komut satırından yüklememiz ve güncellememiz gerekir. Mac: 

 $ NPM @ mergular / {ortak, derleyici, derleyici-CLI, çekirdek, formlar, http, platform tarayıcı, platform tarayıcı-dinamik, platform sunucu, yönlendirici, animasyonlar} @Latest Typingcript @ Son - Save

Pencereler: 

& gt; NPM İndirin @ Açısal / Compiler @ @ ARGULAR / COULER @ @ ARGULAR / CORRER-CLI @ @ ARGULAR / CORRE-CLI @ @ ARGULAR / FORTLY @ @ ANGULAR / HTTP @ En Son @ Angular / Platform-Browser @ @ 3Gular / Platform Tarayıcı-Dynamic @ @ ANLGULAR / PLATCH SUNICU @ @ ANGULAR / ROUTER @ @ ANRUTUG / ROUTER @ @ En Son Tipescript @ En Son - Save

05. Öğretici uygulamasını indirin

Bundan sonra, indirebileceğiniz bir açısal 2 örnek uygulama ile çalışacağız. Fileilo (Bunun nasıl yapılacağı hakkında tam notlar için, yukarıdaki Giriş Bkz.). Bu uygulamanın tamamen açıklayıcı amaçlar için yaratıldığını unutmayın. TheFlower Shop uygulamasını kök dizininize indirdikten sonra, bağımlılıkları kurun ve tarayıcıya başlayın. 

 $ NPM yükleme
$ Ng Hizmet --Open

06. Çiçekçi dükkanı 4.0'a yükseltme

Our custom modal module needs renaming [click the icon to enlarge)

Özel modal modülümüzün yeniden adlandırılması gerekiyor [Büyütmek için simgeye tıklayın)

İçinde çiçekçi Rehber, 4.0'a yükseltin. Bazılarımız var Eşleşmeyen Akran Bağımlılığı Yükseltildikten sonra hatalar.

07. Akran bağımlılıklarını düzeltin

Akran bağımlılıkları, aynı bağımlılıkların farklı versiyonlarına dayanan paketlere sahip projeleri yönetmek içindir. Bunları manuel olarak eklemelisin. package.json dosya. Çiçekçi dükkanı için ihtiyacımız olan akran bağımlılıkları, eski sürümlerini içerir. @gular / {Core, http} , rxjs ve zone.js .

Terminal çıktısındaki hataları gözden geçirin ve her bir eksik bağımlılığı ekleyin. package.json . 

 "peerdependencies": {
  "@ Açısal / Çekirdek": "& gt; = 2.0.0",
  "@gular / http": "& gt; = 2.0.0",
  "RXJS": "^ 5.0.0",
  "Zone.js": "0.7.8"
  },

08. İsim değişikliklerine dikkat edin

Çiçekçi dükkanı uygulamamız açık kaynaklı bir özel bileşeni kullanır ng2 modal . Ancak, yazardan beri adlandırma sözleşmesini güncelledi. ngx modal . Bağımlılık adımızı değiştirmemiz ve ng modülü buna göre ithalat. 

 package.json:
"Bağımlılıklar": {
  [...]
  "NGX-MODAL": "0.0.25",
     [...]
  }
app / app.module.ts:
'ngx-modal' dan ithal {modalmodule};

09. VERİMLERİ KONTROL EDİN

Özel modal bileşenimiz ayrıca daha yeni bir sürüme güncellenmeye ihtiyacı var, bu nedenle NPM ile güncellediğinizden emin olun. 

 $ NPM NGX-MODAL @ Son - Save

10. Çalışmanızı kontrol edin

Şimdi bağımlılıklarımızı yamaladık, temizlemek için iyi bir fikir. node_modules ve tekrar bizim package.json . Her şey yolunda giderse, temiz bir yapıya sahip olmalısınız! Eğer yapmazsan, bağımlılık sürelerinizde bir şey hala eksik olabilir. Başka bir bak. 

 $ rm -rf node_modules /
$ npm önbellek temiz
$ npm yükleme
$ Ng Hizmet --Open

Sonraki Sayfa: 11-20 Adımlar

  • 1
  • 2

Geçerli sayfa: Adım 1-10

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

Smugmug mağazanızın nasıl kurulacağı ve optimize edilmesi

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

(Resim Kredisi: Andre Furtado'da Pexels) Ayrıca biri olarak hareket eden basit bir web sitesi oluşturucusu ..

JavaScript kodunuzu görüntüleme kaynağından nasıl gizleyeceğiniz

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

JavaScript kodunuzla önlem almazsanız, onu klonlamak isteyen herkes için kolaylaştırıyorsunuz. Ancak, programlama işlemler..

Sanatçılar için Konsept Tasarım İpuçları

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

Sayfa 1/2: Sayfa 1 Sayfa 1 Sayfa 2 Animasyonda çalışan görsel g..

Sert yüzey modellemenizi 3DS maksimum olarak keskinleştirin

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

Bu eğitimde, içinde sert yüzeyli modeller oluşturmak için kullandığım teknikleri ve yöntemleri paylaşacağım. ..

Bir chatbot deneyimi nasıl tasarlanır

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

Bunu kabul etmeyi ya da olmadığını, mesajlaşma etkileşimi platformları günlük mobil ekran zamanımıza katkıda bulunuyo..

Photoshop'taki Beşarme görüntülerine nihai rehber

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

Tüm Photoshop projelerinden, görüntüleri bir fantastik çerçeveye dönüştürmek belki de en keyifli ve yaratıcı takip ed..

Doku iş akışınızı hızlandırın

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

Savaşçı, kavram alma ve tasarlama sevincim olduğum kişisel bir projedir. Doğruluk ve erdem için bir savaşçı mücadelesi..

How to master skin shading in 3D

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

Uzun zamandır şimdi benimle bir rut içinde sıkışıp kaldım. 3d sanat . Modelleri veya sahneleri yaratma ile..

Kategoriler