Skip to content

Commit d3b1df6

Browse files
committed
Merge pull request #38 from yogurito/gudie_mvc_understanding_model
docs(guide): Understanding the Model Componentを翻訳
2 parents 1b225e9 + c699340 commit d3b1df6

File tree

3 files changed

+229
-2692
lines changed

3 files changed

+229
-2692
lines changed
Lines changed: 51 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,86 @@
11
@ngdoc overview
2-
@name Developer Guide: About MVC in Angular: Understanding the Model Component
2+
@name Developer Guide: Angular の MVC について : モデルコンポーネントを理解する
33
@description
44

5-
Depending on the context of the discussion in the Angular documentation, the term _model_ can refer to
6-
either a single object representing one entity (for example, a model called "phones" with its value
7-
being an array of phones) or the entire data model for the application (all entities).
5+
Angular ドキュメントでは、_モデル_ という言葉は文脈によって、
6+
1 つのエンティティを表現する単一のオブジェクト
7+
(例えば、複数の phone の配列を値に持つ "phones" というモデル) を指す場合と、
8+
アプリケーションの全データモデル (すべてのエンティティ) を指す場合があります。
89

9-
In Angular, a model is any data that is reachable as a property of an angular {@link
10-
scope Scope} object. The name of the property is the model identifier and the value is
11-
any JavaScript object (including arrays and primitives).
10+
Angular では、モデルとは Angular の {@link scope スコープ}
11+
オブジェクトから到達可能なあらゆるデータのことです。
12+
プロパティの名前はモデルの識別子であり、プロパティの値は何らかの JavaScript のオブジェクト
13+
(配列とプリミティブ型を含む)です。
1214

13-
The only requirement for a JavaScript object to be a model in Angular is that the object must be
14-
referenced by an Angular scope as a property of that scope object. This property reference can be
15-
created explicitly or implicitly.
15+
JavaScript のオブジェクトが Angular のモデルになるための唯一の条件は、
16+
そのオブジェクトが Angular スコープオブジェクトのプロパティとして、
17+
スコープから参照できることだけです。
18+
このようなプロパティへの参照は明示的に作成することもでき、暗黙的に作成されることもあります。
1619

17-
You can create models by explicitly creating scope properties referencing JavaScript objects in the
18-
following ways:
20+
下記のように、JavaScript オブジェクトを参照するスコーププロパティを明示的に作成することで、
21+
モデルを作成することができます。
1922

20-
* Make a direct property assignment to the scope object in JavaScript code; this most commonly
21-
occurs in controllers:
23+
* JavaScript のコードでスコープオブジェクトのプロパティに直接代入する
24+
(主にコントローラで使われる方法)
2225

26+
<pre>
2327
function MyCtrl($scope) {
24-
// create property 'foo' on the MyCtrl's scope
25-
// and assign it an initial value 'bar'
28+
// MyCtrlのスコープに'foo'というプロパティを作成し、
29+
// 初期値'bar'を代入する
2630
$scope.foo = 'bar';
2731
}
32+
</pre>
2833

29-
* Use an {@link expression angular expression} with an assignment operator in templates:
34+
* テンプレートで、代入演算子を含む {@link expression Angular の expression} を使う
3035

36+
<pre>
3137
<button ng-click="{{foos='ball'}}">Click me</button>
38+
</pre>
3239

33-
* Use {@link api/ng.directive:ngInit ngInit directive} in templates (for toy/example apps
34-
only, not recommended for real applications):
40+
* テンプレートで、 {@link api/ng.directive:ngInit ngInit ディレクティブ} を使う
41+
(サンプルアプリケーションのみで使ってください。
42+
実際のアプリケーションではおすすめしません。)
3543

44+
<pre>
3645
<body ng-init=" foo = 'bar' ">
46+
</pre>
3747

38-
Angular creates models implicitly (by creating a scope property and assigning it a suitable value)
39-
when processing the following template constructs:
48+
次のようなテンプレート構造を処理するとき、 Angular はモデルを暗黙的に作成します。
49+
(スコープのプロパティを作成し、適切な値を代入します。)
4050

41-
* Form input, select, textarea and other form elements:
51+
* input, select, textarea や他のフォーム要素
4252

53+
<pre>
4354
<input ng-model="query" value="fluffy cloud">
55+
</pre>
4456

45-
The code above creates a model called "query" on the current scope with the value set to "fluffy
46-
cloud".
57+
上記のコードはカレントスコープに "query" というモデルを作成し、その値を "fluffy cloud"
58+
にセットします。
4759

48-
* An iterator declaration in {@link api/ng.directive:ngRepeat ngRepeater}:
60+
* {@link api/ng.directive:ngRepeat ngRepeat} におけるイテレータの宣言
4961

62+
<pre>
5063
<p ng-repeat="phone in phones"></p>
64+
</pre>
5165

52-
The code above creates one child scope for each item in the "phones" array and creates a "phone"
53-
object (model) on each of these scopes with its value set to the value of "phone" in the array.
66+
上記のコードは "phones" 配列のそれぞれの要素に対して 1 つずつ子スコープを作成し、
67+
子スコープ に "phone" オブジェクト (モデル) を作成して、
68+
その値を配列内の "phone" の値にセットします。
5469

55-
In Angular, a JavaScript object stops being a model when:
70+
Angular では、 JavaScript オブジェクトは下記の場合にモデルではなくなります。
5671

57-
* No Angular scope contains a property that references the object.
72+
* オブジェクトを参照するプロパティを持つ Angular スコープがなくなった場合
5873

59-
* All Angular scopes that contain a property referencing the object become stale and eligible for
60-
garbage collection.
74+
* オブジェクトを参照するプロパティを持つすべての Angular スコープが古くなり(使用されなくなり)、
75+
ガベージコレクションの対象になった場合
6176

62-
The following illustration shows a simple data model created implicitly from a simple template:
77+
以下の図は、単純なテンプレートをもとにモデルが暗黙的に作成される様子を示しています。
6378

6479
<img src="img/guide/about_model_final.png">
6580

6681

67-
## Related Topics
82+
## 関連トピック
6883

69-
* {@link dev_guide.mvc About MVC in Angular}
70-
* {@link dev_guide.mvc.understanding_controller Understanding the Controller Component}
71-
* {@link dev_guide.mvc.understanding_view Understanding the View Component}
84+
* {@link dev_guide.mvc Angular における MVC について}
85+
* {@link dev_guide.mvc.understanding_controller コントローラコンポーネントを理解する}
86+
* {@link dev_guide.mvc.understanding_view ビューコンポーネントを理解する}
3.21 KB
Loading

0 commit comments

Comments
 (0)