Начало работы с Angular 2+

начала работы

Добро пожаловать в Angular! Angular помогает создавать современные приложения для Интернета, мобильных устройств или компьютеров.
В этом руководстве показано, как создать и запустить простое приложение Angular. Вы будете использовать инструмент Angular CLI для ускорения разработки, придерживаясь при этом рекомендаций руководства по стилю,которые полезны для каждого проекта Angular.
Это руководство занимает менее 30 минут. В конце этого руководства, как часть окончательного обзора кода, есть ссылка для загрузки копии окончательного кода приложения. (Если вы не выполните команды в этом руководстве, вы все равно можете загрузить окончательный код приложения.)

Предварительная 

Прежде чем начать, убедитесь, что в вашей среде разработки есть Node.js®менеджер пакетов npm.

Node.js

Angular требует Node.jsверсии 8.x или 10.x.
  • Чтобы проверить свою версию, запустите node -vв окне терминала / консоли.
  • Чтобы получить Node.js, перейдите на nodejs.org .

менеджера пакетов npm

Приложения Angular, Angular CLI и Angular зависят от функций и возможностей, предоставляемых библиотеками, которые доступны в виде пакетов npm . Для загрузки и установки пакетов npm необходим менеджер пакетов npm.
В этом быстром запуске используется интерфейс командной строки клиента npm , который устанавливается Node.jsпо умолчанию.
Чтобы убедиться, что у вас установлен клиент npm, запустите npm -vв окне терминала / консоли.

Шаг 1: Установите угловую CLI 

Вы используете Angular CLI для создания проектов, генерации кода приложения и библиотеки и выполнения различных текущих задач разработки, таких как тестирование, пакетирование и развертывание.
Установите угловой CLI глобально.
Чтобы установить интерфейс командной строки npm, откройте окно терминала / консоли и введите следующую команду:
content_copynpm install -g @angular/cli

Шаг 2. Создайте рабочее пространство и начальную  приложение

Вы разрабатываете приложения в контексте рабочей области Angular . Рабочая область содержит файлы для одного или нескольких проектов . Проект - это набор файлов, которые включают приложение, библиотеку или сквозные (e2e) тесты.
Чтобы создать новое рабочее пространство и начальный проект приложения:
  1. Запустите команду CLI ng newи введите имя my-app, как показано здесь:
    content_copyng new my-app
  2. Команда ng newзапрашивает информацию о функциях, которые необходимо включить в первоначальный проект приложения. Примите значения по умолчанию, нажав клавишу ввода или возврата.
Angular CLI устанавливает необходимые пакеты Angular npm и другие зависимости. Это может занять несколько минут.
Он также создает следующие рабочие файлы и файлы стартового проекта:
  • Новое рабочее пространство с корневой папкой с именем my-app
  • Первоначальный скелетный проект приложения, также называемый my-app(в srcподпапке)
  • Сквозной тестовый проект (в e2eподпапке)
  • Связанные файлы конфигурации
Первоначальный проект приложения содержит простое приложение Welcome, готовое к запуску.

Шаг 3: Подайте  на приложение

Angular включает в себя сервер, так что вы можете легко создавать и обслуживать свое приложение локально.
  1. Перейдите в папку рабочей области ( my-app).
  2. Запустите сервер с помощью команды CLI ng serveс --openпараметром.
content_copycd my-app
ng serve --open
Команда ng serveзапускает сервер, просматривает ваши файлы и перестраивает приложение, когда вы вносите изменения в эти файлы.
Опция --open(или просто -o) автоматически открывает ваш браузер http://localhost:4200/.
Ваше приложение приветствует вас сообщением:
Добро пожаловать в мое приложение!

Шаг 4. Отредактируйте свою первую  угловой компонент

Компоненты являются основными строительными блоками угловых приложений. Они отображают данные на экране, прослушивают вводимые пользователем данные и принимают меры на основе этого ввода.
Как часть начального приложения, CLI создал первый угловой компонент для вас. Это корневой компонент , и он называется app-root.
  1. Open ./src/app/app.component.ts.
  2. Измените titleсвойство с 'my-app'на 'My First Angular App'.
    SRC / приложение / app.component.ts
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'My First Angular App!';
    }
    Браузер автоматически перезагружается с измененным названием. Это хорошо, но могло бы выглядеть лучше.
  3. Откройте ./src/app/app.component.cssи дайте компоненту некоторый стиль.
    ЦСИ / приложение / app.component.css
    content_copyh1 {
      color: #369;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 250%;
    }
Хорошо выглядеть!
Вывод приложения «Начало работы»

Финальная  просмотр кода

Вы можете скачать пример приложения, созданного вами в этом руководстве по началу работы.
Подсказка. Большинство руководств Angular содержат ссылки для загрузки файлов примеров и запуска примеров в реальном времени в Stackblitz , чтобы вы могли увидеть концепции и код Angular в действии.
Для получения дополнительной информации о файлах проекта Angular и структуре файлов см. Раздел Рабочая область и файл проекта .

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

Теперь, когда вы ознакомились с основами приложения Angular и Angular CLI, перейдите к следующим вводным материалам:
  • Учебное пособие « Тур героев» предоставляет дополнительное практическое обучение. Он проведет вас через шаги по созданию приложения, которое поможет кадровому агентству управлять группой сотрудников супергероев. Он имеет много функций, которые вы ожидаете найти в приложении, управляемом данными:
    - Получение и отображение списка предметов
    - Редактирование детали выбранного элемента
    - Навигация между различными представлениями данных
  • Руководство по архитектуре описывает ключевые понятия, такие как модули, компоненты, сервисы и внедрение зависимостей (DI). Он обеспечивает основу для более подробных руководств по конкретным угловым концепциям и особенностям.
После руководства Tutorial and Architecture вы будете готовы продолжить самостоятельное изучение Angular с помощью других руководств и ссылок в этом наборе документации, сосредоточив внимание на функциях, наиболее важных для ваших приложений.
Добавить комментарий

Оставить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив