Перейти к содержанию

Урок 1: Hello world

Этот первый урок служит отправной точкой, с которой каждый урок в этом учебнике добавляет новые возможности для создания полноценного приложения Angular. В этом уроке мы обновим приложение для отображения известного текста "Hello World".

Затраты времени: ожидайте, что на выполнение этого урока вы потратите около 15 минут.

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

Этот урок начинается с предварительно созданного приложения, которое послужит базой для приложения, которое вы будете создавать в этом уроке. Мы предоставили начальный код, чтобы вы могли:

  • Начать с примера кода в начале этого урока. Выбрать из:

    • Использовать живой пример в StackBlitz, где интерфейс StackBlitz является вашей IDE.

    • Используйте download example и распакуйте его в каталог с именем: first-app. Откройте эту директорию в вашей IDE.

Если вы не просмотрели введение, посетите страницу tutorial overview page, чтобы убедиться, что у вас есть все необходимое для завершения этого урока.

После завершения

  • Обновленное приложение, которое вы получите после этого урока, подтверждает, что вы и ваша IDE готовы приступить к созданию приложения Angular.

Шаги урока

Выполните эти шаги над кодом приложения в выбранной вами IDE (локально или с помощью StackBlitz).

Шаг 1 — Тестирование приложения по умолчанию

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

В панели Терминал вашей IDE:

  1. В каталоге проекта перейдите в каталог first-app.

  2. Выполните эту команду для установки зависимостей, необходимых для запуска приложения.

    1
    npm install

  3. Выполните эту команду, чтобы собрать и обслужить приложение по умолчанию.

    1
    ng serve

    Приложение должно собраться без ошибок.

  4. В веб-браузере на компьютере разработчика откройте http://localhost:4200.

  5. Убедитесь, что в браузере появился веб-сайт по умолчанию.

  6. Вы можете оставить ng serve запущенным на время выполнения следующих шагов.

Шаг 2 — Просмотр файлов в проекте

На этом шаге вы познакомитесь с файлами, которые составляют стандартное приложение Angular.

В панели Explorer вашей IDE:

  1. В каталоге проекта перейдите в каталог first-app.

  2. Откройте каталог src, чтобы увидеть эти файлы.

    1. В проводнике файлов найдите файлы Angular app (/src).

      1. index.html — это HTML-шаблон верхнего уровня приложения.

      2. style.css — это таблица стилей верхнего уровня приложения.

      3. main.ts — это место, где запускается приложение.

      4. favicon.ico — иконка приложения, такая же, как на веб-сайте.

    2. В проводнике файлов найдите файлы компонентов приложения Angular (/app).

      1. app.component.ts — это исходный файл, описывающий компонент app-root.

        Это компонент Angular верхнего уровня в приложении. Компонент — это основной строительный блок приложения Angular.

        Описание компонента включает код компонента, HTML-шаблон и стили, которые могут быть описаны в этом файле или в отдельных файлах.

        В данном приложении стили находятся в отдельном файле, а код компонента и HTML-шаблон — в этом файле.

      2. app.component.css — таблица стилей для этого компонента.

      3. Новые компоненты добавляются в эту директорию.

    3. В проводнике файлов найдите каталог изображений (/assets), содержащий изображения, используемые приложением.

    4. В проводнике файлов найдите файлы поддержки — это файлы и каталоги, которые необходимы приложению Angular для сборки и запуска, но это не те файлы, с которыми вы обычно взаимодействуете.

      1. .angular содержит файлы, необходимые для создания приложения Angular.

      2. .e2e содержит файлы, используемые для тестирования приложения.

      3. .node_modules содержит пакеты node.js, которые использует приложение.

      4. angular.json описывает приложение Angular для инструментов создания приложений.

      5. package.json используется npm (менеджером пакетов node) для запуска готового приложения.

      6. tsconfig.* — это файлы, описывающие конфигурацию приложения для компилятора TypeScript.

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

Шаг 3 — Создание Hello World.

На этом шаге вы обновляете файлы проекта Angular, чтобы изменить отображаемое содержимое.

В вашей IDE:

  1. Откройте first-app/src/index.html.

  2. В index.html замените элемент <title> этим кодом, чтобы обновить заголовок приложения.

    1
    <title>Homes</title>

    Затем сохраните изменения, которые вы только что внесли в index.html.

  3. Далее откройте first-app/src/app/app.component.ts.

  4. В app.component.ts, в определении @Component, замените строку template на этот код, чтобы изменить текст в компоненте приложения.

    1
    template: `<h1>Hello world!</h1>`,

  5. В app.component.ts, в определении класса AppComponent, замените строку title на этот код, чтобы изменить заголовок компонента.

    1
    title = 'homes';

    Затем сохраните изменения, внесенные в app.component.ts.

  6. Если вы остановили команду ng serve из шага 1, в окне Terminal вашей IDE запустите ng serve снова.

  7. Откройте браузер и перейдите на localhost:4200 и убедитесь, что приложение собирается без ошибок и отображает Hello world в заголовке и теле вашего приложения:

browser frame of page displaying the text 'Hello World'

Обзор урока

В этом уроке вы обновили стандартное приложение Angular для отображения Hello world. В процессе вы узнали о команде ng serve для локальной подачи приложения для тестирования.

Если у вас возникли трудности с этим уроком, просмотрите готовый код.

Следующие шаги

Первое приложение Angular урок 2 — Создание компонентов

Дополнительная информация

Для получения дополнительной информации по темам, рассмотренным в этом уроке, посетите:

Ссылки

Комментарии