diff --git a/aio-ja/content/guide/architecture.md b/aio-ja/content/guide/architecture.md index 7b829eb9db..c217c92908 100644 --- a/aio-ja/content/guide/architecture.md +++ b/aio-ja/content/guide/architecture.md @@ -1,20 +1,20 @@ -# Architecture Overview +# アーキテクチャー概要 -Angular is a framework for building client applications in HTML and -either JavaScript or a language like TypeScript that compiles to JavaScript. +Angular は、HTMLとJavaScriptまたはTypeScriptのようにJavaScriptにコンパイルできるような言語で書かれる +クライアントアプリケーションを開発するためのフレームワークです。 -The framework consists of several libraries, some of them core and some optional. +このフレームワークはいくつかのコアライブラリとオプショナルなライブラリからなります。 -You write Angular applications by composing HTML *templates* with Angularized markup, -writing *component* classes to manage those templates, adding application logic in *services*, -and boxing components and services in *modules*. +Angularアプリケーションを書くために、Angular化されたマークアップをもつHTML *テンプレート* を構成したり、 +それらのテンプレートを管理するための *コンポーネント* クラスを書いたり、 +アプリケーションロジックを *サービス* に追加したり、コンポーネントとサービスを *モジュール* に詰め込んだりします。 -Then you launch the app by *bootstrapping* the _root module_. -Angular takes over, presenting your application content in a browser and -responding to user interactions according to the instructions you've provided. +そして _ルートモジュール_ を *ブートストラップ* することでアプリを起動します。 +Angularはあなたのアプリケーションのコンテンツをブラウザに表示することと、 +提供した手順にしたがってユーザーの操作に応答することを引き受けます。 -Of course, there is more to it than this. -You'll learn the details in the pages that follow. For now, focus on the big picture. +もちろん、それ以上のこともあります。 +詳細はこのページの続きで学びます。いまのところはこの全体像に集中しましょう。
overview @@ -22,511 +22,518 @@ You'll learn the details in the pages that follow. For now, focus on the big pic
- The code referenced on this page is available as a . + このページで参照されているコードはここにあります。
-## Modules +{@a modules} +## モジュール Component -Angular apps are modular and Angular has its own modularity system called _NgModules_. +Angularのアプリはモジュール化されており、Angularは _NgModule_ と呼ばれる独自のモジュール方式を持っています。 -NgModules are a big deal. -This page introduces modules; the [NgModules](guide/ngmodule) page covers them in depth. +NgModuleはすごいものです。 +このページではモジュールを紹介します。[NgModules](guide/ngmodule) のページではさらに詳細に取り上げます。
-Every Angular app has at least one NgModule class, [the _root module_](guide/bootstrapping "Bootstrapping"), -conventionally named `AppModule`. +すべてのAngularアプリは少なくともひとつのNgModuleクラス、[_ルートモジュール_](guide/bootstrapping "Bootstrapping")を持ちます。 +これは慣例的に`AppModule`と呼ばれます。 -While the _root module_ may be the only module in a small application, most apps have many more -_feature modules_, each a cohesive block of code dedicated to an application domain, -a workflow, or a closely related set of capabilities. +小さなアプリケーションでは、_ルートモジュール_がただひとつのモジュールかもしれませんが、ほとんどのアプリはたくさんの +_機能モジュール_を持ちます。それはアプリケーションドメインに特化したコードの集合、ワークフロー、 +または密接に関連した一連の機能の集合です。 -An NgModule, whether a _root_ or _feature_, is a class with an `@NgModule` decorator. +_ルート_ または _機能_ にかかわらず、NgModuleは`@NgModule`デコレータをもつクラスです。
- Decorators are functions that modify JavaScript classes. - Angular has many decorators that attach metadata to classes so that it knows - what those classes mean and how they should work. + デコレータはJavaScriptクラスを装飾する関数です。 + Angularはクラスが何を意味し、それらがどう動くべきかを知るためにメタデータをクラスに付与できる数々のデコレータを持っています。 + デコレータについてはウェブ上で - Learn more about decorators on the web. + さらに学んでください。
-`NgModule` is a decorator function that takes a single metadata object whose properties describe the module. -The most important properties are: -* `declarations` - the _view classes_ that belong to this module. -Angular has three kinds of view classes: [components](guide/architecture#components), [directives](guide/architecture#directives), and [pipes](guide/pipes). +`NgModule` はモジュールを説明するプロパティをもつひとつのメタデータオブジェクトを引数に取るデコレータ関数です。 +もっとも重要なプロパティは +* `declarations` - そのモジュールに属す _ビュークラス_群です。 +Angularには3種類のビュークラス: [components](guide/architecture#components), [directives](guide/architecture#directives), [pipes](guide/pipes) +があります。 -* `exports` - the subset of declarations that should be visible and usable in the component [templates](guide/architecture#templates) of other modules. +* `exports` - 他のモジュールのコンポーネント[テンプレート](guide/architecture#templates)から見えて、使えるべき +declarationsのサブセットです。 -* `imports` - other modules whose exported classes are needed by component templates declared in _this_ module. +* `imports` - _この_モジュールで宣言されたコンポーネントテンプレートで必要なクラスをエクスポートする他のモジュール。 -* `providers` - creators of [services](guide/architecture#services) that this module contributes to -the global collection of services; they become accessible in all parts of the app. +* `providers` - このモジュールがグローバルコレクションに提供する[サービス](guide/architecture#services)のクリエイター、サービスのグローバルコレクション; +これらはこのアプリのすべてのパーツからアクセス可能になります。 -* `bootstrap` - the main application view, called the _root component_, -that hosts all other app views. Only the _root module_ should set this `bootstrap` property. +* `bootstrap` - メインアプリケーションビュー（_ルートコンポーネント_と呼ばれます）これはアプリの他のすべてのビューをホストしています。 +_ルートモジュール_のみがこの`bootstrap`プロパティをセットすべきです。 -Here's a simple root module: +これがシンプルなルートモジュールです。
- The `export` of `AppComponent` is just to show how to use the `exports` array to export a component; it isn't actually necessary in this example. A root module has no reason to _export_ anything because other components don't need to _import_ the root module. + `AppComponent`を`export`しているのは、コンポーネントをエクスポートするためにどう`exports`配列を使うかを示すためです。 + これは実はこの例の中では必要のないものです。 + ルートモジュールは何も_エクスポート_する必要はありません。 + なぜなら、他のコンポーネントはルートモジュールを_インポート_する必要がないためです。
-Launch an application by _bootstrapping_ its root module. -During development you're likely to bootstrap the `AppModule` in a `main.ts` file like this one. +ルートモジュールを_ブートストラップ_することでアプリケーションを起動します。 +開発中はこのファイルのような`main.ts`内で`AppModule`を起動することになります。 -### NgModules vs. JavaScript modules +### NgModules vs. JavaScript モジュール -The NgModule — a class decorated with `@NgModule` — is a fundamental feature of Angular. +NgModule — `@NgModule` で装飾されたクラス — はAngularの基礎的な機能です。 -JavaScript also has its own module system for managing collections of JavaScript objects. -It's completely different and unrelated to the NgModule system. +JavaScriptもオブジェクトのコレクションを管理するためのモジュールシステムを持っています。 +それは NgModule システムとはまったく異なり、関係のないものです。 -In JavaScript each _file_ is a module and all objects defined in the file belong to that module. -The module declares some objects to be public by marking them with the `export` key word. -Other JavaScript modules use *import statements* to access public objects from other modules. +JavaScriptでは各_ファイル_はモジュールで、またそのファイル内で定義されているオブジェクトはそのモジュールに属します。 +モジュールは`export`キーワードをつけることで、いくつかのオブジェクトをpublicとして宣言することができます。 +他のJavaScriptモジュールは*インポート文*を使うことで、他のモジュールからのpublicオブジェクトにアクセスできます。
- Learn more about the JavaScript module system on the web. + ウェブ上でさらにJavaScriptモジュールシステムについて学んでください
-These are two different and _complementary_ module systems. Use them both to write your apps. +相違があり、_補完しあう_ 2つのモジュールシステムがあります。アプリを書くためにこれら両方を使用しましょう。 -### Angular libraries +### Angular ライブラリ Component -Angular ships as a collection of JavaScript modules. You can think of them as library modules. +AngularはJavaScriptのモジュールの集まりとして出荷します。ライブラリモジュールとして考えることができます。 -Each Angular library name begins with the `@angular` prefix. +それぞれのAngularライブラリの名前は`@angular`プレフィックスから始まります。 -You install them with the **npm** package manager and import parts of them with JavaScript `import` statements. +**npm**パッケージマネージャーでインストールすることができ、JavaScriptの`import`文によって、それらのパーツをインポートできます。
-For example, import Angular's `Component` decorator from the `@angular/core` library like this: +たとえば、`@angular/core`ライブラリから`Component`デコレータをインポートするためには次のようにします。 -You also import NgModules from Angular _libraries_ using JavaScript import statements: +また、Angular _ライブラリ_からNgModuleをインポートするにはJavaScriptのインポート文を使います。 -In the example of the simple root module above, the application module needs material from within that `BrowserModule`. To access that material, add it to the `@NgModule` metadata `imports` like this. +上記のシンプルなルートモジュールの例では、アプリケーションモジュールは`BrowswerModule`に含まれる部品を必要とします。 +その部品にアクセスするためには、次のように`@NgModule`のメタデータの`imports`に追加します。 -In this way you're using both the Angular and JavaScript module systems _together_. +このように、AngularとJavaScriptモジュールシステムの両方を_一緒に_使います。 -It's easy to confuse the two systems because they share the common vocabulary of "imports" and "exports". -Hang in there. The confusion yields to clarity with time and experience. +この2つのシステムは`imports`と`exports`という共通の用語を共有するため、混乱しやすいです。 +ですが諦めないでください。その混乱は時間と経験によってクリアになっていきます。
- Learn more from the [NgModules](guide/ngmodule) page. + [NgModules](guide/ngmodule)のページでさらに学びましょう。
-## Components +{@a components} +## コンポーネント Component -A _component_ controls a patch of screen called a *view*. +_コンポーネント_ は*ビュー*と呼ばれる画面の一部分をコントロールします。 -For example, the following views are controlled by components: +たとえば、次のビューはコンポーネントによりコントロールされます。 -* The app root with the navigation links. -* The list of heroes. -* The hero editor. +* ナビゲーションのリンクをもつアプリケーションのルート。 +* ヒーローのリスト。 +* ヒーローエディター。 -You define a component's application logic—what it does to support the view—inside a class. -The class interacts with the view through an API of properties and methods. +コンポーネントのアプリケーションロジック—ビューをサポートするもの—はクラスの中に定義します。 +クラスはプロパティとメソッドのAPIを通じてビューとやり取りします。 {@a component-code} -For example, this `HeroListComponent` has a `heroes` property that returns an array of heroes -that it acquires from a service. -`HeroListComponent` also has a `selectHero()` method that sets a `selectedHero` property when the user clicks to choose a hero from that list. +たとえば、この`HeroListComponent`はサービスから取得するヒーローの配列を返す`heroes`プロパティを持ちます。 +`HeroListComponent`はユーザーがリストから1人のヒーローを選択するためにクリックしたときに`selectedHero`プロパティをセットする`selectHero()`メソッドも持ちます。 -Angular creates, updates, and destroys components as the user moves through the application. -Your app can take action at each moment in this lifecycle through optional [lifecycle hooks](guide/lifecycle-hooks), like `ngOnInit()` declared above. +Angularはユーザーがアプリケーション内を移動する中でコンポーネントを作成し、更新し、破棄します。 +アプリは上で宣言した`ngOnInit()`のような[ライフサイクルフック](guide/lifecycle-hooks)を通じてライフサイクルの各時点でアクションを起こすことができます。
-## Templates +{@a templates} +## テンプレート Template -You define a component's view with its companion **template**. A template is a form of HTML -that tells Angular how to render the component. +コンポーネントのビューをそれに対応する**テンプレート**で定義します。 +テンプレートはAngularにどうコンポーネントを描画するかを教えるHTMLの一形式です。 -A template looks like regular HTML, except for a few differences. Here is a -template for our `HeroListComponent`: +テンプレートは通常のHTMLと似ていますが、いくつかの点で異なります。 +次は`HeroListComponent`のテンプレートです。 -Although this template uses typical HTML elements like `

` and `

`, it also has some differences. Code like `*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, and `` uses Angular's [template syntax](guide/template-syntax). +このテンプレートは典型的なHTML要素の`

`と`

`を使用していますが、これもいくつかの違いがあります。 +`*ngFor`, `{{hero.name}}`, `(click)`, `[hero]`, そして `` といったコードはAngularの[テンプレートシンタックス](guide/template-syntax)を使用しています。 -In the last line of the template, the `` tag is a custom element that represents a new component, `HeroDetailComponent`. +テンプレートの最後の行、``タグは新しいコンポーネント`HeroDetailComponent`を表すカスタム要素です。 -The `HeroDetailComponent` is a *different* component than the `HeroListComponent` you've been reviewing. -The `HeroDetailComponent` (code not shown) presents facts about a particular hero, the -hero that the user selects from the list presented by the `HeroListComponent`. -The `HeroDetailComponent` is a **child** of the `HeroListComponent`. +`HeroDetailComponent`はレビューしてきた`HeroListComponent`とは*異なる*コンポーネントです。 +`HeroDetailComponent` (まだ見せていません) は`HeroListComponent`で表示されたリストから +ユーザーが選択した特定のヒーローの情報を示すものです。 +`HeroDetailComponent`は`HeroListComponent`の**子**です。 Metadata -Notice how `` rests comfortably among native HTML elements. Custom components mix seamlessly with native HTML in the same layouts. +``がネイティブHTML要素の中で違和感なく置かれていることに注目してください。 +カスタムコンポーネントは同じレイアウトでシームレスにネイティブHTMLと混ざり合います。

-## Metadata +{@a metadata} +## メタデータ Metadata -Metadata tells Angular how to process a class. +メタデータはAngularにクラスをどのように扱うかを教えます。
-[Looking back at the code](guide/architecture#component-code) for `HeroListComponent`, you can see that it's just a class. -There is no evidence of a framework, no "Angular" in it at all. +`HeroListComponent`の[このコードを見返す](guide/architecture#component-code)と、それがただのクラスだということが分かるでしょう。 +フレームワークの形跡もありませんし、"Angular"がその中にあるわけでもありません。 -In fact, `HeroListComponent` really is *just a class*. It's not a component until you *tell Angular about it*. +実際、`HeroListComponent`は本当に*ただのクラス*です。これは*Angularにそれについて教える*までコンポーネントではありません。 -To tell Angular that `HeroListComponent` is a component, attach **metadata** to the class. +Angularに`HeroListComponent`がコンポーネントであると教えるためには、そのクラスに**metadata**を与えます。 -In TypeScript, you attach metadata by using a **decorator**. -Here's some metadata for `HeroListComponent`: +TypeScriptは、**デコレータ**を使うことでメタデータを付与します。 +これは`HeroListComponent`のためのいくつかのメタデータです。 -Here is the `@Component` decorator, which identifies the class -immediately below it as a component class. +これは`@Component`デコレータで、その直下にあるクラスがコンポーネントクラスであると特定するものです。 -The `@Component` decorator takes a required configuration object with the -information Angular needs to create and present the component and its view. +`@Component`デコレータはAngularがコンポーネントとそのビューを作成して表示するのに必要な情報をもつ設定情報を取ります。 -Here are a few of the most useful `@Component` configuration options: +これはもっともよく使う`@Component`設定オプションの一例です: -* `selector`: CSS selector that tells Angular to create and insert an instance of this component -where it finds a `` tag in *parent* HTML. -For example, if an app's HTML contains ``, then -Angular inserts an instance of the `HeroListComponent` view between those tags. +* `selector`: Angularが*親*HTML内の``が見つかった場所にこのコンポーネントのインスタンスを作成して挿入するように指示するCSSセレクタです。 +たとえば、もしアプリのHTMLが ``を含んでいたら、Angularは`HeroListComponent`のインスタンスをそれらのタグの間に挿入します。 -* `templateUrl`: module-relative address of this component's HTML template, shown [above](guide/architecture#templates). +* `templateUrl`: [上](guide/architecture#templates)で示した、このコンポーネントのHTMLテンプレートのモジュール相対アドレスです。 -* `providers`: array of **dependency injection providers** for services that the component requires. -This is one way to tell Angular that the component's constructor requires a `HeroService` -so it can get the list of heroes to display. +* `providers`: このコンポーネントが必要とするサービスに対する**依存性の注入のプロバイダー**の配列。 +これはAngularにこのコンポーネントのコンストラクタが`HeroService`を必要としていることを指示する方法なので、 +これは表示すべきヒーローのリストを取得することができます。 Metadata -The metadata in the `@Component` tells Angular where to get the major building blocks you specify for the component. +@Componentのメタデータは、コンポーネントに対して指定した主要な構成要素を取得する場所をAngularに通知します。 -The template, metadata, and component together describe a view. +テンプレート、メタデータ、そしてコンポーネントが一緒にビューを記述します。 -Apply other metadata decorators in a similar fashion to guide Angular behavior. -`@Injectable`, `@Input`, and `@Output` are a few of the more popular decorators. +他のメタデータデコレータを同じような方法で適用し、Angularの動作をガイドします。 +`@Injectable`, `@Input`, そして `@Output` はよく使われるデコレータです。
-The architectural takeaway is that you must add metadata to your code -so that Angular knows what to do. +アーキテクチャ上で考慮しておくべきことは、Angularが何をすべきかを知るために、コードにメタデータを追加しなければいけないということです。
-## Data binding +{@a data-binding} +## データバインディング -Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses -into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to -read as any experienced jQuery programmer can attest. +フレームワークなしの場合、HTMLコントロールに値をプッシュし、ユーザーのレスポンスをアクションと値の更新に変える責任が出てくるでしょう。 +このようなpush/pull側のロジックを手で書くのは面倒で、エラーが起こりやすく、経験豊富なjQueryプログラマが読むことができる悪夢です。 Data Binding -Angular supports **data binding**, -a mechanism for coordinating parts of a template with parts of a component. -Add binding markup to the template HTML to tell Angular how to connect both sides. +Angularはテンプレート内のパーツとコンポーネント内のパーツを対応させるメカニズム、**データバインディング**をサポートしています。 +バインディングマークアップをテンプレートHTMLに追加して、Angularに両サイドをどう連携させるかを通知します。 -As the diagram shows, there are four forms of data binding syntax. Each form has a direction — to the DOM, from the DOM, or in both directions. +ダイアグラムで示したように、4つの形式のデータバインディングのシンタックスがあります。 +各形式は方向を持ちます。—DOMへ、DOMから、または双方向です。
-The `HeroListComponent` [example](guide/architecture#templates) template has three forms: +[例](guide/architecture#templates)の`HeroListComponent`のテンプレートは3つの形式を持ちます。 -* The `{{hero.name}}` [*interpolation*](guide/displaying-data#interpolation) -displays the component's `hero.name` property value within the `
  • ` element. +* `{{hero.name}}` [*補完*](guide/displaying-data#interpolation)は`
  • `要素内にコンポーネントの`hero.name`プロパティの値を表示します。 -* The `[hero]` [*property binding*](guide/template-syntax#property-binding) passes the value of `selectedHero` from -the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`. +* `[hero]` [*プロパティバインディング*](guide/displaying-data#interpolation)は、親の`HeroListComponent`の`selectedHero`の値を、 +子の`HeroDetailComponent`の`hero`プロパティに渡します。 -* The `(click)` [*event binding*](guide/user-input#click) calls the component's `selectHero` method when the user clicks a hero's name. +* `(click)` [*イベントバインディング*](guide/user-input#click)はヒーロー名がクリックされたときに、 +このコンポーネントの`selectHero`メソッドを呼び出します。 -**Two-way data binding** is an important fourth form -that combines property and event binding in a single notation, using the `ngModel` directive. -Here's an example from the `HeroDetailComponent` template: +**双方向データバインディング** は重要な4つ目の形式で、プロパティバインディングとデータバインディングをひとつの記述にまとめたもので、 +`ngModel`ディレクティブを使用します。 +つぎが`HeroDetailComponent`のテンプレートからの例です。 -In two-way binding, a data property value flows to the input box from the component as with property binding. -The user's changes also flow back to the component, resetting the property to the latest value, -as with event binding. +双方向バインディングでは、プロパティの値がプロパティバインディングとして、コンポーネントからインプットボックスに渡ります。 +ユーザーが値を変更すると、イベントバインディングとしてコンポーネントに戻り、最新の値にプロパティがリセットされます。 -Angular processes *all* data bindings once per JavaScript event cycle, -from the root of the application component tree through all child components. +Angularはアプリケーションコンポーネントツリーのルートからすべての子コンポーネントまで、 +JavaScriptのイベントサイクルごとに1回、*すべての*データバインディングを処理します。
    Data Binding
    -Data binding plays an important role in communication between a template and its component. +データバインディングはテンプレートとそのコンポーネント間のコミュニケーションにおいて非常に重要な役割を果たします。
    Parent/Child binding
    -Data binding is also important for communication between parent and child components. +データバインディングはまた親コンポーネントと子コンポーネント間のコミュニケーションについても重要です。
    -## Directives +{@a directives} +## ディレクティブ Parent child -Angular templates are *dynamic*. When Angular renders them, it transforms the DOM -according to the instructions given by **directives**. +Angularのテンプレートは*動的*です。Angularがそれらをレンダリングする際、 +**directive**により与えられる指示によりDOMに変換されます。 -A directive is a class with a `@Directive` decorator. -A component is a *directive-with-a-template*; -a `@Component` decorator is actually a `@Directive` decorator extended with template-oriented features. +ディレクティブは`@Directive`デコレータをもったクラスです。 +コンポーネントは*テンプレートをもったディレクティブ*です。 +`@Component`デコレータは実際はテンプレート指向の機能で拡張された`@Directive`です。
    - While **a component is technically a directive**, - components are so distinctive and central to Angular applications that this architectural overview separates components from directives. - + **コンポーネントは厳密にはディレクティブ** ですが、 + コンポーネントはとても特徴的で、Angularアプリケーションの中心にあり、このアーキテクチャの概要ではコンポーネントをディレクティブとは切り離します。 +
    -Two *other* kinds of directives exist: _structural_ and _attribute_ directives. +2つの種類のディレクティブが存在します: _構造_ディレクティブと_属性_ディレクティブです。 + +それらは要素タグの中に属性として現れることがよくあり、名前により指定されることもありますが、 +割り当てやバインディングにより指定されることの方が多いです。 -They tend to appear within an element tag as attributes do, -sometimes by name but more often as the target of an assignment or a binding. +それらは要素タグの中に属性としてよく現れますが、名前により指定されたり、さらには割り当てやバインディングでよく使用されます。 -**Structural** directives alter layout by adding, removing, and replacing elements in DOM. +**構造**ディレクティブはDOM内で追加、削除または置き換えることでレイアウトを変更します。 -The [example template](guide/architecture#templates) uses two built-in structural directives: +[テンプレート例](guide/architecture#templates) では2つのビルトイン構造ディレクティブを使用しています。 -* [`*ngFor`](guide/displaying-data#ngFor) tells Angular to stamp out one `
  • ` per hero in the `heroes` list. -* [`*ngIf`](guide/displaying-data#ngIf) includes the `HeroDetail` component only if a selected hero exists. +* [`*ngFor`](guide/displaying-data#ngFor) はAngularに`heroes`リストの各ヒーローにつきひとつの`
  • `を置くように指示します。 +* [`*ngIf`](guide/displaying-data#ngIf) は選択されたヒーローが存在するときに限り`HeroDetail`コンポーネントを含みます。 -**Attribute** directives alter the appearance or behavior of an existing element. -In templates they look like regular HTML attributes, hence the name. +**属性**ディレクティブは実際の要素の見た目や挙動を変更します。 +テンプレート内ではそれらは普通のHTML属性のようです。したがってそのような名前がついています。 -The `ngModel` directive, which implements two-way data binding, is -an example of an attribute directive. `ngModel` modifies the behavior of -an existing element (typically an ``) -by setting its display value property and responding to change events. +`ngModel`ディレクティブは属性ディレクティブの例で、双方向バインディングを実現します。 +`ngModel`は表示用の値プロパティと変更イベントへの応答をセットすることで、実際の要素の挙動を変更します。(典型的には``) -Angular has a few more directives that either alter the layout structure -(for example, [ngSwitch](guide/template-syntax#ngSwitch)) -or modify aspects of DOM elements and components -(for example, [ngStyle](guide/template-syntax#ngStyle) and [ngClass](guide/template-syntax#ngClass)). +Angularはさらにいくつかレイアウト構造を変更するディレクティブ(たとえば、[ngSwitch](guide/template-syntax#ngSwitch)) や、 +DOM要素とコンポーネントの外見を変更するディレクティブ([ngStyle](guide/template-syntax#ngStyle)と[ngClass](guide/template-syntax#ngClass)) +を持っています。 -Of course, you can also write your own directives. Components such as -`HeroListComponent` are one kind of custom directive. +もちろん、あなたのディレクティブを書くこともできます。 +`HeroListComponent`のようなコンポーネントはカスタムディレクティブのひとつの種類です。
    -## Services +{@a services} +## サービス Service -_Service_ is a broad category encompassing any value, function, or feature that your application needs. +_サービス_はアプリケーションに必要な値、関数、または機能を含む幅広いカテゴリです。 -Almost anything can be a service. -A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well. +ほとんど何でもサービスになることができます。 +サービスは通常、狭く、明確な目的を持ったクラスです。 +それは特定の何かをして、それをうまくやるべきです。
    -Examples include: +例では下記を含みます。 -* logging service -* data service -* message bus -* tax calculator -* application configuration +* ロギングサービス +* データサービス +* メッセージバス +* 税計算 +* アプリケーション設定 -There is nothing specifically _Angular_ about services. Angular has no definition of a service. -There is no service base class, and no place to register a service. +サービスについて_Angular_として特別なことはなにもありません。 +Angularはサービスの定義をもちません。 +サービスのベースクラスも、登録する場所もありません。 -Yet services are fundamental to any Angular application. Components are big consumers of services. +しかしサービスはAngularアプリケーションの基礎となるものです。 +コンポーネントはサービスの大きな消費者です。 -Here's an example of a service class that logs to the browser console: +次はブラウザコンソールにログを出力するサービスクラスの例です。 -Here's a `HeroService` that uses a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to fetch heroes. -The `HeroService` depends on the `Logger` service and another `BackendService` that handles the server communication grunt work. +`HeroService`は[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)を利用してヒーローを取得します。 +`HeroService`は`Logger`サービスと、サービスとの通信を処理する`BackendService`に依存しています。 + -Services are everywhere. +サービスはどこにでもあります。 -Component classes should be lean. They don't fetch data from the server, -validate user input, or log directly to the console. -They delegate such tasks to services. +コンポーネントクラスは無駄がないようにあるべきです。 +それらはサーバーからデータを取得しませんし、ユーザーの入力をバリデートしませんし、コンソールにログを直接出力しません。 +そのようなタスクはサービスに委譲します。 -A component's job is to enable the user experience and nothing more. It mediates between the view (rendered by the template) -and the application logic (which often includes some notion of a _model_). -A good component presents properties and methods for data binding. -It delegates everything nontrivial to services. +コンポーネントの仕事はユーザー体験を有効化することで、それ以上はありません。 +それは(テンプレートによってレンダリングされた)ビューと、(モデルの概念を含んだ)アプリケーションロジックを仲介します。 +よいコンポーネントはデータバインディングのためにプロパティとメソッドを提供します。 +重要ではないことはすべてサービスに委譲します。 -Angular doesn't *enforce* these principles. -It won't complain if you write a "kitchen sink" component with 3000 lines. +Angularはこれらの原則を*強制*しません。 +もし3000行もある"全部入りの(kitchen sink)"コンポーネントを書いたとしても不満を言いません。 -Angular does help you *follow* these principles by making it easy to factor your -application logic into services and make those services available to components through *dependency injection*. +Angularはアプリケーションロジックをサービスに組み込むことを容易にし、またそれらのサービスを*依存性の注入*によって +コンポーネントで使用できるようにして、その原則に*従う*ように助けます。
    -## Dependency injection +{@a dependency-injection} +## 依存性の注入 Service -_Dependency injection_ is a way to supply a new instance of a class -with the fully-formed dependencies it requires. Most dependencies are services. -Angular uses dependency injection to provide new components with the services they need. +_依存性の注入_ はそのクラスが必要とする依存を完全な形を持ったインスタンスを提供する方法のひとつです。 +ほとんどの依存はサービスです。 +Angularは必要とするサービスを持った状態の新しいコンポーネントを提供するために依存性の注入を使用します。
    -Angular can tell which services a component needs by looking at the types of its constructor parameters. -For example, the constructor of your `HeroListComponent` needs a `HeroService`: +Angularはコンポーネントがどのサービスを必要としているか、そのクラスのコンストラクタのパラメータの型を見ることで知ることができます。 +たとえば、`HeroListComponent`のコンストラクタは`HeroService`を必要としています。 -When Angular creates a component, it first asks an **injector** for -the services that the component requires. +Angularがコンポーネントを作るとき、最初にそのコンポーネントがどのサービスを必要としているか**インジェクタ**に問い合わせます。 -An injector maintains a container of service instances that it has previously created. -If a requested service instance is not in the container, the injector makes one and adds it to the container -before returning the service to Angular. -When all requested services have been resolved and returned, -Angular can call the component's constructor with those services as arguments. -This is *dependency injection*. +インジェクタは前に作成したサービスインスタンスのコンテナを管理しています。 +もし必要とされたサービスインスタンスがコンテナ内にない場合、インジェクタはAngularにそのサービスを返す前に +インスタンスを作成してコンテナに追加します。 +リクエストされたすべてのサービスが解決されて返されると、Angularはそれらサービスを引数としてコンポーネントのコンストラクタを呼ぶことができます。 +これが*依存性の注入*です。 -The process of `HeroService` injection looks a bit like this: +`HeroService`の注入の処理は次のようになります。
    Service
    -If the injector doesn't have a `HeroService`, how does it know how to make one? +インジェクタに`HeroService`がない場合、それをどうやって作るのかどう知るのでしょうか？ -In brief, you must have previously registered a **provider** of the `HeroService` with the injector. -A provider is something that can create or return a service, typically the service class itself. +手短にいえば、インジェクタに`HeroService`の**プロバイダー**を事前に登録しておく必要があります。 +プロバイダーはサービスを作成または返すことができるもので、普通はサービスクラスそのものです。 -You can register providers in modules or in components. +プロバイダーはモジュールまたはコンポーネントに登録することができます。 -In general, add providers to the [root module](guide/architecture#modules) so that -the same instance of a service is available everywhere. +一般には、どこでも同じサービスインスタンスを使えるように[ルートモジュール](guide/architecture#modules)に追加します。 -Alternatively, register at a component level in the `providers` property of the `@Component` metadata: +または、`@Component`メタデータのプロパティ`providers`に追加して、コンポーネントレベルで登録します。 -Registering at a component level means you get a new instance of the -service with each new instance of that component. +コンポーネントレベルで登録するということは、コンポーネントが作成されるたびに、新しいサービスインスタンスを得ることになるということです。 -Points to remember about dependency injection: +依存性の注入について覚えるべきポイント: -* Dependency injection is wired into the Angular framework and used everywhere. +* 依存性の注入はAngularフレームワークに配線されていて、至る所で使用されています。 -* The *injector* is the main mechanism. - * An injector maintains a *container* of service instances that it created. - * An injector can create a new service instance from a *provider*. +* *インジェクタ*はメインのメカニズムです。 + * インジェクタは作成されたサービスインスタンスのコンテナを保持しています。 + * インジェクタは*プロバイダー*から新しいサービスインスタンスを作成することができます。 -* A *provider* is a recipe for creating a service. +* *プロバイダー*はサービスを作成するためのレシピです。 -* Register *providers* with injectors. +* インジェクタとともに*プロバイダー*に登録します。
    -## Wrap up +{@a wrap-up} +## まとめ -You've learned the basics about the eight main building blocks of an Angular application: +Angularアプリケーションの8つの主要な構成要素の基礎を学びました: -* [Modules](guide/architecture#modules) -* [Components](guide/architecture#components) -* [Templates](guide/architecture#templates) -* [Metadata](guide/architecture#metadata) -* [Data binding](guide/architecture#data-binding) -* [Directives](guide/architecture#directives) -* [Services](guide/architecture#services) -* [Dependency injection](guide/architecture#dependency-injection) +* [モジュール](guide/architecture#modules) +* [コンポーネント](guide/architecture#components) +* [テンプレート](guide/architecture#templates) +* [メタデータ](guide/architecture#metadata) +* [データバインディング](guide/architecture#data-binding) +* [ディレクティブ](guide/architecture#directives) +* [サービス](guide/architecture#services) +* [依存性の注入](guide/architecture#dependency-injection) -That's a foundation for everything else in an Angular application, -and it's more than enough to get going. -But it doesn't include everything you need to know. +Angularアプリケーションではこれらがすべての基礎となり、先に進むのに十分なものです。 +しかし、これはあなたが知るべきことすべてではありません。 -Here is a brief, alphabetical list of other important Angular features and services. -Most of them are covered in this documentation (or soon will be). +ここに少し、重要なAngularの機能とサービスについてのリストがアルファベット順であります。 +ほとんどのものはこのドキュメントの中で網羅されています。(または近いうちに網羅されます。) -> [**Animations**](guide/animations): Animate component behavior -without deep knowledge of animation techniques or CSS with Angular's animation library. +> [**アニメーション**](guide/animations): アニメーション技術やCSSの深い知識がなくともコンポーネントの挙動に +アニメーションをつけられるAngularのアニメーションライブラリ。 -> **Change detection**: The change detection documentation will cover how Angular decides that a component property value has changed, -when to update the screen, and how it uses **zones** to intercept asynchronous activity and run its change detection strategies. +> **変更検知**: 変更検知のドキュメントでは、コンポーネントのプロパティの値が変更されたこと +いつスクリーンを更新するか、**zones**を利用してどのように非同期の動作をインターセプトして変更検知の戦略を実行するのかを +Angularがどうやって決定するのかについて網羅する予定です。 -> **Events**: The events documentation will cover how to use components and services to raise events with mechanisms for -publishing and subscribing to events. +> **イベント**: イベントのドキュメントでは、コンポーネントとサービスを使用してイベントを発行し、 +イベントを購読する仕組みを使ってイベントを発生させる方法について説明します。 -> [**Forms**](guide/forms): Support complex data entry scenarios with HTML-based validation and dirty checking. +> [**フォーム**](guide/forms): HTML-ベースのバリデーションとダーティチェックを備えた複雑なデータ入力のシナリオをサポートします。 -> [**HTTP**](guide/http): Communicate with a server to get data, save data, and invoke server-side actions with an HTTP client. +> [**HTTP**](guide/http): HTTPクライアントを使って、サーバーと通信してデータを取得したり、保存したりサーバーサイドのアクションを呼び出します。 -> [**Lifecycle hooks**](guide/lifecycle-hooks): Tap into key moments in the lifetime of a component, from its creation to its destruction, -by implementing the lifecycle hook interfaces. +> [**ライフサイクルフック**](guide/lifecycle-hooks): ライフサイクルフックのインターフェイスを実装することにより、作成から破棄までのコンポーネントのライフタイムの重要な瞬間に触れることができます。 + +> [**パイプ**](guide/pipes): テンプレート内でパイプを使用することで、表示するために値を変換することができ、ユーザー体験を向上することができます。この通貨のパイプの式を見てみましょう。 -> [**Pipes**](guide/pipes): Use pipes in your templates to improve the user experience by transforming values for display. Consider this `currency` pipe expression: > > > `price | currency:'USD':true` > -> It displays a price of 42.33 as `$42.33`. +> これは42.23という金額を`$42.23`と表示します。 + +> [**ルーター**](guide/router): ブラウザから離れることなく、クライアントアプリケーション内でページからページへとナビゲートします。 -> [**Router**](guide/router): Navigate from page to page within the client - application and never leave the browser. +> [**テスティング**](guide/testing): _Angular Testing Platform_を使いAngularフレームワークとやりとりして、アプリケーション部分のユニットテストを実行します。 -> [**Testing**](guide/testing): Run unit tests on your application parts as they interact with the Angular framework -using the _Angular Testing Platform_.