Skip to content

Commit 7066930

Browse files
kaito3desuyokaito3desuyo
authored
translate: guide/template-overview (#885) (#894)
* translate: guide/template-overview (#885) * fix: textlint error
1 parent b5b136f commit 7066930

File tree

2 files changed

+120
-46
lines changed

2 files changed

+120
-46
lines changed

‎aio-ja/content/guide/template-overview.en.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Understanding templates
2+
3+
In Angular, a template is a blueprint for a fragment of a user interface (UI). Templates are written in HTML, and special syntax can be used within a template to build on many of Angular's features.
4+
5+
## Prerequisites
6+
7+
Before learning template syntax, you should be familiar with the following:
8+
9+
* [Angular concepts](guide/architecture)
10+
* JavaScript
11+
* HTML
12+
* CSS
13+
14+
## Enhancing HTML
15+
16+
Angular extends the HTML syntax in your templates with additional functionality.
17+
For example, Angular’s data binding syntax helps to set Document Object Model (DOM) properties dynamically.
18+
19+
Almost all HTML syntax is valid template syntax. However, because an Angular template is only a fragment of the UI, it does not include elements such as `<html>`, `<body>`, or `<base>`.
20+
21+
<div class="alert is-important">
22+
23+
To eliminate the risk of script injection attacks, Angular does not support the `<script>` element in templates. Angular ignores the `<script>` tag and outputs a warning to the browser console.
24+
For more information, see the [Security](guide/security) page.
25+
26+
</div>
27+
28+
## More on template syntax
29+
30+
You might also be interested in the following:
31+
32+
<div class="card-container">
33+
<a href="guide/interpolation" class="docs-card" title="Interpolation">
34+
<section>Interpolation</section>
35+
<p>Learn how to use interpolation and expressions in HTML.</p>
36+
<p class="card-footer">Interpolation</p>
37+
</a>
38+
<a href="guide/property-binding" class="docs-card" title="Property binding">
39+
<section>Property binding</section>
40+
<p>Set properties of target elements or directive @Input() decorators.</p>
41+
<p class="card-footer">Property binding</p>
42+
</a>
43+
<a href="guide/attribute-binding" class="docs-card" title="Attribute binding">
44+
<section>Attribute binding</section>
45+
<p>Set the value of attributes.</p>
46+
<p class="card-footer">Attribute binding</p>
47+
</a>
48+
<a href="guide/class-binding" class="docs-card" title="Class and style binding">
49+
<section>Class and style binding</section>
50+
<p>Set the value of class and style.</p>
51+
<p class="card-footer">Class and style binding</p>
52+
</a>
53+
<a href="guide/event-binding" class="docs-card" title="Event binding">
54+
<section>Event binding</section>
55+
<p>Listen for events and your HTML.</p>
56+
<p class="card-footer">Event binding</p>
57+
</a>
58+
<a href="guide/template-reference-variables" class="docs-card" title="Template reference variables">
59+
<section>Template reference variables</section>
60+
<p>Use special variables to reference a DOM element within a template.</p>
61+
<p class="card-footer">Template reference variables</p>
62+
</a>
63+
<a href="guide/built-in-directives" class="docs-card" title="Built-in directives">
64+
<section>Built-in directives</section>
65+
<p>Listen to and modify the behavior and layout of HTML.</p>
66+
<p class="card-footer">Built-in directives</p>
67+
</a>
68+
<a href="guide/inputs-outputs" class="docs-card" title="Inputs and Outputs">
69+
<section>Inputs and Outputs</section>
70+
<p>Share data between the parent context and child directives or components.</p>
71+
<p class="card-footer">Inputs and Outputs</p>
72+
</a>
73+
</div>
74+
75+
@reviewed 2022-05-11

‎aio-ja/content/guide/template-overview.md‎

Lines changed: 45 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,75 @@
1-
# Understanding templates
1+
# テンプレートを理解する
22

3-
In Angular, a template is a blueprint for a fragment of a user interface (UI). Templates are written in HTML, and special syntax can be used within a template to build on many of Angular's features.
3+
Angularにおいて、テンプレートはユーザーインターフェース (UI) の一部の設計図となります。テンプレートはHTMLで記述されており、テンプレート内で特別な構文を利用することで、Angularの多くの機能を利用してアプリケーションを構築することができます。
44

5-
## Prerequisites
5+
## 前提条件
66

7-
Before learning template syntax, you should be familiar with the following:
7+
テンプレート構文を学習する前に、次のことを理解しておく必要があります。
88

9-
* [Angular concepts](guide/architecture)
9+
* [Angularの概念](guide/architecture)
1010
* JavaScript
1111
* HTML
1212
* CSS
1313

14-
## Enhancing HTML
14+
## HTMLの強化
1515

16-
Angular extends the HTML syntax in your templates with additional functionality.
17-
For example, Angular’s data binding syntax helps to set Document Object Model (DOM) properties dynamically.
16+
Angularは、追加機能を利用してテンプレート内のHTML構文を拡張します。
17+
たとえば、Angularのデータバインディング構文は、ドキュメントオブジェクトモデル (DOM) プロパティを動的に設定するのに役立ちます。
1818

19-
Almost all HTML syntax is valid template syntax. However, because an Angular template is only a fragment of the UI, it does not include elements such as `<html>`, `<body>`, or `<base>`.
19+
ほとんどすべてのHTML構文は有効なテンプレート構文です。ただし、AngularテンプレートはUIの一部に過ぎないため、`<html>`、`<body>`や`<base>`のような要素は含まれません。
2020

2121
<div class="alert is-important">
2222

23-
To eliminate the risk of script injection attacks, Angular does not support the `<script>` element in templates. Angular ignores the `<script>` tag and outputs a warning to the browser console.
24-
For more information, see the [Security](guide/security) page.
23+
スクリプトインジェクション攻撃のリスクを排除するため、Angularはテンプレート内の`<script>`要素をサポートしません。Angularは`<script>`タグを無視し、ブラウザのコンソールに警告を出力します。
24+
詳細については、[セキュリティ](guide/security)ページを参照してください。
2525

2626
</div>
2727

28-
## More on template syntax
28+
## テンプレート構文の詳細
2929

30-
You might also be interested in the following:
30+
次の内容にも興味があるかもしれません。
3131

3232
<div class="card-container">
33-
<a href="guide/interpolation" class="docs-card" title="Interpolation">
34-
<section>Interpolation</section>
35-
<p>Learn how to use interpolation and expressions in HTML.</p>
36-
<p class="card-footer">Interpolation</p>
33+
<a href="guide/interpolation" class="docs-card" title="補間">
34+
<section>補間</section>
35+
<p>HTML内で補間と式を利用する方法を学びます。</p>
36+
<p class="card-footer">補間</p>
3737
</a>
38-
<a href="guide/property-binding" class="docs-card" title="Property binding">
39-
<section>Property binding</section>
40-
<p>Set properties of target elements or directive @Input() decorators.</p>
41-
<p class="card-footer">Property binding</p>
38+
<a href="guide/property-binding" class="docs-card" title="プロパティバインディング">
39+
<section>プロパティバインディング</section>
40+
<p>ターゲット要素 または ディレクティブ @Input() デコレータのプロパティを設定します。</p>
41+
<p class="card-footer">プロパティバインディング</p>
4242
</a>
43-
<a href="guide/attribute-binding" class="docs-card" title="Attribute binding">
44-
<section>Attribute binding</section>
45-
<p>Set the value of attributes.</p>
46-
<p class="card-footer">Attribute binding</p>
43+
<a href="guide/attribute-binding" class="docs-card" title="属性バインディング">
44+
<section>属性バインディング</section>
45+
<p>属性の値を設定します。</p>
46+
<p class="card-footer">属性バインディング</p>
4747
</a>
48-
<a href="guide/class-binding" class="docs-card" title="Class and style binding">
49-
<section>Class and style binding</section>
50-
<p>Set the value of class and style.</p>
51-
<p class="card-footer">Class and style binding</p>
48+
<a href="guide/class-binding" class="docs-card" title="クラスとスタイルのバインディング">
49+
<section>クラスとスタイルのバインディング</section>
50+
<p>クラスとスタイルの値を設定します。</p>
51+
<p class="card-footer">クラスとスタイルのバインディング</p>
5252
</a>
53-
<a href="guide/event-binding" class="docs-card" title="Event binding">
54-
<section>Event binding</section>
55-
<p>Listen for events and your HTML.</p>
56-
<p class="card-footer">Event binding</p>
53+
<a href="guide/event-binding" class="docs-card" title="イベントバインディング">
54+
<section>イベントバインディング</section>
55+
<p>イベントとHTMLをリッスンします。</p>
56+
<p class="card-footer">イベントバインディング</p>
5757
</a>
58-
<a href="guide/template-reference-variables" class="docs-card" title="Template reference variables">
59-
<section>Template reference variables</section>
60-
<p>Use special variables to reference a DOM element within a template.</p>
61-
<p class="card-footer">Template reference variables</p>
58+
<a href="guide/template-reference-variables" class="docs-card" title="テンプレート参照変数">
59+
<section>テンプレート参照変数</section>
60+
<p>特殊変数を利用して、テンプレート内のDOM要素を参照します。</p>
61+
<p class="card-footer">テンプレート参照変数</p>
6262
</a>
63-
<a href="guide/built-in-directives" class="docs-card" title="Built-in directives">
64-
<section>Built-in directives</section>
65-
<p>Listen to and modify the behavior and layout of HTML.</p>
66-
<p class="card-footer">Built-in directives</p>
63+
<a href="guide/built-in-directives" class="docs-card" title="組み込みディレクティブ">
64+
<section>組み込みディレクティブ</section>
65+
<p>HTMLの動作とレイアウトをリッスンし、変更します。</p>
66+
<p class="card-footer">組み込みディレクティブ</p>
6767
</a>
68-
<a href="guide/inputs-outputs" class="docs-card" title="Inputs and Outputs">
69-
<section>Inputs and Outputs</section>
70-
<p>Share data between the parent context and child directives or components.</p>
71-
<p class="card-footer">Inputs and Outputs</p>
68+
<a href="guide/inputs-outputs" class="docs-card" title="入力と出力">
69+
<section>入力と出力</section>
70+
<p>親コンテキストと子ディレクティブまたはコンポーネントとの間でデータを共有します。</p>
71+
<p class="card-footer">入力と出力</p>
7272
</a>
7373
</div>
7474

7575
@reviewed 2022-05-11
76-

0 commit comments

Comments
 (0)