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
Successful CORS configuration with AngularJS 1.2 and WordPress | cat @abulte > weblog
24 décembre 2013 Successful CORS configuration with AngularJS 1.2 and WordPress Some thoughts on a successful CORS (Cross Origin Request Sharing) setup while interrogating a remote REST API on Wordpress with AngularJS 1.2. Context I'm developing an hybrid mobile app with AppGyver Steroids - based on PhoneGap - and a WordPress backend. The architecture is the usual Web stuff: make XHR from the mobi
ユニットテスト | AngularJS 1.2 日本語リファレンス | js STUDIO
JavaScriptは強力な表現をすることの出来る動的型付け言語ではありますが、 コンパイラからほとんど手助けしてもらえないという事にもなります。 このため、Angularの開発陣はJavaScriptで書かれたコードには強固なテストセットが必要であると強く感じています。 Angularアプリケーションのテストが簡単に行えるように、Angularには多くの機能が組み込まれています。 そのため、テストをしないことを言い訳にすることは出来ません。 関係を混合"しない"ことが全て 関係を混合"しない"ことが全て ユニットテストと名付けられたそれは、コードの個別の単位でテストを行います。 ユニットテストは、"このロジックは正しかったのか?"、または"このソート関数は正しくリストを並び替えているか?"、 といった疑問に答えようとするものです。 このような疑問に答えるために、テスト下でコード単位で分離
ngRepeat | AngularJS 1.2 日本語リファレンス | js STUDIO
概要 使用方法 デモ 概要 ngRepeatディレクティブは、コレクションから各項目のテンプレートをインスタンス化します。 各テンプレートのインスタンスは、現在のコレクション項目が設定されたループの変数と、 項目のインデックスまたはキーが設定された$indexが与えられた、自身のスコープを取得します。 各テンプレートのインスタンスのローカルスコープで、下記の特別な変数が使用可能になります。 変数 説明
$controller | AngularJS 1.2 日本語リファレンス | js STUDIO
概要 依存関係 使用方法 概要 $controllerサービスは、コントローラーのインスタンス化を請け負います。 $injectorへの単純な呼び出しですが、BCバージョンでこのサービスを上書き出来るようにサービスに抽出されます。(翻訳に自信無し) 依存関係 $injector 使用方法 $controller(constructor, locals); 型：Function、string 関数を指定されて呼び出されると、コントローラーのコンストラクタ関数とみなされます。 関数でなければ文字列であるとみなされ、 下記のステップを通してコントローラーのコンストラクタを取得するのに使用されます。 $controllerProviderを通して、与えられた名前(文字列)で登録されたコントローラーであるかを確認します。 現在のスコープに対して文字列を評価すると、コンストラクタを返すかどうかを確認し
コントローラーについて | AngularJS 1.2 日本語リファレンス | js STUDIO
コントローラーの理解 $scopeオブジェクトの初期状態のセットアップ スコープオブジェクトへの振る舞いの追加 正しいコントローラーの使用方法 Angularのスコープオブジェクトとコントローラーの関連性について コントローラーの理解 Angularでは、コントローラーはAngularのスコープを引数として使用するJavaScriptのコンストラクタ関数です。 ng-controllerディレクティブを介して、コントローラーがDOM要素に割り当てられると、 Angularは指定されたコントローラーのコンストラクタ関数を使用して、新しいコントローラーオブジェクトをインスタンス化します。 新しい子スコープは、$scopeとしてコントローラーのコンストラクタ関数へ注入されることで、引数として利用可能になります。 コントローラーは下記のようなことをするのに使用されます。 $scopeオブジェクトの
AngularJSの起動 | AngularJS 1.2 日本語リファレンス | js STUDIO
概要 自動の初期化 手動の初期化 概要 このページでは、Angularの初期化プロセスと、必要な場合に手動で初期化するための方法について説明します。 Angularの<script>タグ この例では、我々が自動初期化と呼ぶAngularを統合するための推奨するパス指定を示しています。 <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"> </body> </html> scriptタグをページのページの下部に配置しています。 HTML読み込みはangular.jsスクリプトの読み込みにブロックされるので、 scriptタグをページの最後に配置することで、アプリケーションの読み込み時間の向上に繋がります。 最新のコードは、http://code.an
1.0から1.2へのアップグレード | AngularJS 1.2 日本語リファレンス | js STUDIO
AngularJSのバージョン1.2では、幾つかの破壊的な変更が導入されました。 そのため、既存のアプリケーションのソースコードを変更することが必須かもしれません。 我々は破壊的な変更を避けようとしましたが、幾つかのケースでそれは不可能でした。 AngularJS1.2でのこれらの変更では、デフォルトでも安全なアプリケーションであるために受けた徹底したレビューも含まれます。 幾つかの新しい機能特にアニメーションでは、多少の変更無くして実現するのは不可能でした。 最後に目立つバグは既存のAPIを変更することで最善な形でフィックスされました。 注意: AngularJSバージョン1.1.xは、破壊的な変更とマイナーリリースの間の"実験的"なバージョンとみなされています。 バージョン1.2は1.1のブランチの幾つかのバージョンの結果で、ステーブルなAPIを持ちます。 もし、1.1のアプリケーショ
select | AngularJS 1.2 日本語リファレンス | js STUDIO
下記の形式からいずれかを適用します。 適用例: <!-- "ラベル for 値 in 配列" --> ng-options="c.name for c in colors" 配列 "ラベル for 値 in 配列" "選択値 as ラベル for 値 in 配列" "ラベル group by グループ for 値 in 配列" "選択値 as ラベル group by グループ for 値 in 配列 track by 追跡式" オブジェクト "ラベル for (キー , 値) in オブジェクト" "選択値 as ラベル for (キー , 値) in オブジェクト" "ラベル group by グループ for (キー, 値) in オブジェクト" "選択値 as ラベル group by グループ for (キー, 値) in オブジェクト" 各用語の説明: 配列 / オブジェクト:
スコープ | AngularJS 1.2 日本語リファレンス | js STUDIO
スコープとは? データモデルとしてのスコープ スコープの階層 DOMからスコープを取得 スコープのイベント伝搬 スコープのライフサイクル スコープとは? スコープは、アプリケーションのモデルを参照するオブジェクトです。 これは、式の実行コンテキストです。 スコープは、アプリケーションのDOM構造を真似た階層構造で配置されます。 スコープは、式を監視してイベント伝搬を行う事が可能です。 スコープの特徴 スコープは、モデルの変更を見張るAPI($watch)を提供します。 スコープは、"Angular領域"(コントローラー、サービス、Angularイベントハンドラ)の外部から、 ビューへシステムを通してモデル変更を伝搬するためのAPI($apply)を提供します。 スコープは、共有モデルのプロパティへのアクセスを提供しながら、アプリケーションの分離コンポーネントを入れ子にすることができます。
AngularJSのサービスについて | AngularJS 1.2 日本語リファレンス | js STUDIO
Angularサービスとは何ですか? サービスの使用について サービスの定義 関連トピック 関連API Angularサービスとは何ですか? Angularサービスはシングルトンオブジェクト、またはWebアプリケーション共通の特定のタスクを実行する関数です。 Angularは、サーバにリクエストを送るブラウザのXMLHttpRequestオブジェクトにアクセスする$httpサービスのような、 いくつかの組み込みサービスを持ちます。 他のコアなAngular変数と識別子と同様に、組み込みのサービスは常に$から始まります。(前述した$httpのように) また、独自のカスタムサービスを作ることも可能です。 サービスの使用について Anglarのサービスを使用するには、開発者がサービスに依存するコンポーネント(コントローラー、サービス、フィルター、ディレクティブ)との依存関係を、 識別(決定)し、
angular.element | AngularJS 1.2 日本語リファレンス | js STUDIO
AngularJS 1.2 API ガイド TIPS ngモジュール ディレクティブ フィルター サービス 型 グローバルAPI angular.bind angular.bootstrap angular.copy angular.element angular.equals angular.extend angular.forEach angular.fromJson angular.identity angular.injector angular.isArray angular.isDate angular.isDefined angular.isElement angular.isFunction angular.isNumber angular.isObject angular.isString angular.isUndefined angular.lowercase ang
$http | AngularJS 1.2 日本語リファレンス | js STUDIO
AngularJS 1.2 API ガイド TIPS ngモジュール ディレクティブ フィルター サービス $anchorScroll $animate $animateProvider $cacheFactory $compile $compileProvider $controller $controllerProvider $document $exceptionHandler $filter $filterProvider $http $httpBackend $interpolate $interpolateProvider $interval $locale $location $locationProvider $log $logProvider $parse $parseProvider $q $rootElement $rootScope $rootScopeProvid
Internet Explorer最適化 | AngularJS 1.2 日本語リファレンス | js STUDIO
このドキュメントでは、カスタムHTML属性とタグを扱う際の、Internet Explorer(IE)固有の事について説明をします。 AngularアプリケーションをIE8、またはその前のバージョンで動作保証する予定がある場合に読んで下さい。 ショートバージョン ロングバージョン ショートバージョン IEをAngularアプリケーション上で動作させるために、次のことを確認してください。 必要に応じて、JSON.stringifyのPolyfill(古いブラウザにモダンブラウザの機能を提供すること)を行って下さい。 JSON2またはJSON3を、 このPolyfillに使用することが出来ます。 <!doctype html> <html xmlns:ng="http://angularjs.org"> <head> <!--[if lte IE 8]> <script src="/path/
ng.$rootScope.Scope | AngularJS 1.2 日本語リファレンス | js STUDIO
AngularJS 1.2 API ガイド TIPS ngモジュール ディレクティブ フィルター サービス 型 angular.Module ng.$compile.directive.Attributes ng.$rootScope.Scope form.FormController ngModel.NgModelController グローバルAPI ngMockモジュール サービス グローバルAPI AUTOモジュール サービス ngAnimateモジュール サービス ngCookiesモジュール サービス ngMockE2Eモジュール サービス ngResourceモジュール サービス ngRouteモジュール サービス ディレクティブ ngSanitizeモジュール フィルター サービス ngTouchモジュール ディレクティブ サービス 概要 使用方法 $apply(exp)
プロバイダーについて | AngularJS 1.2 日本語リファレンス | js STUDIO
概要 モジュール上の単語 Valueレシピ ファクトリー(Factory)レシピ サービス(Service)レシピ プロバイダ(Provider)レシピ 定数(Constant)レシピ 特別な用途のオブジェクト 結論 概要 Webアプリケーションは、何かを行うためのオブジェクトの組み合わせで構成されています。 これらのオブジェクトは、アプリケーションが動作するためにインスタンス化し、互いに連携し合うことが必要になります。 Angularアプリケーションのオブジェクトの多くはインスタンス化され、 インジェクターサービスによって、 自動的に互いに連携しあいます。 インジェクターに、サービスと特殊オブジェクトの、2つのタイプのオブジェクトを作成します。 サービスは開発者がサービスを書くことによって、APIが定義されたオブジェクトです。 特殊オブジェクトは、特定のAngularフレームワークAPI
Angular 1, 2の主力開発者まとめ - Qiita
@armorik83です。最近はAngular芸人とまで呼ばれ始めています1。最近の拙記事 (1, 2)を書くにあたって、AngularJS 1.x系、およびAngular 2の開発者について異様に詳しくなってしまったため、まとめて共有しておきます。誰得だろう。 「主力」は主観で概ね2万行以上の関与。敬称略。 Angular全般 印象としてはMiško Hevery氏とIgor Minar氏の二人は特筆すべきと感じました。 Miško Hevery Google AngularJS立ち上げ時主力 AngularDart立ち上げ Angular 2立ち上げ、主力 AtScriptの生みの親 Igor Minar Google ng-japan登壇 AngularJS全期間の主力 最近Angular 2に参加 AngularJS 1系 この半年ほどの1系最新版の開発者は非Googleも増えてい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
