Açısal 4'te yeni olanlar?

Sep 10, 2025
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

Svelte ve Sapper ile hızlı reaktif bir blog oluşturun

Nasıl Yapılır Sep 10, 2025

(Resim Kredisi: Svelte) Sapper, Svelte'nin üstüne inşa edilmiş bir çerçevedir. Sunucu oluşturma, link ön yük..

Bir kurt nasıl çizilir

Nasıl Yapılır Sep 10, 2025

Eğer ustalaştıysan Bir köpek nasıl çizilir , ayrıca bir kurt da kolayca çizebileceğinizi düşünmek için affedilirsiniz. Fido'nun..

Daha gerçekçi rakamlar nasıl çizilir

Nasıl Yapılır Sep 10, 2025

Bu şekilde çizim öğreticisinde, özellikle göğüslerin sıkıştırma ve yerçekimin etkileri nedeniyle şekli nasıl deği..

Bu ipuçları ile grafitten daha fazlasını elde edin

Nasıl Yapılır Sep 10, 2025

Son üç yıl boyunca, illüstrasyon için bir ortam olarak grafit kullanıyorum, ilk önce sadece mekanik kurşun kalemlerle, da..

Afinity Tasarımcısı: Izgaraları Nasıl Kullanılır

Nasıl Yapılır Sep 10, 2025

Afinity Designer, Mac ve Pencereler için de mevcut bir vektör düzenleme araçları, iPad . Daha temel ücretsiz..

Bir AR uygulaması nasıl oluşturulur

Nasıl Yapılır Sep 10, 2025

Sayfa 1/3: Bir AR uygulaması oluşturun: 01-10 adımlar Bir AR uygulamas..

Procreate ile klasik bir masal sahnesini boya

Nasıl Yapılır Sep 10, 2025

Procreate, hızlı bir şekilde dijital boyama uygulamam olmuştur. Taşınabilirliği sayesinde ipad pro , bana �..

WordPress API'sini kullanarak bir blog güç

Nasıl Yapılır Sep 10, 2025

Geçtiğimiz birkaç yıl boyunca, WordPress için bir dinlenme API'nin gelişimi geliştiriciler için yeni kapılar açtı. Dah..

Kategoriler