|
1 | 1 | @ngdoc overview |
2 | | -@name Developer Guide: About MVC in Angular: Understanding the Model Component |
| 2 | +@name Developer Guide: Angular の MVC について : モデルコンポーネントを理解する |
3 | 3 | @description |
4 | 4 |
|
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 | +アプリケーションの全データモデル (すべてのエンティティ) を指す場合があります。 |
8 | 9 |
|
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 | +(配列とプリミティブ型を含む)です。 |
12 | 14 |
|
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 | +このようなプロパティへの参照は明示的に作成することもでき、暗黙的に作成されることもあります。 |
16 | 19 |
|
17 | | -You can create models by explicitly creating scope properties referencing JavaScript objects in the |
18 | | -following ways: |
| 20 | +下記のように、JavaScript オブジェクトを参照するスコーププロパティを明示的に作成することで、 |
| 21 | +モデルを作成することができます。 |
19 | 22 |
|
20 | | -* Make a direct property assignment to the scope object in JavaScript code; this most commonly |
21 | | -occurs in controllers: |
| 23 | +* JavaScript のコードでスコープオブジェクトのプロパティに直接代入する |
| 24 | + (主にコントローラで使われる方法) |
22 | 25 |
|
| 26 | + <pre> |
23 | 27 | 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'を代入する |
26 | 30 | $scope.foo = 'bar'; |
27 | 31 | } |
| 32 | + </pre> |
28 | 33 |
|
29 | | -* Use an {@link expression angular expression} with an assignment operator in templates: |
| 34 | +* テンプレートで、代入演算子を含む {@link expression Angular の expression} を使う |
30 | 35 |
|
| 36 | + <pre> |
31 | 37 | <button ng-click="{{foos='ball'}}">Click me</button> |
| 38 | + </pre> |
32 | 39 |
|
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 | + 実際のアプリケーションではおすすめしません。) |
35 | 43 |
|
| 44 | + <pre> |
36 | 45 | <body ng-init=" foo = 'bar' "> |
| 46 | + </pre> |
37 | 47 |
|
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 | +(スコープのプロパティを作成し、適切な値を代入します。) |
40 | 50 |
|
41 | | -* Form input, select, textarea and other form elements: |
| 51 | +* input, select, textarea や他のフォーム要素 |
42 | 52 |
|
| 53 | + <pre> |
43 | 54 | <input ng-model="query" value="fluffy cloud"> |
| 55 | + </pre> |
44 | 56 |
|
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 | + にセットします。 |
47 | 59 |
|
48 | | -* An iterator declaration in {@link api/ng.directive:ngRepeat ngRepeater}: |
| 60 | +* {@link api/ng.directive:ngRepeat ngRepeat} におけるイテレータの宣言 |
49 | 61 |
|
| 62 | + <pre> |
50 | 63 | <p ng-repeat="phone in phones"></p> |
| 64 | + </pre> |
51 | 65 |
|
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" の値にセットします。 |
54 | 69 |
|
55 | | -In Angular, a JavaScript object stops being a model when: |
| 70 | +Angular では、 JavaScript オブジェクトは下記の場合にモデルではなくなります。 |
56 | 71 |
|
57 | | -* No Angular scope contains a property that references the object. |
| 72 | +* オブジェクトを参照するプロパティを持つ Angular スコープがなくなった場合 |
58 | 73 |
|
59 | | -* All Angular scopes that contain a property referencing the object become stale and eligible for |
60 | | -garbage collection. |
| 74 | +* オブジェクトを参照するプロパティを持つすべての Angular スコープが古くなり(使用されなくなり)、 |
| 75 | + ガベージコレクションの対象になった場合 |
61 | 76 |
|
62 | | -The following illustration shows a simple data model created implicitly from a simple template: |
| 77 | +以下の図は、単純なテンプレートをもとにモデルが暗黙的に作成される様子を示しています。 |
63 | 78 |
|
64 | 79 | <img src="img/guide/about_model_final.png"> |
65 | 80 |
|
66 | 81 |
|
67 | | -## Related Topics |
| 82 | +## 関連トピック |
68 | 83 |
|
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 ビューコンポーネントを理解する} |
0 commit comments