Полное руководство по последней версии Angular framework

Полная серия руководств по Angular 2

Подробно о реактивных формах, часть 1

Подробно о реактивных формах, часть 1

Не за горами последний аватар Google - Angular, и очень мало мест, куда разработчики могут пойти и начать работу, не запутавшись. Одним из таких ресурсов является angular.io 5-минутное руководство по началу работы. Однако огромная доступность ресурсов может когда-нибудь стать проблемой при начале работы с последней версией Angular.

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

Команда Angular придумала angular-cli что-то вроде ember-cli и того, как вы бы видели в рельсах со всеми причудливыми командами, такими как создание различных строительных блоков приложения, таких как маршруты, представления, компоненты / контроллеры и т. Д. .

Angular cli стал де-факто стандартом для создания приложений angular и управления ими. Хотя это не обязательно, есть и другие способы установки последних angular проектов. Не стесняйтесь исследовать столько, сколько сможете. Пожалуйста, свяжитесь со мной, если кто-то более заинтересован в дальнейших исследованиях.

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

В частности, есть 2 вещи, которые необходимо настроить в наших системах, прежде чем мы сможем продолжить.

После того, как вы установили оба из них, убедитесь, что у вас установлена ​​их последняя версия или NPM (›3.x.x) или NODEJS (› 4.x.x).

Используйте node -v и npm -v на терминале или консоли для перекрестной проверки этих версий на наличие соответствующего программного обеспечения.

Теперь пришло время установить angular-cli, запустите эту команду в консоли

npm install -g angular-cli

Параметр -g устанавливает angular-cli глобально, а не только для определенной папки.

Наконец, давайте создадим новый проект angular с помощью angular-cli.

Большая часть того, что я здесь пишу, взята из angular -cli README.md. В любой момент при просмотре этой статьи вы можете использовать ng help для перекрестной проверки команд, перечисленных здесь, и команды, присутствующей в то время, когда читатель ссылается на эту статью.

Все команды для angular cli начинаются с ng

Создайте новый проект angular

ng new <project_name> //where project_name is name of the folder you want to create.
cd <project_name> // to go inside the project,
ng serve // this starts the live server

После этого зайдите в браузер и в адресную строку localhost: 4200, вы увидите сообщение Приложение работает.

Некоторые базовые команды, часто используемые с angular cli

Создать команду

  • Эта команда используется для создания основных компонентов приложения angular, таких как компоненты, директивы, каналы, службы, классы, интерфейсы, перечисления и модули.
  • Их можно сгенерировать с помощью базового шаблона ng g ‹, который будет создан› ‹name›.
  • например. ng g ‹компонент | директива | канал | служба | класс | интерфейс› my-component

Создание сборки

Развертывание имеет большое значение, и для крупных продуктов обычно существуют специальные группы по развертыванию. Для развертывания существует каталог dist /, который развертывается.

ng build // default build

Указание целей сборки и файлов среды.

При указании цели сборки используйте эти параметры

--target=production & --target=development
  • Есть некоторая разница между производственной средой и средой разработки. В производственной среде обнаружение изменений запускается только один раз, в то время как в среде разработки оно может запускаться более одного раза в зависимости от ngZone.
  • Определение и создание новых сред, таких как "staging".
  • Создайте новый файл в src / environment / environment.NAME.ts, где NAME может быть [stag] для промежуточной среды.
  • Используя эту недавно созданную среду
ng build --env=stag

Запуск тестов с angular-cli

Модульные тесты можно запускать с помощью

ng test

Для запуска интеграционных тестов используйте

ng e2e

Развертывание на страницах Github

Используйте следующую команду для развертывания на страницах github.

ng github-pages:deploy — message “Optional commit message”

Это сделает для вас следующее волшебство.

  • Создает репозиторий GitHub для текущего проекта, если таковой не существует.
  • Перестраивает приложение в производственном режиме в текущем HEAD
  • Создает локальную ветку gh-pages, если таковой не существует
  • Перемещает ваше приложение в ветку gh-pages и создает фиксацию
  • Отредактируйте базовый тег в index.html для поддержки страниц github (для изменения в соответствии с новым репозиторием github это можно найти только в ветке gh-pages)
  • Помещает ветку gh-pages на github
  • Возврат к исходной ГОЛОВЕ

Есть некоторые функции, такие как маршруты, которые на данный момент отключены в angular-cli, но это потому, что angular-cli все еще находится в активной фазе разработки. Сказав это, я уверен, что он скоро появится. Со временем я буду обновлять эту статью новыми и важными функциями angular-cli.

Если вы чувствуете, что я что-то упустил, напишите мне @ashishait, и я буду более чем счастлив внести изменения.

Надеюсь, вам понравилось читать эту статью так же, как мне понравилось ее писать.

АВИАКОММЕРЦИЯ: ЭЛЕКТРОННАЯ КОММЕРЦИЯ С ОТКРЫТЫМ ИСТОЧНИКОМ

Aviacommerce - это платформа электронной коммерции с открытым исходным кодом, цель которой - упростить экосистему электронной коммерции за счет создания и унификации интеллектуальных сервисов и предоставления продавцам последовательного и экономичного решения, помогающего им продавать больше. посетите aviacommerce.org, чтобы узнать больше.

Если вам понравилась эта статья, нажмите 💚 ниже, чтобы привлечь к ней больше разработчиков.

Чтобы узнать больше о программировании, подпишитесь на меня здесь или в твиттере, и вы будете получать уведомления, когда я буду писать новые сообщения.