обзор
В этом руководстве мы будем разрабатывать приложение Angular 8 и использовать компоненты PrimeNG. Мы узнаем, как настроить PrimeNG для приложения Angular. В следующем уроке мы реализуем урок Angular 8 + PrimeNG — Внедрение компонента DataTable .
Технологический стек
Мы будем использовать:
- Угловой 8.
- PrimeNG.
Видеоурок
Реализация
Для этого урока мы будем использовать код Visual Studio . Угловой проект будет развиваться следующим образом:
Разработать угловое приложение
Установите NodeJS. Перейдите на страницу загрузок NodeJS и загрузите установщик. Запустите установщик и установите Node.js.
Установите Angular CLI с помощью команды:
Оболочка
xxxxxxxxxx
1
npm install -g @angular/cli
Создайте новый Angular Project с именем library-management .
Оболочка
xxxxxxxxxx
1
ng new library-management --skip-git
Зайдите в новый проект и запустите его:
Оболочка
1
ng serve
Перейти на домашнюю страницу:
Используйте компоненты PrimeNG
Установить PrimeNG
Оболочка
xxxxxxxxxx
1
npm install primeng --save
Установите Prime Icons
Оболочка
xxxxxxxxxx
1
npm install primeicons --save
Установить шрифт Awesome
Оболочка
xxxxxxxxxx
1
npm install font-awesome --save
Установите угловой CDK
Оболочка
xxxxxxxxxx
1
npm install @angular/cdk --save
Если мы теперь перейдем к package.json , мы увидим следующие зависимости primeng:
Откройте файл angular.json и добавьте следующее в раздел стилей:
Джава
xxxxxxxxxx
1
"./node_modules/primeicons/primeicons.css",
2
"./node_modules/primeng/resources/themes/nova-light/theme.css",
3
"./node_modules/primeng/resources/primeng.min.css",
Создайте новый компонент, названный Helloworldследующим образом:
Оболочка
xxxxxxxxxx
1
ng generate component helloworld
В app-routing.module.ts добавьте маршрут как helloдля нашего нового HelloworldComponent:
Машинопись
xxxxxxxxxx
1
import { NgModule } from '@angular/core';
3
import { Routes, RouterModule } from '@angular/router';
4
import { HelloworldComponent } from './helloworld/helloworld.component';
5
const routes: Routes = [ { path: 'hello', component: HelloworldComponent }
7
];
8
@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule]
10
})
11
export class AppRoutingModule { }
Кроме того, в app.component.html сохраните только следующий код и удалите оставшиеся:
HTML
xxxxxxxxxx
1
<router-outlet></router-outlet>
Запустите приложение, используя:
Оболочка
xxxxxxxxxx
1
ng serve
Добавление компонента PrimeNG в угловое приложение
Для добавления любого компонента PrimeNG в Angular, мы будем следовать шагам ниже.
Добавьте модуль PrimeNG Drowpdown в файл app.module.ts .
Машинопись
xxxxxxxxxx
1
import { BrowserModule } from '@angular/platform-browser';
2
import { NgModule } from '@angular/core';
3
import { AppRoutingModule } from './app-routing.module';
5
import { AppComponent } from './app.component';
6
import { HelloworldComponent } from './helloworld/helloworld.component';
7
import {DropdownModule} from 'primeng/dropdown';
8
import { FormsModule } from '@angular/forms';
9
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
10
11
@NgModule({ declarations: [ AppComponent, HelloworldComponent ], imports: [ BrowserModule, AppRoutingModule, DropdownModule, FormsModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent]
12
})
13
export class AppModule { }
Создайте вспомогательные данные для выпадающего списка в helloworld.component.ts .
Машинопись
xxxxxxxxxx
1
import { Component, OnInit } from '@angular/core';
2
interface Book { name: string; author: string;
4
}
5
@Component({ selector: 'app-helloworld', templateUrl: './helloworld.component.html', styleUrls: ['./helloworld.component.css']
7
})
8
export class HelloworldComponent implements OnInit {
9
books: Book[]; selectedBook: string;
10
constructor() {
11
this.books = [ {name: 'Book1', author: 'Author1'}, {name: 'Book2', author: 'Author2'}, {name: 'Book3', author: 'Author3'}, {name: 'Book4', author: 'Author4'}, {name: 'Book5', author: 'Author5'} ]; }
12
ngOnInit() { }
13
}
Используйте выпадающий тег PrimeNG в файле helloworld.component.html .
HTML
xxxxxxxxxx
1
<p-dropdown [options]="books" [(ngModel)]="selectedBook" optionLabel="name"></p-dropdown>
Если мы теперь перейдем к - localhost: 4200 / hello, мы увидим следующее: