Кажете, защо някои хора смятат, че Angular е дълбока, тъмна, сложна рамка? И че е трудно да се използва?

В това ръководство ще отделим 5 минути, за да покажем, че Angular е проста рамка, с която всеки може да започне.

Ще започна с предположението, че вече сте инсталирали Node.js.

Стъпка 1: Инсталирайте Angular CLI.

sudo npm install -g @angular/cli

Стъпка 2: Създайте първоначално приложение

ng new hello-world

Ще бъдете попитани дали искате да добавите Angular routing. Изберете No.

Също така ще бъдете попитани какъв тип формат на таблица със стилове искате да използвате. Изберете по подразбиране, като напишете 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 има бутон с въртящ се бутон?среден .com