Внести вклад

Создайте своё первое Angular-приложение

Этот туториал состоит из уроков, которые знакомят с концепциями Angular, необходимыми для начала разработки.

Можно пройти столько уроков, сколько захотите, и в любом порядке.

ПОЛЕЗНО: Предпочитаете видео? У нас также есть полный курс на YouTube по этому туториалу!

Перед началом

Для лучшего опыта с этим туториалом проверьте требования ниже и убедитесь, что у вас есть всё необходимое.

Ваш опыт

Уроки предполагают опыт в следующем:

  1. Создание HTML-страниц с прямым редактированием HTML.
  2. Программирование содержимого сайта на JavaScript.
  3. Чтение CSS и понимание, как работают селекторы.
  4. Использование командной строки для задач на компьютере.

Ваше оборудование

Уроки можно пройти с локальной установкой инструментов Angular или во встроенном редакторе. Локальная разработка Angular возможна на Windows, macOS или Linux.

ПРИМЕЧАНИЕ: Обращайте внимание на такие предупреждения — они отмечают шаги, которые относятся только к локальному редактору.

Концептуальный обзор вашего первого Angular-приложения

Уроки создают Angular-приложение, которое показывает список домов в аренду и детали отдельных домов. Приложение использует возможности, общие для многих Angular-приложений.

Output of homes landing page

Локальная среда разработки

ПРИМЕЧАНИЕ: Этот шаг только для локальной среды!

Выполните эти шаги в командной строке на компьютере, который будете использовать для туториала.

  1. Identify the version of node.js that Angular requires

    Angular требует активную LTS или maintenance LTS версию Node. Давайте подтвердим вашу версию node.js. О конкретных требованиях к версиям см. свойство engines в файле package.json.

    Из окна Terminal:

    1. Выполните команду: node --version
    2. Убедитесь, что отображаемая версия соответствует требованиям.

  2. Install the correct version of node.js for Angular

    Если node.js не установлен, следуйте инструкциям по установке на nodejs.org

  3. Install the latest version of Angular

    После установки node.js и npm следующий шаг — установить Angular CLI, который даёт инструменты для эффективной разработки на Angular.

    Из окна Terminal выполните: npm install -g @angular/cli.

  4. Install integrated development environment (IDE)

    Вы можете использовать любой инструмент для создания приложений на Angular. Мы рекомендуем:

    1. Visual Studio Code
    2. Как необязательный, но рекомендуемый шаг можно улучшить опыт разработки, установив Angular Language Service
    3. WebStorm

  5. Optional: set-up your AI powered IDE

    Если вы проходите туториал в IDE с поддержкой ИИ, ознакомьтесь с правилами промптов и лучшими практиками Angular.

Подробнее о темах этого урока: