Рубрики
Без рубрики

Что нового в угловых 7.0 и как вы можете обновить

Внедрение выпустило свою последнюю версию, угловую 7,0. В этой статье мы рассмотрим следующие моменты: что новое в угловом углу 7.0creating Ваше первое приложение Angular 7.0 с использованием угловых CLIHOW, чтобы обновить существующее угловое приложение для угнта 7.0, что нового в угловых 7,0?

Автор оригинала: Ankit Sharma.

Вступление

Угловой выпустил свою последнюю версию, угловую 7,0. В этой статье мы рассмотрим следующие моменты:

  • Что нового в угловом 7,0
  • Создание вашего первого приложения Angular 7.0 с использованием угловой CLI
  • Как обновить существующее угловое приложение на угловой 7,0

Что нового в угловой 7,0?

  1. Создавая новое угловое приложение, угловая CLI подскажет пользователю выбирать, если они хотят добавить функции, такие как угловая маршрутизация или формат стилей, они хотят использовать в своем приложении
  2. Угловые 7,0 приложения будут использовать функцию бюджета расслоения угловой CLI. Это предупреждает разработчиков, если размер пакета приложений превышает предопределенный предел. Значение по умолчанию для предупреждения устанавливается на 2 МБ, а для ошибок это 5 МБ. Это значение настраивается и может быть изменено с angular.json файл. Эта функция значительно повышает производительность приложения.
  3. Компонентный комплект Dev (Cdk) углового материала также получает некоторые новые функции как часть этого обновления. Два недавно добавлена особенность CDK:
  • Виртуальная прокрутка Если вы пытаетесь загрузить большой список элементов, то он может повлиять на производительность приложения. Тег может быть использован для загрузки только видимой части списка на экране. Он окажет только предметы, которые могут поместиться на экран. Когда пользователь прокручивается через список, то DOM будет загружать и разгружать элементы динамически на основе размера дисплея. Эта функция не должна путать с бесконечной прокрутки, которая в целом является другая стратегия для загрузки элементов. Вы можете узнать больше о виртуальной прокрутке здесь Отказ
  • Перетащите Мы можем легко добавить функцию перетаскивания в элемент. Он поддерживает такие функции, как бесплатное перетаскивание элемента, переупорядочение элементов списка, движущихся элементов между списком, анимация, добавление пользовательской перетаскиваемой ручкой, а также перетаскивание по оси X или Y. Вы можете прочитать больше о Drag & Drop здесь Отказ

4. Mat-Form-Field Теперь поддержит использование собственного элемента выбора. Это обеспечит усиленную производительность и удобство использования в приложении. Узнай больше об этой функции здесь Отказ

5. Angular 7.0 обновил свои зависимости для поддержки Typescript 3.1, RXJS 6.3 и узла 10.

Теперь мы будем приступить к созданию нашего первого приложения Angular 7.

Предпосылки

  • Установите последнюю версию Node.js из здесь
  • Установить Visual Studio Code из здесь

Установка Node.js также установит NPM на вашем компьютере. После установки Node.js откройте командную строку. Запустите следующий набор команд, чтобы проверить версию узла и NPM на вашем компьютере.

  • узел -v.
  • NPM -V.

Обратитесь к изображению ниже:

Установка угловой CLI.

Angular CLI – это интерфейс командной строки для угловых. Это помогает нам легко инициализировать, разрабатывать и поддерживать угловые приложения.

Чтобы установить угловую CLI, запустите следующую команду в окне команды:

npm i -g @angular/cli

Это установит угловые CLI 7,0 во всем мире в вашу машину. Обратитесь к изображению ниже:

Чтобы проверить версию Angular CLI, установленную на вашем компьютере, запустите следующую команду:

Обратитесь к изображению ниже:

Создайте Angular 7 приложение

Откройте код Visual Studio и перейдите к Просмотр >> TE rminal. Это откроет окно клемм к коду VS. Кроме того, вы также можете использовать клавиатуру SHO rtcut Ctrl + “ Открыть окно терминала.

Введите следующую последовательность команд в окне терминала. Эти команды создадут каталог с именем «NG7DEMO». Затем создайте угловое приложение с именем «NG7APP» внутри этого каталога.

  • мкдир NG7DEMO
  • CD NG7DEMO
  • ng new ng7app.

При запуске NG New Command Angular CLI попросит вас сделать выбор в следующих двух вариантах:

  1. Хотите добавить угловую маршрутизацию? (Y/N)
  2. Какой формат таблицы стилей вы хотели бы использовать?

После выбора параметров и нажмите Enter, приложение Angular 7.0 будет создано.

Обратитесь к GIF ниже для лучшего понимания.

Как только приложение будет успешно создать, запустите следующую команду, чтобы открыть проект:

  • кода

Обратитесь к изображению ниже:

Это откроет файл кода нашего приложения в новом окне кода VS. Вы можете увидеть следующую структуру файла в исследовательском исследовании.

Откройте файл Package.json, и вы можете наблюдать, что у нас есть последние угловые пакеты 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"
  }
}

Исполнение демонстрации

Название нашего углового приложения – NG7APP который находится внутри NG7DEMO каталог.

Итак, мы сначала перейдите к нашему приложению, используя команды ниже.

  • CD NG7DEMO
  • CD NG7APP.

Теперь мы используем следующую команду для запуска веб-сервера.

  • отрицание обслуживать

Обратитесь к изображению ниже:

После запуска этой команды вы можете увидеть, что он просит открыть http://localhost: 4200 в вашем браузере. Итак, откройте любой браузер на своей машине и перейдите к этому URL. Теперь вы можете увидеть следующую страницу.

Как обновить до угловых 7

Угловая команда предоставила руководство по угловому обновлению для обеспечения плавного обновления угловых версий. Перейдите к https://update.angular.io/ получить доступ к этому. Это самоуверенно и простое в использовании приложения. Он покажет вам шаги, которые вам нужно следовать до обновления, во время обновления и после обновления. Обратитесь к изображению ниже:

Если вы хотите обновить приложение от Angular 6 в Angular 7, затем запустите следующую команду в папке проекта:

ng update @angular/cli @angular/core

Заключение

Мы узнали о новых особенностях угловых 7.0. Мы также установили угловые CLI 7.0. Для создания и выполнения приложения Angular 7.0 мы использовали угловой CLI и VS код. Мы также изучили метод обновления существующего приложения к углому 7,0.

Смотрите также

Первоначально опубликовано в https://ankitsharmablogs.com/

Оригинал: “https://www.freecodecamp.org/news/whats-new-in-angular-7-0-and-how-to-upgrade-f2ed22a79e28/”

Читайте ещё по теме: