Angular에서 서비스 중인 문서 주입
Angular에는 웹 애플리케이션 개발에 적합한 많은 기능이 있습니다. 이러한 기능 중 하나는 종속성 주입으로 애플리케이션을 쉽게 구성하고 유지 관리할 수 있습니다.
Angular에서 종속성 주입(DI)은 생성자에서 전달하거나 다른 방식으로 제공하여 종속성 개체에 종속성을 제공하는 프로세스입니다. 종속성 주입은 더 테스트 가능하고 유지 관리 가능하며 확장 가능한 코드를 작성하는 데 도움이 될 수 있습니다.
Angular에서 서비스 중인 문서 주입
서비스에 문서를 삽입하는 것은 HTML 콘텐츠를 읽고 구문 분석하는 방법입니다. 이 프로세스는 페이지에서 데이터를 캡처하거나 특정 태그를 구문 분석하거나 문서 구조를 결정하는 데 사용할 수 있습니다.
웹 페이지를 렌더링하는 데 필요한 외부 리소스를 가져오기 때문에 유용합니다. 여기에는 HTML 문서에 연결된 스크립트와 스타일시트가 포함됩니다.
다음 코드 스니펫은 이 작업을 수행하는 방법을 보여줍니다.
import { Document } from '@angular/core';
서비스 중인 문서를 Angular로 삽입하는 단계
다음은 Angular에서 서비스에 문서를 삽입하는 단계입니다.
-
Angular 모듈을 만들고
@angular/http
및DocumentService
에서HttpModule
을 가져옵니다. -
DocumentService
클래스에서 확장되는 서비스 클래스를 만듭니다. -
서비스 클래스 생성자의
@Injectable()
주석에 서비스 객체를 추가합니다. -
생성자의 매개변수 목록에 삽입하여 구성 요소에서 이 새로 삽입된 문서 서비스를 사용합니다.
예시:
타입스크립트 코드:
import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
constructor(@Inject(DOCUMENT) private document: Document){}
public save(): void{
document.execCommand('save');
}
}
HTML 코드:
<h2>Example of Injecting Document in Service</h2>
<input type="text">
<button (click)="save()">save</button>
문서를 서비스에 삽입하면 많은 이점이 있습니다. 주요 이점 중 하나는 문서를 저장하고 액세스할 수 있는 방법에 대해 더 많은 유연성을 허용한다는 것입니다.
또한 수동으로 업데이트를 적용해야 하는 서버에 문서를 저장하지 않고 실시간으로 문서를 업데이트하거나 편집할 수 있음을 의미합니다.
여기를 클릭 위 코드의 라이브 데모를 확인하십시오.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook