2. CLI — shell приложения на Angular

В этой части туториала, покажем как работать с Angular CLI (Shell).

Устпановим Angular CLI

Перед установкой Angular CLI нужно установить node.js, а для установки самого CLI выполнить команду:

Создание нового приложения:

Для того что-бы продолжнить наш туториал по Angular нам нужно создать проект:

CLI сгенерирует новый проект со стандартным приложением и файлами.

Вы можете добавить pre-packed функционал к новому проекту используя команду ng add. Команда ng add преобразет проект, применяя схемы из указаного пакета (прим. Angular Material)

Angular Material предоставляет типичные шабоны/макеты (как вам угодно) приложений.

Запустим приложение Angular 6:

Зайдите в директорию проекта и запустите:

Команда ng serve соберет приложение, и запистит сервер в режиме разработки, а это значит что будет наблюдать за исходными файлами и в случае их изменения пересоберет приложение за вас.

Флаг —open откроет приложение в браузере по адресу http://localhost:4200/.

После выполнения команды вы должны увидеть запущенное приложение в браузере.

Компоненты Angular 6

Страница, которую вы увидете, представляет собой оболочку приложения которая управляеться компонентом AppComponent.

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

Изменим название нашего проекта:

Откройте проект в своей любимой IDE и отправьтесь в папку src/app. Там надете реализацию оболочки AppComponent, распределенной по трем файлам:

  1. app.component.ts — класс компонента написанный на TypeScript.
  2. app.component.html — файл шаблона HTML.
  3. app.component.css — файл содержащий приватные стили компонента.

Откроем файл app.component.ts и изменими свойстово title на ‘Tour of Heroes’:

Для того что бы ободразить на экране наше название удалим все из файла app.component.html и вставим следующий код:

Двойные фигурные скобки являют собой синтаксис интерполяции Angular. Интерполяция представляет значение свойства title внтри тега заголовка HTML.

После внесения изменений браузер обновит и отобразит новый заголовок приложения.

Добавим немного стилей:

Что бы наше приложение выглядело одинаково на всех представлениях/екрана CLI сгенерировал для нас пустой файл styles.css. В этот файл мы будем добавалять наши стили. Добавим их на шаге code review

Code review урока

Что мы узнали (создали):

  • Создали первоначальную структуру проекта используя CLI.
  • Научились отображать данные из компонента Angular 6.
  • Использовали интерполяция (двойные фигурные скобки) для отображения title.

 

 

 

Leave a Reply

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.