Angular의 templateUrl 및 styleUrl은 무엇입니까?

당신과 같은 독자는 MUO를 지원하는 데 도움이 됩니다. 귀하가 당사 사이트의 링크를 사용하여 구매하면 당사는 제휴 수수료를 받을 수 있습니다.

Angular를 사용하면 앱의 페이지, 대화 상자 또는 기타 섹션을 구성 요소로 분리할 수 있습니다. Angular 애플리케이션의 구성 요소는 주로 HTML, CSS 및 TypeScript 파일로 구성됩니다.

TypeScript 파일에서 서버에서 데이터 검색과 같이 UI가 작동하는 데 필요한 논리를 추가할 수 있습니다.

템플릿 및 스타일 속성을 지정하여 TypeScript를 사용하여 구성 요소의 HTML 및 CSS를 렌더링할 수도 있습니다. templateUrl 또는 styleUrls를 사용하여 외부 HTML 또는 CSS 파일에 연결할 수 있습니다.

오늘의 메이크업 비디오

Angular에서 template 및 templateUrl은 무엇입니까?

때를 Angular에서 나만의 구성 요소 만들기 , 템플릿을 사용하여 HTML을 렌더링할 수 있습니다. HTML 템플릿을 작성할 수 있는 두 가지 방법이 있습니다.

TypeScript 파일 자체의 템플릿 안에 HTML 코드를 작성할 수 있습니다.
외부 파일에 HTML 코드를 작성하고 TypeScript 파일을 이 HTML 파일에 연결할 수 있습니다.

새 구성 요소에서 HTML을 작성하는 위치에 따라 'template' 또는 'templateUrl' 속성을 설정할 수 있습니다.

만들기 새로운 Angular 앱 .
애플리케이션의 터미널에서 다음을 실행합니다. 구성 요소 생성 새 구성 요소를 만드는 명령입니다. 새 구성요소 'about-page'를 호출합니다.
```
ng generate component about-page
```
~ 안에 app.component.html, 현재 코드를 새 구성요소의 태그로 교체:
```
<app-about-page></app-about-page>
```
열기 about-page.component.ts 파일. HTML 코드가 많지 않은 경우 템플릿 속성을 사용하여 TypeScript 파일 내부에 직접 작성할 수 있습니다. @Component 데코레이터를 다음으로 바꿉니다.
```
@Component({ 
  selector: 'app-about-page', 
  template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>' 
}) 
```

여러 줄로 된 템플릿을 포함하려면 역따옴표 따옴표를 대신 사용할 수 있습니다.

@Component({ 
  selector: 'app-about-page', 
  template: `<h2>About Page</h2> 
              <br> 
              <p>This is rendering the HTML from the TypeScript file!</p>` 
})

터미널에서 다음을 입력하십시오. 서브의 코드를 컴파일하고 웹 브라우저에서 실행합니다. http://localhost:4200/. Your HTML code from the TypeScript file will render on the page에서 앱을 엽니다.
~ 안에 about-page.component.ts , 대신 'template'을 'templateUrl'로 바꾸십시오. 구성 요소의 외부 HTML 파일에 대한 링크를 포함합니다. 자체 파일이 필요한 더 복잡한 HTML 코드가 있는 경우 'templateUrl'을 사용할 수 있습니다.
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html' 
})
```

일부 HTML 코드를 about-page.component.html 파일:

<h2>About Page</h2> 
<p>This is rendering the HTML from the HTML file!</p>

브라우저로 돌아가거나 다시 실행하십시오. 서브의 코드를 다시 컴파일합니다. http://localhost:4200/. The browser now renders the HTML from the에서 앱을 엽니다. about-page.component.html 파일.

Angular의 스타일과 styleUrl은 무엇입니까?

HTML과 마찬가지로 CSS를 저장할 위치에 따라 'style' 또는 'styleUrls'를 사용할 수 있습니다.

매우 간단한 CSS 선언이 있는 경우 TypeScript 코드 내에 CSS를 포함할 수 있습니다. 그렇지 않으면 'styleUrls'를 사용하여 TypeScript 파일을 더 많은 스타일이 포함된 외부 CSS에 연결할 수 있습니다.

드래그 앤 드롭 게임 메이커 무료

이전에 만든 Angular 애플리케이션에서 다음을 엽니다. about-page.component.ts 파일. 구성 요소에 'styles' 특성을 추가합니다. '스타일' 안에 페이지에 대한 CSS 스타일을 추가합니다:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styles: ['h2 {color:red}','p {color:green}'] 
})
```
터미널에서 다음을 입력하십시오. 서브의 코드를 컴파일하고 웹 브라우저에서 실행합니다. http://localhost:4200/ to view the styling specified in the TypeScript file에서 앱을 엽니다.
CSS가 많은 경우 'styles' 대신 'styleUrls'를 사용하여 TypeScript 파일을 외부 CSS 파일에 연결합니다. ~ 안에 about-page.component.ts , @Component 데코레이터를 다음으로 바꿉니다.
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styleUrls: ['./about-page.component.css'] 
})
```
일부 CSS 스타일을 추가하십시오. about-page.component.css :
```
h2 { 
  color: blue 
} 
p { 
  color: darkorange 
}
```
브라우저로 돌아가거나 다시 실행하십시오. 서브의 코드를 다시 컴파일합니다. http://localhost:4200/ to view the styles used from the external CSS file에서 앱을 엽니다.

Angular에서 구성 요소의 HTML 렌더링

이제 Angular 애플리케이션에서 HTML 및 CSS 콘텐츠를 렌더링할 수 있는 다양한 방법을 알게 되었습니다. HTML 및 CSS의 복잡성에 따라 사용할 접근 방식을 결정할 수 있습니다.

관심이 있는 경우 Angular 구성 요소의 HTML과 TypeScript 파일 간에 데이터를 전달하는 방법을 탐색할 수 있습니다.