Apa yang baru dalam Angular 4?

Feb 2, 2026
Bagaimana caranya

Pada bulan Maret, tim sudut merilis versi 4, dan dengan itu beberapa fitur baru yang menarik untuk dijelajahi. Dalam tutorial ini kami akan menunjukkan kepada Anda Cara Membuat Aplikasi Menggunakan beberapa fitur baru ini, serta menunjukkan beberapa perubahan peningkatan kinerja yang kuat, under-hood.

Apa yang baru?

Tim sudut menyebutnya 'makeover tak terlihat', karena sebagian besar perubahan berada di latar belakang daripada dengan fungsionalitas pengkodean inti. Perubahan penting adalah langkah ke kompilasi masa depan sebagai standar, yang berpotensi meningkatkan kinerja secara drastis ketika digunakan dengan benar. TypeScript 2.1+ juga sekarang didukung, yang memberi kami akses ke semua fitur baru ES2015.

Itu bukan untuk mengatakan tidak ada perubahan besar pada dasar-dasar - misalnya, ada sintaksis template baru yang berguna yang memungkinkan kita untuk menyederhanakan kode kita dengan menambahkan lain opsi untuk ngif. , dan kemampuan untuk menetapkan variabel lokal dalam suatu ngfor. .

Apakah saya melewatkan 3.0?

Angular 4 adalah rilis versi utama pertama dari kerangka kerja yang diadopsi versi semantik. Jadi jangan khawatir, Anda tidak ketinggalan 3.0 - ada dua pembaruan utama, dan keduanya digulung ke versi 4.0.

Perhatikan juga bahwa sudut 1.x sekarang dikenal sebagai AngularJs, dan Angular 2+ hanya disebut sebagai sudut. Berhati-hatilah karena beberapa tutorial dan perpustakaan pihak ketiga mungkin belum memperbarui penggunaan istilah-istilah ini.

Dapatkan file tutorial

Dalam tutorial ini, kami akan bekerja dengan aplikasi toko bunga. Untuk mengunduh contoh aplikasi, pergi ke FileSilo. , Pilih barang gratis dan konten gratis di sebelah tutorial. Catatan: Pengguna pertama kali harus mendaftar untuk menggunakan filesilo. Setelah masuk, Anda dapat mengunduh contoh aplikasi sini .

Mari kita mulai!

01. Mulai dengan node

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

Unduh dan instal Node.js dengan mengikuti instruksi di Wizard

Mari kita mulai dari awal, dan gunakan Angular CLI untuk membangun aplikasi Hello World. Jika Anda ingin memperbarui aplikasi yang ada, lewati ke Langkah 4. Jika Anda belum melakukannya, Unduh Node. , yang datang pra-dikemas dengan NPM. Jika Anda sudah memiliki simpul, periksa setidaknya node 6.9.x dan npm 3.x.x dari baris perintah. 

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

02. Siapkan proyek baru

Create a simple Hello World app in the Angular CLI

Buat Aplikasi Hello World Sederhana di CLI Angular

Sekarang kami memiliki manajer paket, kami dapat menggunakannya untuk menginstal Angular dan CLI sudut. Di antara hal-hal lain, CLI memungkinkan Anda untuk dengan mudah menghasilkan proyek dan komponen baru. 

 $ npm install -g @ angular / cli
$ Ng Baru My-First-angular4-App # Perintah CLI angular Gunakan 'NG'
$ NG Serve -Open # Perintah ini akan bootstrap aplikasi Anda dan luncurkan di browser

03. Periksa versi

Jika Anda belum melihat proyek sudut sebelumnya, luangkan waktu untuk membiasakan diri dengan struktur file yang dihasilkan oleh CLI. Untuk proyek baru kami, kami package.json. Harus daftar paket sudut versi 4.0.0. 

 "dependensi": {
"@ angular / umum": "^ 4.0.0",
"@ angular / compiler": "^ 4.0.0",
"@ angular / core": "^ 4.0.0",
"@ angular / form": "^ 4.0.0",
"@ angular / http": "^ 4.0.0",
"@ angular / platform-browser": "^ 4.0.0",
"@ angular / platform-browser-dinamis": "^ 4.0.0",
"@ angular / router": "^ 4.0.0" [...]}

04. Tingkatkan ke Angular 4

Jika Anda memiliki aplikasi sudut yang ada dengan 2.x versi yang tercantum, sangat mudah untuk memperbarui ke versi 4 dalam banyak kasus. Kita hanya perlu menginstal dan memperbarui paket yang relevan dari baris perintah. Mac: 

 $ NPM Instal @ angular / {umum, kompiler, compiler-cli, inti, formulir, http, platform-browser, platform-browser-dinamis, platform-server, router, animasi} Latest -

Windows: 

& gt; NPM instal @ sudut / umum @ terbaru @ sudut / kompiler @ terbaru @ sudut / compiler-cli @ terbaru @ angular / core @ terbaru @ angular / formulir @ angular / platform-browser @ Latest @ Latest-Browser / platform-browser-dinamis @ terbaru @ angular / platform-server @ terbaru @ angular / router @ terbaru @ angular / animations @ Latest --SAVE

05. Unduh aplikasi tutorial

Mulai sekarang kami akan bekerja dengan aplikasi 2 contoh sudut yang dapat Anda unduh FileSilo. (Untuk catatan penuh tentang cara melakukan ini, lihat intro di atas). Perhatikan bahwa aplikasi ini telah dibuat murni untuk tujuan ilustrasi. Setelah Anda mengunduh aplikasi TheFlower Shop ke direktori root Anda, instal dependensi dan peluncuran di browser. 

 $ NPM Instal
$ Ng Serve --Open

06. Upgrade Flower Shop ke 4.0

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

Modul modul khusus kami perlu mengganti nama [klik ikon untuk memperbesar)

Dalam toko Bunga Direktori, tingkatkan ke 4.0. Kami memiliki beberapa Ketergantungan rekan yang tidak terpenuhi kesalahan setelah memutakhirkan.

07. Perbaiki Ketergantungan Peer

Ketergantungan teman sebaya adalah untuk mengelola proyek yang memiliki paket mengandalkan versi yang berbeda dari dependensi yang sama. Anda harus menambahkan ini secara manual ke Anda package.json. mengajukan. Dependensi peer yang kami butuhkan untuk toko bunga termasuk versi yang lebih lama dari @ angular / {core, http} , rxjs. dan zone.js. .

Tinjau kesalahan dalam output terminal dan tambahkan setiap ketergantungan yang hilang untuk package.json. . 

 "peereppendensi": {
  "@ angular / core": "& gt; = 2.0.0",
  "@ angular / http": "& gt; = 2.0.0",
  "RXJ": "^ 5.0.0",
  "zone.js": "0.7.8"
  },

08. Hati-hati dengan perubahan nama

Aplikasi Shop Flower kami memanfaatkan komponen kustom sumber terbuka yang disebut ng2-modal. . Namun, penulis telah memperbarui konvensi penamaan mereka untuk ngx-modal. . Kita perlu memodifikasi nama ketergantungan kita dan ng-module. impor sesuai. 

 package.json:
"Ketergantungan": {
  [...]
  "NGX-modal": "0,0,25",
     [...]
  },
aplikasi / app.module.ts:
impor {modalmodule} dari 'ngx-modal';

09. Periksa versi

Komponen modal khusus kami juga perlu memperbarui versi yang lebih baru, jadi pastikan untuk memperbaruinya dengan NPM. 

 $ NPM Instal NGX-Modal @ Terbaru --SAVE

10. Periksa pekerjaan Anda

Sekarang kita telah menambal ketergantungan kita, itu ide yang bagus untuk menghapus node_modules. dan membangunnya lagi dari kami package.json. . Jika semuanya berjalan baik, Anda harus memiliki build bersih! Jika tidak, sesuatu mungkin masih hilang dalam versi ketergantungan Anda. Tampilan lain. 

 $ rm -rf node_modules /
$ NPM Cache Bersih
$ NPM Install.
$ Ng Serve --Open

Halaman Selanjutnya: Langkah 11-20

  • 1
  • 2.

Halaman saat ini: Langkah 1-10.

Bagaimana caranya - Artikel Terpopuler

Cara menggambar Asuka dari Neon Genesis Evangelion

Bagaimana caranya Feb 2, 2026

(Kredit Gambar: Paul Kwon) Menciptakan desain karakter Untuk hidup adalah mimpi yang menjadi kenyataan..

Tambahkan dukungan multi-bahasa ke Angular

Bagaimana caranya Feb 2, 2026

Dalam tutorial ini kami akan membawa Anda melalui proses membuat aplikasi Anda dapat diakses dan ramah pengguna untuk orang-orang..

Teknik Posing Mudah untuk Model 3D

Bagaimana caranya Feb 2, 2026

Saya telah menjadi direktur animasi selama beberapa tahun terakhir dan telah bekerja dengan banyak animator, membantu mereka meng..

Cara membuat efek mengetik animasi

Bagaimana caranya Feb 2, 2026

Saat digunakan dengan baik, Animasi css. dapat menambah minat dan kepribadian ke situs Anda. Dalam artikel ini, kita akan berjalan melalui cara membuat..

5 Hal yang Anda Butuhkan untuk Lukisan Minyak

Bagaimana caranya Feb 2, 2026

Ada mistis yang tidak beralasan di sekitar lukisan minyak yang telah meletakkan beberapa seniman dari menjelajahi mereka. Jika An..

Bangun aplikasi desain material dengan Angular 2

Bagaimana caranya Feb 2, 2026

Bahan sudut adalah kerangka kerja komponen UI yang mengimplementasikan spesifikasi desain material Google untuk angular 2 - imple..

Cara mengecat binatang fantasi

Bagaimana caranya Feb 2, 2026

Setelah Anda menemukan ide untuk makhluk fantasi, langkah selanjutnya adalah membawanya ke kehidupan dengan mengecatnya dengan wa..

Buat matahari terbenam sensasional di Photoshop

Bagaimana caranya Feb 2, 2026

Matahari terbenam yang indah adalah yang menakjubkan bahwa siapa pun dengan kamera terasa hampir bea untuk menangkapnya. ..

Kategori