Учебное пособие по материалам Angular 5 с нуля сегодня является ведущей темой. Технически это Angular , но я определил конкретную версию, потому что с каждым новым выпуском Angular есть некоторые изменения. С AngularJS на Angular произошло так много изменений, что изменилась даже вся структура. Так что терпите меня, и давайте приступим к этому Учебному пособию по материалам Angular с примером с нуля.
Руководство по материалам Angular 5
Во-первых, нам нужно установить Angular CLI глобально в наша система. Вы можете найти полную документацию на исходном веб-сайте. Нам нужно установить его глобально, поэтому введите следующую команду.
npm install -g @ angular/cli
Шаг 1. Создайте проект.
Перейдите в свой cmd и введите следующую команду.
ng new ng5material
Будет создан новый проект. Все шаблоны будут включены в этот проект.
Шаг 2: Установите Angular Material и Angular CDK.
Введите следующую команду, чтобы установить зависимости.
npm install --save @ angular/material @ angular/cdk
Шаг 3. Установите анимацию.
Для работы с Angular Material нам необходимо установить модуль анимации для правильной работы нашего дизайна.
npm install --save @ angular/animations
Нам нужно импортировать модуль угловой анимации в файл app.module.ts .
import {BrowserAnimationsModule} из '@ angular/platform-browser/animations'; импорт: [BrowserModule, BrowserAnimationsModule],
Теперь мы создаем наш модуль, который отвечает за все наши компоненты материала Angular.
Итак, создайте один файл внутри папки src >> app и создайте один файл с именем ngmaterial.module.ts
импортировать {NgModule} из '@ angular/core'; импортировать {CommonModule} из '@ angular/common'; импортировать {BrowserAnimationsModule} из ' @ angular/platform-browser/animations '; import {MatButtonModule} из' @ angular/material '; @ NgModule ({import: [MatButtonModule], exports: [MatButtonModule]}) экспортный класс MaterialAppModule {}
Итак, мы включили MatButtonModule в наше приложение. Теперь нам нужно зарегистрировать этот пользовательский модуль MaterialAppModule в нашем файле app.module.ts .
//app.module.tsimport {BrowserModule} из '@ angular/platform-browser'; импортировать {NgModule} из '@ angular/core'; импортировать {BrowserAnimationsModule} из '@ angular/platform-browser/animations'; импортировать {MaterialAppModule} из './ngmaterial. module '; import {AppComponent} from' ./app.component '; @ NgModule ({декларации: [AppComponent], импорт: [BrowserModule, BrowserAnimationsModule, MaterialAppModule], поставщики: [], bootstrap: [AppComponent]}) класс экспорта AppModule {}
Шаг 4. Добавьте тему.
Включение темы обязательно , Чтобы применить все основные стили и стили темы к вашему приложению.
Чтобы начать работу с предварительно созданной темой, включите одну из предварительно созданных тем Angular Material глобально в ваше приложение. Если вы используете Angular CLI, вы можете добавить его в свой
//style.css@import "~ @ angular/material/ prebuilt-themes/indigo-pink.css ";
Кроме того, в наше приложение хорошо включить значки материалов. Итак, в файл index.html включите следующий файл css.
Шаг 5: Поддержка жестов.
Некоторые компоненты ( mat-slide-toggle , mat-slider , matTooltip ) полагаются на HammerJS для жестов. Чтобы получить полный набор функций этих элементов, HammerJS должен быть загружен в приложение.
Вы можете добавить HammerJS в свое приложение через npm, CDN (например, Google CDN) или обслужить прямо из вашего приложения.
Для установки через npm используйте следующую команду:
npm install --save hammerjs
После установки , импортируйте его в точку входа вашего приложения (например, src/main.ts ).
//main.tsimport {enableProdMode} из '@ angular/core' ; импортировать {platformBrowserDynamic} из '@ angular/platform-browser-dynamic'; импортировать {AppModule} из './app/app.module'; импортировать {среду} из './environments/environment';import' hammerjs '; if (environment.production) {enableProdMode ();} platformBrowserDynamic (). bootstrapModule (AppModule) .catch (err => console.log (err));
Хорошо, теперь все включено правильно . Просто напишите один важный компонент материала внутри файла app.component.html.
//app.component.html
Избавьтесь от всего предыдущего HTML и запустите сервер разработки angular с помощью следующей команды.
ng serve
Теперь перейдите в порт браузера: 4200 , и URL-адрес будет: http://localhost: 4200
Вы увидите, что есть одна кнопка, и если вы нажмете на нее, тогда также будет отображаться некоторая анимация. Итак, наконец, наш Material Design включен в наше приложение Angular 5
Шаг 6: Включите другие компоненты.
Подробнее об официальной документации.
Мы включаем Toolbar в наше приложение..
Первая строка Вторая строка
Также включите в наш файл ngmaterial.module.ts .
импортировать {NgModule} из '@ angular/core'; импортировать {CommonModule} из '@ angular/common'; импортировать {BrowserAnimationsModule} из '@ angular/platform-browser/animations'; импортировать {MatButtonModule } из '@ angular/material'; import {MatToolbarModule} из '@ angular/material/toolbar'; @ NgModule ({импорт: [MatButtonModule, MatToolbarModule], экспорт: [MatButtonModule, MatToolbarModule]}) экспортный класс MaterialAppModule {}
Вот как вы можете интегрировать различные компоненты материала.
Мы увидим расширенные компоненты в следующем уроке. Итак, на этом базовое введение в Учебное пособие по материалам Angular 5 с примером с нуля закончено.
Fork Me On Github
