От автора: наладить взаимодействие Angular Windows не всегда получается без проблем. Вы не можете настроить среду разработки? Позвольте нам помочь вам!
Недавно я был наставником ngHeroes. Мне очень понравилось помогать студентам и людям из других отраслей, которые хотели изучать веб-разработку на Angular. Многие из них хотели начать новую карьеру. Я был рад отметить, что посещаемость женщин больше, чем я ожидал, учитывая гендерный разрыв в нашей отрасли.
Я начал свою карьеру в качестве разработчика программного обеспечения 6 лет назад, но я не забыл, что значит быть новичком в программировании. То, что я действительно забыл — сколько работы нам нужно выполнить, чтобы начать работу с необходимыми инструментами.
У студентов ngHeroes были компьютеры на MacOS, Linux и Windows. Нам удалось их запустить, но в процессе возникло несколько сложных моментов. В этой статье я сосредоточусь на установке инструментов и зависимостей, необходимых для разработки приложений Angular на компьютере под управлением Windows. Они почти одинаковы для других платформ.
1. Node.js
Первое, что вам нужно установить, это Node.js. Это среда выполнения JavaScript, которая может запускать веб-серверы, скрипты и консольные приложения. Многие инструменты веб-разработки используют Node.js.
Перейдите на сайт Node.js. На нем предлагаются 2 установочных пакета, исходя из вашей операционной системы и архитектуры процессора: LTS (долгосрочная поддержка) и Текущий.
Вот где начинаются сложности. LTS — правильный выбор, но нам может понадобиться более старая версия LTS. Нам нужна LTS версия Node.js, которую поддерживает Angular CLI (интерфейс командной строки). Angular CLI — это инструмент разработки для проектов Angular.
Таблица 1. Поддержка Node.js в Angular CLI
Для нового приложения мы можем выбрать новейшую версию Angular CLI. На jsDelivr мы можем прочитать описание пакета для последней версии Angular CLI. На момент написания статьи это Angular CLI версии 7.0.5. В описании пакета мы также видим поддерживаемую версию Node.js.
В конце файла JSON вы найдете объект JSON с именем «engines», а внутри него требования для «node». Например, там будет указано «node»: «>= 8.9.0″ для Angular CLI версии 7.0.5. Это означает, что нам нужна как минимум версия Node.js 8.9. Как видно из таблицы 1, Angular CLI версии 7.x также поддерживает Node.js 10.
Мы решили использовать новейший Angular CLI. Давайте вернемся на сайт Node.js, загрузим установщик последней версии LTS, поддерживаемой Angular CLI, и запустим его с правами администратора.
Если мастер установки спросит, включать ли Boxtstarter в установку, включите его. Подробнее об этом через минуту. Подождите, пока закончится установка. Это может занять некоторое время и даже может потребовать перезагрузки.
Чтобы убедиться, что Node.js установлен, откройте терминал (командную строку) и запустите node -v, чтобы отобразить установленную версию Node.js.
2. Инструменты сборки Windows
Установка инструментов сборки Windows с помощью NPM CLI
Мы решили использовать новейшую версию Angular CLI, но прежде чем мы сможем ее установить, нам нужно позаботиться о дополнительных зависимостях.
В частности, некоторые инструменты компиляции используются для задач пакетом node-gyp до и после установки для различных пакетов, таких как Angular CLI.
Для Windows нам нужны Python 2.7, инструменты сборки Visual Studio и инструменты сборки C++. К счастью, мы можем установить их все как один пакет, используя интерфейс командной строки NPM.
Если вы ранее установили Node.js с включенной опцией Boxstarter, у вас уже есть эти зависимости. Перейдите к шагу 3.
Выполните следующую команду, чтобы установить все специфичные для Windows зависимости для Angular CLI. Для установки из общедоступного реестра NPM используется интерфейс командной строки NPM (Node Package Manager). Вы установили интерфейс командной строки NPM с Node.js.
Обязательно используйте терминал с правами администратора. То есть, кликните правой кнопкой мыши на командной строке и выберите «Запуск от имени администратора». NPM похож на Composer (PHP), LuaRocks, Maven (Java), NuGet (.NET), pip (Python) и RubyGems, но для JavaScript.
npm install --global --production windows-build-tools
Подождите, пока установка не закончится.
3. Angular CLI
Теперь мы готовы к установке Angular CLI. Как и прежде, мы используем NPM CLI для его установки.
npm install --global @angular/cli
Чтобы убедиться, что Angular CLI установлен, выполните команду, ng —version, которая отображает установленную версию Angular CLI и ее зависимости.
4. Git
Мы почти готовы создать новый проект приложения Angular. Прежде чем мы сможем это сделать, нам нужна система контроля версий, чтобы иметь возможность выполнять резервное копирование исходного кода на сервере. Это также позволит нам своевременно создавать контрольные точки, к которым мы можем вернуться, если застрянем.
Я предлагаю Git, имеющий отличную поддержку в редакторе кода, который мы собираемся использовать. Git также хорошо интегрирован с Angular CLI. Перейдите на сайт Git. Вам будет предложен установочный пакет, исходя из вашей операционной системы.
5. Visual Studio Code
Расширение Angular Language Service для Visual Studio Code добавляет IntelliSense к шаблонам Angular
Нам нужен редактор кода для разработки приложения Angular. Visual Studio Code — это бесплатный редактор кода, предлагаемый Microsoft. Он имеет отличную поддержку Angular и TypeScript через расширения. Visual Studio Code поддерживает Linux, macOS и Windows.
Установите и запустите стабильную сборку с веб-сайта кода Visual Studio Code. Обязательно после этого установите расширение Angular Language Service. Это добавит IntelliSense к вашим шаблонам Angular.
Создание каркаса приложения Angular
Установив все инструменты, мы наконец можем приступить к созданию приложения Angular. Откройте командную строку и перейдите в каталог, в котором вы хотите создать проект.
Используйте следующую команду Angular CLI, чтобы создать необходимый каталог и файлы для нового приложения Angular. Замените my-app на имя приложения, которое также будет именем каталога, созданного Angular CLI.
Кстати, не используйте путь к каталогу, который содержит пробелы, такой как C:\Program Files (x86)\Angular. Сервер разработки Angular CLI имеет проблемы с обслуживанием статических файлов, путь которых содержит пробелы. Вместо этого выберите такой путь, как C:\Projects.
ng new my-app
Angular CLI спросит вас, нужна ли вам маршрутизация. Большинство одностраничных приложений (SPA) используют маршрутизацию. Если вы впервые работаете с Angular, вы можете пропустить это.
Вам также будет предложено выбрать формат таблицы стилей. CSS является родным форматом браузера. SCSS — самый популярный препроцессор таблиц стилей. Выберите тот, с которым у вас есть опыт работы, или просто CSS, если вы новичок в веб-разработке.
Установка займет несколько минут, поскольку она включает установку множества инструментов и зависимостей библиотек, которые используются Angular и Angular CLI.
Пора приступать к кодированию
Теперь у вас есть все необходимое для кодирования! Откройте каталог проекта с помощью Visual Studio Code. При разработке приложения вам нужно будет открыть веб-сервер разработки. Angular CLI подготовил для вас тот, который вы можете запустить с помощью следующей команды из корневого каталога проекта.
npm start
это ярлык для скрипта NPM для
ng serve
Как только сервер разработки завершит компиляцию приложения, вы можете открыть его в браузере, перейдя по адресу http://localhost:4200.
Каждый раз, когда вы изменяете файл и сохраняете его, ваш браузер обновляется и отображает изменения. Чтобы остановить работающий сервер разработки, вам нужно нажать Ctrl+C, ввести Y и нажать Enter.
Angular CLI определил скрипт start в package.json. Попробуйте добавить в скрипт флаг —open, чтобы получилось ng serve —open, затем сохраните файл package.json и снова запустите сервер npm start.
Теперь все, что вам нужно сделать, это создать приложение. Если вам не хватает идей или уверенности в своих навыках разработки, попробуйте учебное пособие «Путь героев» на Angular.io.
Автор: Lars Gyrup Brink Nielsen
Источник: https://medium.freecodecamp.org/
Редакция: Команда webformyself.