AngularJS를 사용한 간단한 팝업
- Angular에서 종속성 설치
-
Angular에서
npm install bootstrap jquery popper.js를 사용하여 부트스트랩 설치 - Angular 프로젝트에 Angular 재료 설치
- Angular에서 팝업을 생성하는 동안 발생할 수 있는 오류
웹 페이지에서 팝업을 활성화하는 것의 장점은 항목에 대한 짧은 정보를 표시하는 훌륭한 수단입니다.
팝업은 또한 사용자가 항목을 클릭할 때 작업이 등록되었음을 나타내는 팝업을 표시하는 방식으로 작업에 대한 프롬프트를 제공하는 이상적인 방법입니다.
Angular는 다양한 목적을 제공하는 프레임워크이므로 팝업 모달이 작동하기 전에 몇 가지 종속성을 설치해야 합니다.
Angular에서 종속성 설치
Visual Studio Code를 사용하여 한 곳에서 모든 작업을 수행할 수 있는 환경을 만들기 때문에 Angular 프로젝트에서 작업하는 것이 이상적입니다.
Angular에서 npm install bootstrap jquery popper.js를 사용하여 부트스트랩 설치
새 Angular 프로젝트를 만든 후 터미널로 이동하여 npm install bootstrap jquery popper.js를 사용하여 Bootstrap을 설치합니다.
성공적으로 설치한 후 VS Code에서 프로젝트 폴더를 열고 angular.json으로 이동한 다음 architect > build key 아래에서 다음을 추가합니다.
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Angular 프로젝트에 Angular 재료 설치
다음은 우리 프로젝트에 Angular Material을 설치하는 것입니다. Angular 소재를 사용하면 웹 페이지를 아름답게 만드는 새로운 스킨/테마를 추가할 수 있습니다.
그래도 터미널의 프로젝트 폴더 내에서 ng add @angular/material 명령을 실행하여 Angular 재료를 설치합니다.
선택할 수 있는 스킨 목록이 제공됩니다. 선택 후 다른 옵션에 대해 예를 선택했습니다.
종속성이 성공적으로 설치되었으므로 이제 적절한 코딩을 수행합니다.
프로젝트를 생성할 때 생성된 구성 요소와 함께 추가 구성 요소를 만들어야 합니다.
프로젝트 폴더의 터미널로 이동하여 터미널에 ng 구성 요소 팝업을 입력하여 이를 수행합니다. 설치 후 추가 구성 요소가 설치된 것을 볼 수 있습니다.
앞으로 app.module.ts로 이동합니다.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { PopUpComponent } from './pop-up/pop-up.component';
@NgModule({
declarations: [
AppComponent,
PopUpComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatDialogModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
위에서 몇 가지 추가 가져오기를 수행하고 BrowserAnimationsModule, MatDialogModule 및 PopUpComponent를 가져오고 BrowserAnimationsModule, MatDialogModule을 가져오기 배열에 추가했습니다.
다음으로 popup.component.html에서 작업하고 몇 가지 입력을 합니다.
<h2> Welcome {{firstName}} </h2>
<button class="btn btn-primary">
Press
</button>
이제 app.component.ts로 이동합니다. 여기에서 MatDialog와 PopUpComponent를 가져옵니다. 여기에 버튼을 클릭할 때 표시되는 데이터를 결정하는 코드도 입력합니다.
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { PopUpComponent } from './pop-up/pop-up.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-mateiral';
constructor(private dialogRef : MatDialog){}
openDialog(){
this.dialogRef.open(PopUpComponent,{
data : {
name : 'Samuel'
}
});
}
}
app.component.html은 또한 몇 가지 사소한 코드를 추가합니다. 클릭 시 팝업 메시지가 표시되는 버튼을 디자인합니다.
<button class="btn btn-primary" (click)="openDialog()">
Click to open pop up
</button>
그런 다음 pop-up.component.ts로 이동하여 코딩을 수행합니다. 여기서 일어나는 일은 먼저 Inject와 MAT_DIALOG_DATA를 컴포넌트로 가져온 다음 이러한 가져오기를 함께 사용하여 팝업 메시지에 이름을 추가하는 것입니다.
import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-pop-up',
templateUrl: './pop-up.component.html',
styleUrls: ['./pop-up.component.css']
})
export class PopUpComponent implements OnInit {
firstName;
constructor(@Inject(MAT_DIALOG_DATA) public data) {
this.firstName = data.name
}
ngOnInit(): void {
}
}
우리는 모두 끝났고 프로젝트를 실행하고 성공적으로 컴파일했습니다.
Angular에서 팝업을 생성하는 동안 발생할 수 있는 오류
이 오류가 발생하는 경우를 대비하여 프로젝트 실행을 시도하는 동안 any[] 유형의 인수를 해당 유형의 매개변수에 할당할 수 없습니다.
tsconfig.json으로 이동하여 *noImplicitAny*: true 스니펫을 추가하고 strict: true를 strict: false로 변경하기만 하면 됩니다.
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn