Какво е новото в Angular 7.0 и как можете да надстроите

Въведение

Angular пусна най-новата си версия, Angular 7.0. В тази статия ще разгледаме следните точки:

  • Новото в Angular 7.0
  • Създаване на първото приложение Angular 7.0 с помощта на Angular CLI
  • Как да актуализирате съществуващото си приложение Angular до Angular 7.0

Какво е новото в Angular 7.0?

  1. Докато създава ново приложение Angular, Angular CLI ще подкани потребителя да избере дали иска да добави функции като Angular маршрутизация или формата на таблицата със стилове, която иска да използва в своето приложение
  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, отворете командния ред. Изпълнете следния набор от команди, за да проверите версията на node и npm, инсталирани на вашата машина.

  • възел -v
  • npm -v

Вижте изображението по-долу:

Инсталиране на Angular CLI

Angular CLI е интерфейсът на командния ред за Angular. Помага ни да инициализираме, разработваме и поддържаме приложенията 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“. След това създайте приложение Angular с името “ng7App” вътре в тази директория.

  • mkdir ng7Demo
  • cd ng7Demo
  • ng нов ng7App

Докато изпълнявате новата команда ng, Angular CLI ще ви помоли да направите избор в следните две опции:

  1. Искате ли да добавите ъглово маршрутизиране? (г / Н)
  2. Кой формат на таблица със стилове бихте искали да използвате?

След като изберете опциите и натиснете Enter, приложението Angular 7.0 ще бъде създадено.

Обърнете се към gif по-долу за по-добро разбиране.

След като приложението бъде създадено успешно, изпълнете следната команда, за да отворите проекта:

  • код.

Вижте изображението по-долу:

Това ще отвори кодовия файл на нашето приложение в нов прозорец на VS Code. Можете да видите следната файлова структура в 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

Сега използваме следната команда, за да стартираме уеб сървъра.

  • ng сервирайте

Вижте изображението по-долу:

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/