Τι νέο υπάρχει στο Angular 7.0 και πώς μπορείτε να κάνετε αναβάθμιση

Εισαγωγή

Η Angular κυκλοφόρησε την τελευταία της έκδοση, Angular 7.0. Σε αυτό το άρθρο, θα διερευνήσουμε τα ακόλουθα σημεία:

  • Τι νέο υπάρχει στο Angular 7.0
  • Δημιουργία της πρώτης σας εφαρμογής Angular 7.0 χρησιμοποιώντας το Angular CLI
  • Πώς να ενημερώσετε την υπάρχουσα γωνιακή εφαρμογή σας στο Angular 7.0

Τι νέο υπάρχει στο Angular 7.0;

  1. Κατά τη δημιουργία μιας νέας γωνιακής εφαρμογής, το Angular CLI θα ζητήσει από το χρήστη να επιλέξει εάν θέλει να προσθέσει λειτουργίες όπως η γωνιακή δρομολόγηση ή τη μορφή του φύλλου στυλ που θέλουν να χρησιμοποιήσουν στην εφαρμογή τους
  2. Οι εφαρμογές Angular 7.0 θα χρησιμοποιούν τη δυνατότητα Bundle Budget του Angular CLI. Αυτό θα προειδοποιήσει τους προγραμματιστές εάν το μέγεθος της δέσμης εφαρμογών υπερβαίνει το προκαθορισμένο όριο. Η προεπιλεγμένη τιμή για την προειδοποίηση έχει οριστεί σε 2MB και για σφάλματα είναι 5MB. Αυτή η τιμή είναι διαμορφώσιμη και μπορεί να αλλάξει από το angular.jsonαρχείο. Αυτή η δυνατότητα βελτιώνει σημαντικά την απόδοση της εφαρμογής.
  3. Το Component Dev Kit (CDK) του Angular Material λαμβάνει επίσης μερικές νέες δυνατότητες ως μέρος αυτής της ενημέρωσης. Οι δύο πρόσφατα προστιθέμενες δυνατότητες του CDK είναι:
  • Εικονική κύλιση Εάν προσπαθείτε να φορτώσετε μια μεγάλη λίστα στοιχείων, τότε μπορεί να επηρεάσει την απόδοση της εφαρμογής. Ηετικέτα μπορεί να χρησιμοποιηθεί για τη φόρτωση μόνο του ορατού τμήματος της λίστας στην οθόνη. Θα αποδίδει μόνο τα στοιχεία που μπορούν να χωρέσουν στην οθόνη. Όταν ένας χρήστης κάνει κύλιση στη λίστα τότε το DOM θα φορτώσει και θα ξεφορτώσει τα στοιχεία δυναμικά με βάση το μέγεθος της οθόνης. Αυτό το χαρακτηριστικό δεν πρέπει να συγχέεται με την άπειρη κύλιση που είναι εντελώς διαφορετική στρατηγική για τη φόρτωση στοιχείων. Μπορείτε να διαβάσετε περισσότερα για την Εικονική κύλιση εδώ.
  • Μεταφορά και απόθεση

    Μπορούμε εύκολα να προσθέσουμε τη δυνατότητα μεταφοράς και απόθεσης σε ένα στοιχείο. Υποστηρίζει λειτουργίες όπως δωρεάν μεταφορά ενός στοιχείου, αναδιάταξη στοιχείων μιας λίστας, μετακίνηση αντικειμένων μεταξύ λίστας, κινούμενα σχέδια, προσθήκη προσαρμοσμένης λαβής μεταφοράς και περιορισμένη μεταφορά κατά μήκος του άξονα X ή Y. Μπορείτε να διαβάσετε περισσότερα για το Drag and Drop εδώ.

4. Το mat-form-fieldτώρα θα υποστηρίζει τη χρήση του εγγενούς στοιχείου επιλογής. Αυτό θα προσφέρει βελτιωμένη απόδοση και χρηστικότητα στην εφαρμογή. Διαβάστε περισσότερα για αυτήν τη λειτουργία εδώ.

5. Το Angular 7.0 έχει ενημερώσει τις εξαρτήσεις του για να υποστηρίξει Typescript 3.1, RxJS 6.3 και Node 10.

Τώρα θα προχωρήσουμε στη δημιουργία της πρώτης μας εφαρμογής Angular 7.

Προαπαιτούμενα

  • Εγκαταστήστε την τελευταία έκδοση του Node.js από εδώ
  • Εγκαταστήστε τον Visual Studio Code από εδώ

Η εγκατάσταση του Node.js θα εγκαταστήσει επίσης npm στον υπολογιστή σας. Μετά την εγκατάσταση του Node.js, ανοίξτε τη γραμμή εντολών. Εκτελέστε το ακόλουθο σύνολο εντολών για να ελέγξετε την έκδοση του κόμβου και των npm εγκατεστημένων στο μηχάνημά σας.

  • κόμβος -v
  • npm -v

Ανατρέξτε στην παρακάτω εικόνα:

Εγκατάσταση γωνιακού CLI

Το Angular CLI είναι η διεπαφή γραμμής εντολών για το Angular. Μας βοηθά να προετοιμάζουμε, να αναπτύσσουμε και να συντηρούμε εύκολα τις γωνιακές εφαρμογές.

Για να εγκαταστήσετε το Angular CLI, εκτελέστε την ακόλουθη εντολή στο παράθυρο εντολών:

npm i -g @angular/cli

Αυτό θα εγκαταστήσει το Angular CLI 7.0 παγκοσμίως στο μηχάνημά σας. Ανατρέξτε στην παρακάτω εικόνα:

Για να ελέγξετε την έκδοση του γωνιακού CLI που είναι εγκατεστημένο στο μηχάνημά σας, εκτελέστε την ακόλουθη εντολή:

Ανατρέξτε στην παρακάτω εικόνα:

Δημιουργήστε την εφαρμογή Angular 7

Ανοίξτε τον Visual Studio Code και μεταβείτε στο View >> Terminal. Αυτό θα ανοίξει το παράθυρο τερματικού κώδικα VS. Εναλλακτικά, μπορείτε επίσης να χρησιμοποιήσετε το πληκτρολόγιο sho rtcut ctrl + `για να ανοίξετε το παράθυρο του τερματικού.

Πληκτρολογήστε την ακόλουθη ακολουθία εντολών στο παράθυρο τερματικού. Αυτές οι εντολές θα δημιουργήσουν έναν κατάλογο με το όνομα "ng7Demo". Στη συνέχεια, δημιουργήστε μια γωνιακή εφαρμογή με το όνομα "ng7App" μέσα σε αυτόν τον κατάλογο.

  • mkdir ng7Demo
  • cd ng7Demo
  • ng νέα εφαρμογή ng7

Καθώς εκτελείτε τη νέα εντολή ng, το Angular CLI θα σας ζητήσει να κάνετε επιλογές στις ακόλουθες δύο επιλογές:

  1. Θέλετε να προσθέσετε γωνιακή δρομολόγηση; (ν / Ν)
  2. Ποια μορφή στυλ φύλλου θέλετε να χρησιμοποιήσετε;

Μόλις ορίσετε τις επιλογές και πατήσετε enter, θα δημιουργηθεί η εφαρμογή Angular 7.0.

Ανατρέξτε στο παρακάτω Gif για καλύτερη κατανόηση.

Μόλις δημιουργηθεί η εφαρμογή με επιτυχία, εκτελέστε την ακόλουθη εντολή για να ανοίξετε το έργο:

  • κωδικός.

Ανατρέξτε στην παρακάτω εικόνα:

Αυτό θα ανοίξει το αρχείο κώδικα της εφαρμογής μας σε ένα νέο παράθυρο κώδικα VS. Μπορείτε να δείτε την ακόλουθη δομή αρχείων στο Solution Explorer.

Ανοίξτε το αρχείο package.json και μπορείτε να παρατηρήσετε ότι έχουμε εγκαταστήσει τα τελευταία πακέτα Angular 7.0.0 στο έργο μας.

{ "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" } }

Επίδειξη εκτέλεσης

Το όνομα της εφαρμογής Angular είναι το ng7App που βρίσκεται μέσα στον κατάλογο ng7Demo .

Έτσι, θα μεταβούμε πρώτα στην εφαρμογή μας χρησιμοποιώντας τις παρακάτω εντολές.

  • cd ng7Demo
  • cd ng7App

Τώρα, χρησιμοποιούμε την ακόλουθη εντολή για να ξεκινήσουμε τον διακομιστή ιστού.

  • εξυπηρέτηση

Ανατρέξτε στην παρακάτω εικόνα:

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

Έχουμε μάθει για τις νέες δυνατότητες του Angular 7.0. Εγκαταστήσαμε επίσης το Angular CLI 7.0. Για να δημιουργήσουμε και να εκτελέσουμε μια εφαρμογή Angular 7.0 χρησιμοποιήσαμε τον Angular CLI και VS Code. Εξετάσαμε επίσης τη μέθοδο αναβάθμισης μιας υπάρχουσας εφαρμογής σε Angular 7.0.

Δείτε επίσης

  • Ξεκινώντας με το γωνιακό 6.0
  • Κατανόηση γωνιακών 6 κινούμενων σχεδίων
  • Ξεκινώντας με τη γωνιακή 5 χρησιμοποιώντας τον κώδικα Visual Studio
  • Λειτουργίες CRUD με πυρήνα ASP.NET χρησιμοποιώντας γωνιακό 5 και ADO.NET
  • ASP.NET Core - CRUD χρησιμοποιώντας πυρήνα Angular 5 και Entity Framework
  • ASP.NET Core - Χρήση γραφημάτων με γωνιακό 5

Αρχικά δημοσιεύθηκε στη διεύθυνση //ankitsharmablogs.com/