Что нового в WebStorm для Angular

Что нового в WebStorm для Angular

От автора: в последнем релизе Angular было добавлено в CLI много новых возможностей, которые облегчают обновление и добавление новых функций в приложение. В недавнем обновлении WebStorm Angular 2018.2 была реализована интеграция с этими новыми командами CLI. Давайте рассмотрим их в действии, как и некоторые другие новые функции!

Чтобы начать, мы создадим приложение Angular с помощью Angular CLI. Вы всегда можете создать новый проект Angular через экран приветствия IDE: нажмите «Создать новый проект», затем выберите из списка слева «Angular CLI», назовите новый проект и нажмите «Создать». WebStorm использует Angular CLI, установленный глобально на вашем компьютере, или его последнюю версию через npx.

Создание в WebStorm нового проекта Angular

Добавление новых функций в приложение с помощью ng add

ng add поможет вам добавить в приложение новые функции — эта команда установит зависимости, а затем вызовет скрипт установки, который позаботится обо всем остальном.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

В WebStorm 2018.2 вы можете добавить библиотеки, поддерживающие установку с помощью ng add, через новое действие «Зависимости Angular», доступное во всплывающем окне «Найти действие» (Cmd-Shift-A / Ctrl + Shift + A) или во всплывающем окне «Добавить…» Cmd-N / Alt + Insert) в представлении «Проект».

В списке вы можете выбрать, какую библиотеку вы хотите добавить. Сейчас он содержит предопределенный список библиотек, которые, как мы знаем, имеют поддержку ng add, но вы также можете сами определить имя пакета. Давайте выберем Angular Material и добавим ее в наш проект:

Добавление в WebStorm новой зависимости с помощью ng add

Если вы добавите к package.json зависимость, которая поддерживает ng add, WebStorm предложит установить ее с помощью ng add:

Установка зависимости с помощью ng add из package.json

Даже если зависимость уже установлена, все равно имеет смысл переустановить ее с помощью ng add — нажмите Alt-Enter на имени пакета и выберите «Переустановить с помощью «ng add»:

Переустановка зависимости с помощью ng add

Использование схем

С помощью действия Angular Schematic вы можете использовать схемы, специальные скрипты, которые могут генерировать код для таких вещей, как новые компоненты, директивы и службы и т. д. Это стандартные схемы, которые поставляются с самим Angular CLI, и вы можете использовать их в WebStorm уже какое-то время.

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

Давайте добавим в наше приложение панель инструментов Material: используйте «Найти действие» (Cmd-Shift-A / Ctrl + Shift + A) — «Angular Schematic» или в представлении «Проект» нажмите Cmd-N / Alt + Insert и выберите «Angular Schematic», а затем выберите из списка «MaterialDashboard». Укажите имя компонента, вы также можете передать дополнительные параметры конфигурации.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Добавление в приложение панели инструментов Material

Теперь мы можем использовать недавно созданный компонент Material dashboard в app.component.html.

Обновленные сниппеты кода

WebStorm предаствляет коллекцию сниппетов кода Angular, разработанную Джоном Папой, и эти сниппеты также были также обновлены под релиз Angular 6.

Чтобы использовать сниппет, вы можете ввести его аббревиатуру и нажать Tab, чтобы развернуть его или выбрать из предложений завершения кода. Вы можете увидеть все доступные сниппеты и добавить свои собственные сниппеты через Настройки — Редактор — Интерактивные шаблоны.

Создание нового компонента с помощью сниппета кода

Рефакторинг Rename компонентов

Еще одним недавним улучшением WebStorm для Angular стало то, что теперь рефакторинг Rename для компонента не только обновлен в части применения и импорта, но также обновлены имена всех связанных файлов: *.component.ts, *.component.html, *.component.css and *.component.spec.ts.

Переименование компонент панели инструментов с помощью рефакторинга Rename

Запуск и отладка приложения

Теперь давайте посмотрим на результаты наших изменений и запустим ng, чтобы запустить наше приложение. В IDE вы можете дважды кликнуть на имени задачи в окне npm слева, чтобы запустить ее.

Если вы хотите отладить приложение, вы можете использовать отладчик WebStorm и Chrome. Создайте и запустите новую конфигурацию отладки JavaScript в WebStorm, указав localhost:4200 в поле URL-адреса. В WebStorm, начиная с версии 2018.2, эта конфигурация доступна сразу для любых новых проектов Angular, которые вы создаете через экран приветствия IDE.

Поместите контрольные точки в код TypeScript непосредственно в редакторе, затем кликните иконку ошибки, чтобы начать отладку. После определения контрольной точки вы можете пройтись по коду, посмотреть значения переменных, использовать консоль отладки — все в среде IDE.

Отладка приложения с помощью Chrome и WebStorm

Суммируя все выше сказанное, новый WebStorm 2018.2 значительно улучшает интеграцию с Angular CLI: теперь вы можете с помощью ng add использовать вместо командной строки действия IDE для добавления новых зависимостей в приложение Angular и генерировать код с использованием Angular Schematics. В дополнение к этому теперь стало значительно проще переименовывать компоненты и отлаживать приложение в WebStorm.

Автор: Ekaterina Prigara

Источник: https://blog.angular.io/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree