Скажите, почему некоторые люди думают, что Angular — это глубокий, темный и сложный фреймворк? И что это трудно использовать?

В этом руководстве мы потратим 5 минут, чтобы показать, что Angular — это простой фреймворк, с которым может начать работу каждый.

Я начну с предположения, что вы уже установили Node.js.

Шаг 1. Установите Angular CLI.

sudo npm install -g @angular/cli

Шаг 2. Создайте исходное приложение

ng new hello-world

Вас спросят, хотите ли вы добавить маршрутизацию Angular. Выберите Нет.

Вас также спросят, какой формат таблицы стилей вы хотите использовать. Выберите значение по умолчанию, нажав Enter.

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

Теперь, когда Angular CLI создал ваше приложение Angular, выполните следующие команды.

cd hello-world
ng serve --open

Этот процесс создаст и запустит приложение. В случае успеха ваш браузер должен открыть такую ​​страницу.

Теперь, когда наше приложение Angular запущено и работает, следующим шагом будет установка Angular Material.

Откройте терминал внутри корневого каталога приложений Angular и выполните следующую команду.

ng add @angular/material

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

Далее вас спросят, хотите ли вы настроить HammerJS для распознавания жестов. Выберите Да.

И, наконец, вас спросят, хотите ли вы настроить анимацию браузера для Angular Material. Выберите Да.

Теперь компоненты материала установлены и готовы к использованию.

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

Теперь, когда вы установили Angular Material, давайте добавим панель инструментов в наше приложение.

Откройте новый проект Angular в своем любимом редакторе кода. (Я использую Visual Studio Code.)

Шаг 1.Импорт модуля панели инструментов

Мы начнем с открытия файла, расположенного в src\app\app.module.ts, и в верхней части файла мы добавим следующую строку кода для импорта MatToolbarModule.

import { MatToolbarModule } from '@angular/material/toolbar

А затем добавьте его в наш массив импорта.

imports: [
   BrowserModule,
   BrowserAnimationsModule,
   MatToolbarModule
]

Шаг 2.Изменитьapp.componenent.html

Далее мы заменим весь шаблонный код из src\app\app.component.html фрагментом ниже.

<mat-toolbar>
   <span>Hello World</span>
</mat-toolbar>

Теперь ваше приложение должно выглядеть так.

Ну… ты сделал это!

Теперь вы знаете, как создать приложение Angular, установить Angular Material и использовать базовый компонент Material.

Пожалуйста, нажмите эту кнопку 👏. Спасибо.

Следуйте за мной на Medium для получения статей об Angular и не стесняйтесь просматривать другие короткие полезные сообщения.



Основное руководство по RxJS для начинающих. (Часть 1)
Не кажется ли RxJS немного пугающим? Это совершенно понятно. Мои глаза немного закатились, когда я увидел…medium.com





Как добавить счетчик к кнопке Angular Material.
Эээ… было бы неплохо, если бы в Angular Material была кнопка со счетчиком загрузки?средний .com