Angular DIスキng-kyoto Angular Meetup #5 の発表資料です。
Angular2 DOC GUIDEを翻訳する[DEPENDENCY INJECTION] - Qiita
export class Car { public engine: Engine; public tires: Tires; public description = 'No DI'; constructor() { this.engine = new Engine(); this.tires = new Tires(); } // Method using the engine and tires drive() { return `${this.description} car with ` + `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`; } } Carはコンストラクタの中で必要なものをすべて作り出しています。何が問題なのでしょうか。問題は、Carクラスが脆弱で柔軟性がなく、テストが難しくなって
![Angular2 DOC GUIDEを翻訳する[DEPENDENCY INJECTION] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c04b38fb3d910bf347852406582c23f2586dff12/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTEyNTY2JTJGcHJvZmlsZS1pbWFnZXMlMkYxNDc0NzA0ODAyP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPWQ0YjRiNWM1Y2E0MTkzN2E5M2FhYjZmYWJjZGE4ZmE2%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Da28c9d9378cc1b2e083af52e73ec32bd%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9QW5ndWxhcjIlMjBET0MlMjBHVUlERSVFMyU4MiU5MiVFNyVCRiVCQiVFOCVBOCVCMyVFMyU4MSU5OSVFMyU4MiU4QiU1QkRFUEVOREVOQ1klMjBJTkpFQ1RJT04lNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1lZDA0MGMzNjVjNDFjMDA0YzE0ODVkMzY0ODk3MzJkMw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBZYW1hbW90bzA1MjUmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0yZmU5YzEyNjY5ZjY1NTgxZGY5ODc4MTliZTI5MjA2Mg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Df7265937b7e041f2df7b0e1a1dc0bfc7)
ロジックを画面から分離できる「Angular 2」のサービスと依存性注入
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、従来のAngularJS（AngularJS 1）の次期バージョンです。2016年9月に正式版がリリースされ、本格的に利用できる環境が整いました。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。 前回記事では、Angular 2のWebページを構成する要素である、コンポーネントやモジュールについて説明しました。これらを利用すると、実装を分割して互いの影響範囲を限定することができます。 しかし、ログ出力のようにさまざまな箇所で使われる処理や、ビジネスロジックのような画面から独立した処理は、独立して実装した処理を、後から追加できれば便利です。Angular 2ではこのような機能として、独立した処理を実装する「サービ
AngularJSアンチパターン集 - Qiita
（150522追記）本稿の続編としてAngularJSモダンプラクティスを掲載しました。本稿は2014年9月に執筆し、情報がかなり古くなっています。続編では、AngularJS 1.4やAngular 2に関する情報をまとめ、入門者への新鮮なチュートリアル、熟練者の移行手引として作成しました。どうぞご覧ください。 この記事は記録のため残します。 AngularJS歴1年の筆者による個人的なAngularJSアンチパターン集です。自分のための戒めとメモを兼ねています。個人差があると思いますので、参考程度に。 また、筆者はTypeScriptで書いています。 Components ComponentsのDI数が6以上になる 危険度★★★ angular.module('myApp') .service('FooService', [ '$q', '$resource', '$rootScope
Angular2のDIを知る - Qiita
どうも、@laco0416です。本アドベントカレンダーでは3回目の投稿です。 Angular2のDIを知る 今回の目標は「Angular2のDIを知る」ということで、まずは基本的なところからおさらいしていきます。 Angular2のDIの使い方 まずは一番単純なDIの使い方を解説します。そもそもDIとは…という話になると複雑になるので省きますが、Angular2においては「 Providerから提供されているインスタンスを特定の変数にInject（注入）する仕組み 」のことを指します。 Provider と Inject の2つの関係は重要なので頭に入れておきましょう。 Injectされる側 今回はFooServiceというクラスのインスタンスがDIで注入されるようにします。以下のコードではsay()メソッドを持つFooServiceクラスをexportしています。
AngularJSのDIを使う#AngularJS入門その4 | DevelopersIO
AngularJSでDIを実現する DI(依存性注入)は、簡単にいえば「オブジェクトに必要な情報を外部設定する手法」です。 Javaの経験者であれば馴染みのある言葉ではないでしょうか。 AngularJSでは、コードが依存性を保持するいくつかの方法を持っています。 オブジェクト/関数が、依存性を取得するには次の方法があります。 new演算子で依存性を作成 グローバル変数を参照して依存性を作成 依存性が必要な場所に任意で渡す 3つ目の手法を使用すればコンポーネント同士の結合も疎結合となるため、いちばんよい手法です。 この手法であれば、依存性がそのままコンポーネントに引き渡されます。 簡単な例を見てみましょう。 function MyClass(greeterObj) { this.greeterObj = greeterObj; } MyClass.prototype.say = funct
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
