각도 HTML 바인딩입니다.
저는 Angular 어플리케이션을 쓰고 있는데 HTML 응답을 표시하고 싶습니다.
무슨 일이 있었나요?단순히 바인딩 구문을 사용하면요.{{myVal}}HTML을 사용합니다.
어떻게든 the the the the the the the the the the the the the the the를 묶어야겠어요.innerHTML의 경우입니다.div이겁니다.
올바른 구문은 다음과 같습니다.
<div [innerHTML]="theHtmlString"></div>
Angular 2.0.0 및 Angular 4.0.0 최종입니다.
안전한 콘텐츠를 위해서입니다.
<div [innerHTML]="myVal"></div>
DOMSanitizer입니다.
잠재적으로 안전하지 않은 HTML은 컨텐츠의 잠재적으로 안전하지 않은 부분을 제거하지 않도록 Angules DOM 검사기를 사용하여 신뢰할 수 있는 HTML로 명시적으로 표시해야 합니다.
<div [innerHTML]="myVal | safeHtml"></div>
파이프 같은 걸로요
@Pipe({name: 'safeHtml'})
export class Safe {
constructor(private sanitizer:DomSanitizer){}
transform(style) {
return this.sanitizer.bypassSecurityTrustHtml(style);
//return this.sanitizer.bypassSecurityTrustStyle(style);
// return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
}
}
참고 항목RC.1에서 바인딩 구문을 사용하여 스타일을 추가할 수 없습니다.
다음 문서를 참조하십시오. https://angular.io/api/platform-browser/DomSanitizer
보안 경고입니다.
추가된 사용자 HTML을 신뢰하면 보안 위험이 발생할 수 있습니다.앞서 언급한 문서 상태는 다음과 같습니다.
이렇게 하다, 하다, 하다, 불러주세요.
bypassSecurityTrust...API는 전달된 값에 대한 Angular의 기본 제공 삭제를 비활성화합니다.이 통화에 들어가는 모든 값과 코드 경로를 주의 깊게 확인하고 감사하십시오.모든 사용자 데이터가 이 보안 컨텍스트에 맞게 이스케이프되었는지 확인하십시오.자세한 내용은 보안 안내서를 참조하십시오.
각진 마크업입니다.
뭐 그런 거 있잖아요
class FooComponent {
bar = 'bar';
foo = `<div>{{bar}}</div>
<my-comp></my-comp>
<input [(ngModel)]="bar">`;
와 함께
<div [innerHTML]="foo"></div>
Angular는 에서 Angular 고유 표시를 처리하지 않습니다. Angular는 빌드 시 Angular 고유 마크업을 생성된 코드로 대체합니다.런타임에 추가된 마크업은 Angular에서 처리되지 않습니다.
각도별 마크업(속성 또는 값 바인딩, 구성 요소, 지시문, 파이프 등)을 포함하는 HTML을 추가하려면 런타임에 동적 모듈을 추가하고 구성 요소를 컴파일해야 합니다.이 답변에서는 동적 템플릿을 사용하여 Angular 2.0으로 동적 구성 요소를 컴파일/작성하려면 어떻게 해야 합니까?
[innerHtml]대부분의 경우 좋은 옵션이지만 문자열이 매우 크거나 html에서 하드 코딩된 스타일링이 필요할 때 실패합니다.
다른 접근 방식을 공유하겠습니다.
html 파일에 div를 만들고 ID를 지정하기만 하면 됩니다.
<div #dataContainer></div>
그런 다음 Angular 2 구성 요소에서 다음 개체에 대한 참조를 만듭니다(여기에 TypeScript).
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
templateUrl: "some html file"
})
export class MainPageComponent {
@ViewChild('dataContainer') dataContainer: ElementRef;
loadData(data) {
this.dataContainer.nativeElement.innerHTML = data;
}
}
그럼 그냥 쓰세요.loadDatahtml 요소에 텍스트를 추가하는 입니다.
이건 그냥 네이티브 자바스크립트를 사용하는 방법일 뿐이지만, Angular 환경에서는 가능합니다.권장하지 않습니다. 왜냐하면 코드를 더 엉망으로 만들 수 있지만 다른 방법이 없을 수도 있습니다.
각도 2 - 내측을 참조하십시오.HTML 스타일링입니다.
angular2@2.0.0-alpha에 있습니다.44:
Html-Binding을 사용하면 이 작동하지 않습니다.{{interpolation}} 대신 "식"을 사용합니다.
무효한
<p [innerHTML]="{{item.anleser}}"></p>
->가 오류를 발생시킵니다(예상된 식 대신 인터폴레이션).
맞아요.
<p [innerHTML]="item.anleser"></p>
-> 이 방법이 맞습니다.
식에 다음과 같은 요소를 추가할 수 있습니다.
<p [innerHTML]="'<b>'+item.anleser+'</b>'"></p>
힌트를 주세요
HTML을 사용하여 HTML을 했습니다.[innerHTML](또는 (동적으로 추가하다)와 같은 다른 방법으로 추가하다)입니다element.appenChild()Angular는 보안 목적의 소독을 제외하고 어떤 방식으로도 처리하지 않습니다.
이러한 기능은 HTML이 구성 요소 템플릿에 정적으로 추가되는 경우에만 작동합니다.필요한 경우 동적 템플릿을 사용하여 Angular 2.0을 사용하여 동적 구성요소를 컴파일하는 방법에 설명된 대로 런타임에 구성요소를 생성할 수 있습니다.
[내부]를 사용합니다.사용자가 만든 콘텐츠가 포함된 경우 Angular의 DOM 검사기를 사용하지 않고 직접 HTML]을(를) 사용할 수 없습니다.@GünterZöchbauer가 그의 답변에서 제안한 safeHtml 파이프는 내용을 삭제하는 한 가지 방법입니다.다음 지시문은 또 다른 지시문입니다.
import { Directive, ElementRef, Input, OnChanges, Sanitizer, SecurityContext,
SimpleChanges } from '@angular/core';
// Sets the element's innerHTML to a sanitized version of [safeHtml]
@Directive({ selector: '[safeHtml]' })
export class HtmlDirective implements OnChanges {
@Input() safeHtml: string;
constructor(private elementRef: ElementRef, private sanitizer: Sanitizer) {}
ngOnChanges(changes: SimpleChanges): any {
if ('safeHtml' in changes) {
this.elementRef.nativeElement.innerHTML =
this.sanitizer.sanitize(SecurityContext.HTML, this.safeHtml);
}
}
}
사용할 것입니다.
<div [safeHtml]="myVal"></div>
더 최신인 다른 답변을 참조하시기 바랍니다.
이 정도면 충분합니다.<div innerHTML = "{{ myVal }}"></div>(각도2, 알파33)(도2, 파33)이다
또 다른 SO: 서버에서 Angular2(Angular2의 일반적인 DOM 조작)로 HTML을 DOM에 삽입하면 "inner-html"은 Angular 1.X의 "ng-bind-html"과 동일합니다.
한 답변을 위해, 만약 당신의 대답이 있다면요.HTML내용이 in콘 content에에에 에에에에 。component variable, , 를 사용할 수도 있습니다
<div [innerHTML]=componentVariableThatHasTheHtml></div>
짧은 답변이 이미 제공되었습니다. 사용하세요. 사용<div [innerHTML]="yourHtml">바인딩입니다.
그러나 여기에 언급된 나머지 조언은 오해를 불러일으킬 수 있습니다.Angular는 그런 속성에 결합할 때 살균 메커니즘이 내장되어 있습니다.Angular는 전용 검사 라이브러리가 아니기 때문에, 어떠한 위험도 감수하지 않기 위해 의심스러운 콘텐츠에 지나치게 열심입니다.예를 들어 모든 SVG 콘텐츠를 빈 문자열로 삭제합니다.
여러분도 하다를 사용해서 내용을 '위생화하라는 조언을 들을 수 있습니다.DomSanitizer안전하다고 표시하기 위해서입니다.bypassSecurityTrustXXX파이프로하는 방법도 있고, 파이프로 하는 방법도 있는데, 파이프로 하는 방법도 있어요.safeHtml요.
이 모든 것은 컨텐츠를 삭제하지 않고 삭제하지 않기 때문에 오해를 불러일으킬 수 있습니다.사용자가 제공한 콘텐츠나 확실하지 않은 콘텐츠에서 이 작업을 수행하면 악의적인 코드 공격에 노출되기 때문에 보안 문제가 될 수 있습니다.
Angular가 기본 검사 기능을 통해 필요한 항목을 제거하는 경우, 이를 비활성화하는 대신 실제 검사를 해당 작업을 잘하는 전용 라이브러리에 위임할 수 있습니다.예를 들어 DOMPurify입니다.
Angular에서 쉽게 사용할 수 있도록 래퍼 라이브러리를 만들었습니다. https://github.com/TinkoffCreditSystems/ng-dompurify
또한 HTML을 선언적으로 삭제하기 위한 파이프가 있습니다.
<div [innerHtml]="value | dompurify"></div>
여기서 제안하는 파이프와 다른 점은 DOMPurify를 통해 실제로 삭제를 수행하므로 SVG에서 작동합니다.
편집: Angular는 Ivy 렌더러 이후 더 이상 CSS를 삭제하지 않으므로, 역사를 위해 보관된 아래 정보는 상관 없습니다.
DOMPurify는 HTML/SVG를 삭제하는 데는 좋지만 CSS에는 적합하지 않습니다.따라서 Angular의 CSS 소독제를 제공하여 CSS를 처리할 수 있습니다.
import {NgModule, ɵ_sanitizeStyle} from '@angular/core';
import {SANITIZE_STYLE} from '@tinkoff/ng-dompurify';
@NgModule({
// ...
providers: [
{
provide: SANITIZE_STYLE,
useValue: ɵ_sanitizeStyle,
},
],
// ...
})
export class AppModule {}
내면적이기 때문에 내면적이죠.ɵ접두사는 Angular 팀이 자체 패키지에서 사용하는 방법입니다.앵귤러 유니버설이라고 합니다.
요점을 놓쳤다면 죄송하지만, 다른 접근 방식을 추천해 드리고 싶습니다.
서버 측 애플리케이션에서 원시 데이터를 반환하고 클라이언트 측 템플릿에 바인딩하는 것이 더 나을 것 같습니다.따라서 서버에서 json만 반환하므로 보다 신속한 요청이 가능합니다.
서버에서 html을 가져와 "있는 그대로" DOM에 주입하는 것만으로는 Angular를 사용하는 것이 말이 되지 않는 것 같습니다.
Angular 1.x가 html 바인딩을 가지고 있는 것은 알지만 Angular 2.0에서는 아직 본 적이 없습니다.나중에 추가될 수도 있어요.어쨌든, 저는 여전히 당신의 Angular 2.0 앱을 위한 데이터 api를 고려하고 있습니다.
관심이 있으시다면 간단한 데이터 바인딩이 포함된 몇 가지 샘플을 여기 있습니다. http://www.syntaxsuccess.com/viewarticle/angular-2.0-examples
그냥 냥냥사 사 use use just just just로 쓰면 돼요.[innerHTML]다음과 같이 HTML에서 속성을 지정합니다.
<div [innerHTML]="myVal"></div>
템플릿에 표시해야 하는 HTML 마크업이나 엔티티를 포함하는 속성을 구성 요소에 가져본 적이 있습니까?전통적인 보간법은 통하지 않겠지만, 내부는요HTML 속성 바인딩이 복구에 사용됩니다.
용용을 사용합니다.{{myVal}} 예상대로 작동하지 않습니다!다음과 같은 HTML 태그를 선택하지 않습니다.<p>, , 입니다.<strong>네, 그렇습니다.
구성 요소에 다음과 같은 코드가 있다고 가정해 보십시오.
const myVal:string ='<strong>Stackoverflow</strong> is <em>helpful!</em>'
★★★★★★★★★★★★★★★★★★★★★★★.{{myVal}}이렇게 보시면, 이렇게 나옵니다
<strong>Stackoverflow</strong> is <em>helpful!</em>
그런데 이렇게 쓰세요.[innerHTML]="myVal"이렇게 해서 예상대로 됩니다.
Stackoverflow가 유용합니다!
<div [innerHTML]="HtmlPrint"></div><br>innerHtml은 HTML-Elements의 속성으로, HTML 컨텐츠를 프로그래밍 방식으로 설정할 수 있습니다.내용을 일반 텍스트로 정의하는 innerText 속성도 있습니다.
»는 다음과 같습니다.[attributeName]="value"상자 괄호 - 속성을 둘러싸는 각 입력 바인딩을 정의합니다.즉, 속성 값(의 경우 innerHtml)이 지정된 식에 바인딩되어 expression-result가 변경되면 속성 값도 변경됩니다.
그러니까 기본적으로요[innerHtml]를 사용하면 지정된 HTML-Element의 html 콘텐트를 바인딩하고 동적으로 변경할 수 있습니다.
.html과 같이 스타일, 링크 및 HTML에 대해 다중 파이프를 적용할 수 있습니다.
<div [innerHTML]="announcementContent | safeUrl| safeHtml">
</div>
.ts 파이프에 'URL' 검사기가 있습니다.
import { Component, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
transform(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
'를 위해 파이프로 연결합니다.HTML의 검사제입니다.
import { Component, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
name: 'safeHtml'
})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
스타일과 링크 클릭 이벤트를 방해하지 않고 모두 적용됩니다.
Angular 2에서는 다음 세 가지 유형의 바인딩을 수행할 수 있습니다.
[property]="expression"> 모든 html 속성은 an-> html에 연결할 수 있습니다
이경우 식이 변경되면 속성이 업데이트되지만 다른 방식으로 작동하지 않습니다.이 경우 식이 변경되면 속성이 업데이트되지만 다른 방식으로 작동하지 않습니다.(event)="expression"-> 이벤트가 활성화되면 식을 실행합니다.[(ngModel)]="property"-> js(으)는 html을 사용합니다.이 속성에 대한 업데이트는 어디에서나 볼 수 있습니다.
식은 값, 속성 또는 메서드가 될 수 있습니다.예: '4', 'controller.var', 'getValue()'
여기에 예가 있습니다.
html 콘텐츠는 언제든지 html로 할 수 있습니다.innerHTMLhtml 동적 컨텐츠를 속성이지만 html 컨텐츠가 감염되거나 악의적일 수도 있습니다.그래서 동적 콘텐츠를 전달하기 전에 먼저 전달해 주세요.innerHTML항상 내용물을 깨끗하게 해야 합니다.DOMSanitizer이겁니다.
아래 파이프를 사용해 보십시오.
import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {
}
transform(value: string) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
Usage:
<div [innerHTML]="content | safeHtml"></div>
또한 DOM 속성 바인딩을 사용하여 각도 구성 요소 클래스 속성을 템플릿과 바인딩할 수 있습니다.
예를 들어 다음과 같습니다.<div [innerHTML]="theHtmlString"></div>
다음과 같은 표준 형식을 사용합니다.
<div bind-innerHTML="theHtmlString"></div>
Angular Documentation: https://angular.io/guide/template-syntax#property-binding-property를 참조하십시오.
여기서 스택블리츠 작업 예를 참조하십시오.
다음 두 가지 방법을 사용할 수 있습니다.
<div [innerHTML]="myVal"></div>
아니면요?
<div innerHTML="{{myVal}}"></div>
각도 2+는 [내부]를 지원합니다.HTML을 렌더링할 HTML] 속성 바인딩입니다. 그렇지 않으면 보간을 사용할 경우 문자열로 처리됩니다.
★★★★★★★★로요..html.
<div [innerHTML]="theHtmlString"></div>
★★★★★★★★로요..ts.
theHtmlString:String = "enter your html codes here";
html 형식의 바인딩을 재바인드하는 데 도움이 되는 아래 라이브러리를 가지고 있습니다.이 라이브러리를 사용하려면 아래 단계를 확인하십시오.이 라이브러리는 기본적으로 AOT에 JIT 컴파일러 코드를 주입할 수 있습니다.
다음을 사용하여 라이브러리를 설치합니다.
npm i angular-html-recompileapp.component.html 파일에 아래 코드를 추가합니다.
<pk-angular-html-recompile *ngIf="template !== ''" [stringTemplate]="template" [data]="dataObject"> </pk-angular-html-recompile>app.component.ts 파일에서 아래 코드를 사용합니다.
import { Component, OnInit, ViewChild } from '@angular/core'; import { AngularHtmlRecompileComponent, AngularHtmlRecompileService } from 'angular-html-recompile'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { @ViewChild(AngularHtmlRecompileComponent, { static: true }) comp !: AngularHtmlRecompileComponent; constructor( private angularHtmlRecompileService: AngularHtmlRecompileService) { } public dataObject: any; public template = `<div class="login-wrapper" fxLayout="row" fxLayoutAlign="center center"> <mat-card class="box"> <mat-card-header> <mat-card-title>Register</mat-card-title> </mat-card-header> <form class="example-form"> <mat-card-content> <mat-form-field class="example-full-width"> <input matInput placeholder="Username" [value]="Username" (keydown)="onControlEvent($event,'Username')"> </mat-form-field> <mat-form-field class="example-full-width"> <input matInput placeholder="Email" [value]="Email" (keydown)="onControlEvent($event,'Email')"> </mat-form-field> <mat-form-field *ngIf="isShow" class="example-full-width"> <input matInput placeholder="Password" [value]="Password" (keydown)="onControlEvent($event,'Password')"> </mat-form-field> <mat-form-field class="example-full-width"> <mat-label>Choose a role...</mat-label> <mat-select (selectionChange)="onControlEvent($event, 'selectedValue')"> <mat-option [value]="roles" *ngFor="let roles of Roles">{{roles}} </mat-option> </mat-select> </mat-form-field> </mat-card-content> <button mat-stroked-button color="accent" class="btn-block" (click)="buttomClickEvent('submit')" >Register</button> </form> </mat-card> </div>`; ngOnInit(): void { this.angularHtmlRecompileService.sharedData.subscribe((respose: any) => { if (respose) { switch (respose.key) { case `Username`: // Call any method on change of name break; case `Password`: //Update password from main component this.comp[`cmpRef`].instance['Password'] = "Karthik"; break; case `submit`: //Get reference of all parameters on submit click //1. respose.data OR //use this.comp[`cmpRef`].instance break; default: break; } } }); this.prepareData(); } prepareData() { //Prepare data in following format only for easy binding //Template preparation and data preparation can be done once data received from service // AngularHtmlRecompileComponent will not be rendered until you pass data this.dataObject = [ { key: 'Username', value: 'Pranay' }, { key: 'Email', value: 'abc@test.com', }, { key: 'Password', value: 'test123', }, { key: 'Roles', value: ['Admin', 'Author', 'Reader'] }, { key: 'isShow', value: this.updateView() } ]; } updateView() { //Write down logic before rendering to UI to work ngIf directive return true; } }app.module.ts 파일에 모듈을 추가합니다.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { AngularHtmlRecompileModule } from "angular-html-recompile"; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AngularHtmlRecompileModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }이 라이브러리는 기본 html, 각도 재료, 플렉스 레이아웃을 지원합니다.이 기능을 사용하려면 아래 종속성을 설치하십시오.
npm i -s @angular/material @angular/flex-layout
Angular 2 문서에 설명된 대로 요소를 DOM에 동적으로 추가하는 방법은 @Angular/core의 ViewContainerRef 클래스를 사용하는 것입니다.
ViewContainerRef를 구현하고 DOM에서 자리 표시자 역할을 하는 지시문을 선언해야 합니다.
지시사항입니다.
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[appInject]'
})
export class InjectDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
그런 다음 구성 요소를 삽입할 템플릿에서 다음을 수행합니다.
HTML을 사용합니다.
<div class="where_you_want_to_inject">
<ng-template appInject></ng-template>
</div>
그런 다음 삽입된 구성 요소 코드에서 원하는 HTML을 포함하는 구성 요소를 삽입합니다.
import { Component, OnInit, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { InjectDirective } from '../inject.directive';
import { InjectedComponent } from '../injected/injected.component';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
@ViewChild(InjectDirective) injectComp: InjectDirective;
constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
}
ngOnInit() {
}
public addComp() {
const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
const viewContainerRef = this.injectComp.viewContainerRef;
const componentRef = viewContainerRef.createComponent(componentFactory);
}
public removeComp() {
const componentFactory = this._componentFactoryResolver.resolveComponentFactory(InjectedComponent);
const viewContainerRef = this.injectComp.viewContainerRef;
const componentRef = viewContainerRef.remove();
}
}
Angular 2에서 완전히 작동하는 데모 앱을 추가했습니다. DOM 데모에 동적으로 구성요소를 추가합니다.
여러 가지 방법을 사용하여 솔루션을 구현할 수 있습니다.승인된 답변에서 이미 언급한 바와 같이 다음을 사용할 수 있습니다.
<div [innerHTML]="myVal"></div>
달성하려는 항목에 따라 javascript DOM과 같은 다른 작업을 시도할 수도 있습니다(권장되지 않음, DOM 작업이 느림).
발표
<div id="test"></test>
요소
var p = document.getElementsById("test");
p.outerHTML = myVal;
Angular 2 또는 Angular 4에서 그것을 원하고 또한 인라인 CSS를 유지하기를 원한다면, 당신은 사용할 수 있습니다.
<div [innerHTML]="theHtmlString | keepHtml"></div>
Angular v2.1.1에서 작업합니다.
<div [innerHTML]="variable or htmlString">
</div>
지금까지의 모든 훌륭한 답변에 약간의 추가 사항을 게시합니다.사용하시는 분은요?[innerHTML]Angular 구성 요소를 렌더링하고 저처럼 작동하지 않는 것에 대해 불만을 가지려면 이 문제를 해결하기 위해 제가 작성한 ngx-dynamic-hooks 라이브러리를 살펴보십시오.
이 기능을 사용하면 보안을 손상시키지 않고 동적 문자열/html에서 구성 요소를 로드할 수 있습니다.Angular's를 사용합니다.DOMSanitizer은은처럼요[innerHTML]하지만 구성 요소를 (안전한 방식으로) 로드할 수 있습니다.
이 Stackblitz에서 실제 작업을 확인하십시오.
각도(또는 프레임워크) 응용 프로그램에 템플릿이 있고 HTTP 요청/응답으로 백엔드에서 HTML 템플릿을 반환하는 경우 프런트엔드와 백엔드 간에 템플릿이 혼재된 것입니다.
템플릿은 프런트엔드에 두거나(제가 제안합니다), 백엔드(매우 비타협적인 부모 이모)에 남겨두는 것이 어떨까요?
또한 프런트엔드에 템플릿을 보관하는 경우 백엔드에 대한 요청에 대해 JSON으로 응답하는 것이 좋습니다.RESTful 구조를 구현할 필요도 없지만 템플릿을 한쪽에 두면 코드가 더 투명해집니다.
이것은 다른 사람이 당신의 코드를 처리해야 할 때(또는 당신 자신이 잠시 후에 당신 자신의 코드를 다시 입력하는 경우)에 보답할 것입니다!
제대로 하면 작은 템플릿이 있는 작은 구성 요소가 있을 것이고, 무엇보다 코드가 imba라면 코딩 언어를 모르는 사람이 템플릿과 논리를 이해할 수 있을 것입니다!따라서 기능/방법을 가능한 작게 유지하십시오.대규모 함수/메서드/클래스에 비해 기능의 유지, 리팩터링, 검토 및 추가가 훨씬 쉽고 프런트엔드와 백엔드 간에 템플릿과 논리를 혼합할 수 있다는 것을 알게 될 것입니다. 프런트엔드가 더 유연해야 할 경우 백엔드에 있는 논리를 최대한 유지할 수 있습니다(예:안드로이드 프런트엔드를 작성하거나 다른 프런트엔드 프레임워크로 전환합니다.)
철학이요, 아저씨:)
p.s.: 비용이 많이 들기 때문에 100% 클린 코드를 구현할 필요는 없습니다(특히 팀원들에게 동기를 부여해야 하는 경우). 하지만: 클리너 코드에 대한 접근 방식과 이미 보유하고 있는 코드 간에 적절한 균형을 찾아야 합니다(아마도 이미 상당히 깨끗할 것입니다).
할 수 있다면 책을 체크하고 당신의 영혼에 들어가게 하세요: https://de.wikipedia.org/wiki/Clean_Code
언급URL : https://stackoverflow.com/questions/31548311/angular-html-binding 입니다.
'programing' 카테고리의 다른 글
| 기존 문자열에 어떻게 추가합니까? (0) | 2023.04.25 |
|---|---|
| SQL 서버의 두 날짜 시간 차이입니다. (0) | 2023.04.25 |
| Eclipse에서 SVN 저장소의 자격 증명을 변경하려면 어떻게 해야 합니까? (0) | 2023.04.25 |
| WPF/C#에서 전역 키보드 후크(WH_KEYBOARD_LL)를 사용합니다. (0) | 2023.04.25 |
| 아직 푸시되지 않은 Git 병합을 취소합니다. (0) | 2023.04.25 |