Apa yang baru di Angular 7.0 dan bagaimana anda boleh menaik taraf

Pengaturcaraan

Pengenalan

Angular telah mengeluarkan versi terbarunya, Angular 7.0. Dalam artikel ini, kita akan meneroka perkara berikut:

  • Apa yang baru di Angular 7.0
  • Membuat aplikasi Angular 7.0 pertama anda menggunakan Angular CLI
  • Cara mengemas kini aplikasi Angular yang ada ke Angular 7.0

Apa yang baru di Angular 7.0?

  1. Semasa membuat aplikasi Angular baru, CLI Angular akan meminta pengguna untuk memilih apakah mereka ingin menambahkan fitur seperti Routing sudut atau format helaian gaya yang ingin mereka gunakan dalam aplikasi mereka
  2. Aplikasi Angular 7.0 akan menggunakan ciri Bundle Budget Angular CLI. Ini akan memberi amaran kepada pembangun sekiranya ukuran paket aplikasi melebihi had yang telah ditetapkan. Nilai lalai untuk amaran ditetapkan ke 2MB, dan untuk kesalahan adalah 5MB. Nilai ini dapat dikonfigurasi dan boleh diubah dari angular.jsonfail. Ciri ini meningkatkan prestasi aplikasi dengan ketara.
  3. Component Dev Kit (CDK) Bahan Sudut juga menerima beberapa ciri baru sebagai sebahagian daripada kemas kini ini. Dua ciri CDK yang baru ditambahkan adalah:
  • Penggulungan Maya Sekiranya anda ingin memuatkan banyak elemen, maka ia boleh mempengaruhi prestasi aplikasi. Thetag boleh digunakan untuk memuatkan hanya bahagian yang boleh dilihat daripada senarai di skrin. Itu hanya akan memberikan item yang boleh muat di skrin. Apabila pengguna menatal senarai maka DOM akan memuat dan memunggah elemen secara dinamik berdasarkan ukuran paparan. Ciri ini tidak boleh dikelirukan dengan pengguliran tanpa batas yang sama sekali merupakan strategi yang berbeza untuk memuat elemen. Anda boleh membaca lebih lanjut mengenai Skrol Maya di sini.
  • Seret dan lepas

    Kita boleh menambahkan ciri seret dan lepas ke item dengan mudah. Ia menyokong ciri seperti menyeret elemen secara percuma, menyusun semula item senarai, memindahkan item antara senarai, animasi, menambah pemegang seret khas, dan menyeret terhad sepanjang paksi X atau Y. Anda boleh membaca lebih lanjut mengenai Seret dan Lepas di sini.

4. Kini mat-form-fieldakan menyokong penggunaan elemen pilih asli. Ini akan memberikan peningkatan prestasi dan kegunaan aplikasi. Baca lebih lanjut mengenai ciri ini di sini.

5. Angular 7.0 telah mengemas kini pergantungannya untuk menyokong Typescript 3.1, RxJS 6.3 dan Node 10.

Sekarang kita akan terus membuat aplikasi Angular 7 pertama kita.

Prasyarat

  • Pasang versi terbaru Node.js dari sini
  • Pasang Kod Visual Studio dari sini

Memasang Node.js juga akan memasang npm pada mesin anda. Setelah memasang Node.js, buka command prompt. Jalankan set arahan berikut untuk memeriksa versi node dan npm yang dipasang pada mesin anda.

  • simpul -v
  • npm -v

Rujuk gambar di bawah:

Memasang CLI Angular

Angular CLI adalah antara muka Command Line untuk Angular. Ini membantu kita menginisialisasi, mengembangkan dan mengekalkan aplikasi Sudut dengan mudah.

Untuk memasang Angular CLI, jalankan arahan berikut di tetingkap arahan:

npm i -g @angular/cli

Ini akan memasang Angular CLI 7.0 secara global di mesin anda. Rujuk gambar di bawah:

Untuk memeriksa versi CLI sudut yang dipasang di mesin anda, jalankan arahan berikut:

Rujuk gambar di bawah:

Buat aplikasi Angular 7

Buka Visual Studio Code dan arahkan ke View >> Terminal. Ini akan membuka tetingkap terminal kod VS. Sebagai alternatif, anda juga boleh menggunakan papan kekunci sho rtcut ctrl + `untuk membuka tetingkap terminal.

Ketik urutan perintah berikut di tetingkap terminal. Perintah ini akan membuat direktori bernama "ng7Demo". Kemudian buat aplikasi Angular dengan nama "ng7App" di dalam direktori itu.

  • mkdir ng7Demo
  • cd ng7Demo
  • ng ngApp baru

Semasa anda menjalankan perintah baru, Angular CLI akan meminta anda membuat pilihan dalam dua pilihan berikut:

  1. Adakah anda ingin menambah perutean sudut? (y / T)
  2. Format helaian gaya mana yang ingin anda gunakan?

Sebaik sahaja anda memilih pilihan dan tekan enter, aplikasi Angular 7.0 akan dibuat.

Rujuk Gif di bawah untuk pemahaman yang lebih baik.

Setelah aplikasi berjaya dibuat, jalankan arahan berikut untuk membuka projek:

  • kod .

Rujuk gambar di bawah:

Ini akan membuka fail kod aplikasi kami di tetingkap VS Code baru. Anda dapat melihat struktur fail berikut di Solution Explorer.

Buka fail package.json dan anda dapat melihat bahawa kami mempunyai pakej Angular 7.0.0 terbaru yang dipasang di projek kami.

{ "name": "ng7-app", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~7.0.0", "@angular/common": "~7.0.0", "@angular/compiler": "~7.0.0", "@angular/core": "~7.0.0", "@angular/forms": "~7.0.0", "@angular/http": "~7.0.0", "@angular/platform-browser": "~7.0.0", "@angular/platform-browser-dynamic": "~7.0.0", "@angular/router": "~7.0.0", "core-js": "^2.5.4", "rxjs": "~6.3.3", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.10.0", "@angular/cli": "~7.0.1", "@angular/compiler-cli": "~7.0.0", "@angular/language-service": "~7.0.0", "@types/node": "~8.9.4", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.1.1" } }

Demo Pelaksanaan

Nama aplikasi Angular kami adalah ng7App yang ada di dalam direktori ng7Demo .

Oleh itu, pertama-tama kami akan menavigasi ke aplikasi kami menggunakan arahan di bawah.

  • cd ng7Demo
  • cd ng7App

Sekarang, kami menggunakan perintah berikut untuk memulakan pelayan web.

  • ng berkhidmat

Rujuk gambar di bawah:

After running this command, you can see that it is asking to open //localhost:4200 in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

How to upgrade to Angular 7

The angular team has provided an Angular Update Guide to ensure the smooth upgrade of angular versions. Navigate to //update.angular.io/ to access it. It is a self-explanatory and easy to use application. It will show you the steps that you need to follow before updating, during the update and after the update. Refer to the image below:

If you want to update your application from Angular 6 to Angular 7 then run the following command in the project folder:

ng update @angular/cli @angular/core

Conclusion

We have learned about the new features of Angular 7.0. We also installed Angular CLI 7.0. To create and execute an Angular 7.0 app we have used Angular CLI and VS Code. We also explored the method to upgrade an existing application to Angular 7.0.

See Also

  • Getting Started With Angular 6.0
  • Understanding Angular 6 Animations
  • Getting Started With Angular 5 Using Visual Studio Code
  • CRUD Operations With ASP.NET Core Using Angular 5 And ADO.NET
  • ASP.NET Core — CRUD Using Angular 5 And Entity Framework Core
  • ASP.NET Core — Using Highcharts With Angular 5

Originally published at //ankitsharmablogs.com/