AngularJSの$watchで複数の変数の変化を同時にチェックする - かけるヒトからできるヒト
AngularJSを使っていると、非常にお世話になる$watch。 変数やオブジェクトが変化した事を読み取る事ができます。 データバインディングによってリアルタイムにページの変化を扱えるAngularJSではほぼ必須の機能と言っても過言ではないと思います。 僕が開発しているシステムでもあちこちで利用しています。 変数やオブジェクトの変化を簡単に検知できるのですが、今回は1つの変数と1つのオブジェクト、どちらかが変化した時にイベントを取得したかったので、その方法を備忘録に載せたいと思います。 やり方 通常では変数名を文字列で検知対象を指定します。 $scope.hoge = 'fuga'; $scope.$watch('hoge', function() { // 変数hogeがなんか変化した時の処理 }); $watchの第一引数は関数で書くことができます。 関数使って同じこと書くとこんな
AngularJS $locationサービス（１）hashbangモード、pathメソッド: Angular、Bootstrapなどの学習備忘録
AngularJSの$locationサービスについて勉強中です。今回は、hashbangモードのpathメソッドをサンプルコードを作成しながら仕様を確認しました。 オンラインマニュアル https://docs.angularjs.org/guide/$location https://docs.angularjs.org/api/ng/service/$location http://www.angularjshub.com/examples/routing/locationservice/ ●サンプルコード （HTML） <!doctype html> <html ng-app="MyApp"> <head> <meta charset="utf-8"> <title>AngularJS</title> <script src="js/angular.min.js"></script
アプリケーション内のページ遷移には$location.pathを使うべし - Kazzzの日記
AngularJSでページ遷移を実行する際に、ルーティングを端折ったり、従来のリダイレクトのようについつい低レベルのAPIで $window.location.href="#/foo/hoge?reset"; 等と書いたりすると※、一見上手く動くように見えたりするのだが(実際Chrome等では問題なく動作する)、AngularJSのダイジェストサイクルはWebブラウザ(のレンダリングエンジン)に依存するのかIEでは再帰エラーを起こしたりする。 Chromeでは問題ないのにIEではダイジェストループの再帰でエラーになる様子(IE11のデバッグコンソール) SCRIPT5022: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! AngularJSはメジャーなWebブラウザを一通りサポートしているが、ブラウザのURLを
$locationの使用について | AngularJS 1.2 日本語リファレンス | js STUDIO
$locationは何をするものですか? APIの概要 Hashbang(#)とHTML5モード 注意事項 $locationサービスのテスト 前バージョンからのマイグレーション 関連API $locationは何をするものですか? $locationサービスは、ブラウザアドレスバー(window.locationが基)のURLを解析し、 アプリケーションで利用可能なものにします。 アドレスバーのURLの変更は、$locationサービスに反映され、 また$locationの変更は、ブラウザのアドレスバーに反映されます。 $locationサービスは、 現在のURLは、ブラウザバーに晒されているため、 そのURLを確認することが出来ます。 そのURLを変更することが出来ます。 ユーザーが下記の事を行う際に、$locationサービス自身とブラウザのURLの同期が取れるように保持します。 ブ
【AngularJS】ブラウザバックを検出する方法。
いつもお世話になっておりますstack様に素晴らしいコードがあったのでペタリ。 myApp.run(function($rootScope, $route, $location){ //Bind the `$locationChangeSuccess` event on the rootScope, so that we dont need to //bind in induvidual controllers. $rootScope.$on('$locationChangeSuccess', function() { $rootScope.actualLocation = $location.path(); }); $rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLoca
AngularJS1.4とbindToController - Qiita
こんにちは。imaiです。待望のAngularJS1.4がリリースされましたね。Directive関係では、bindToControllerの機能が向上しました。 このbindToControllerとは一体何なのか。使って嬉しいことは何か。どう機能が向上したのか。について書いていきます。また、最後に自作Directiveを作っていく際に筆者がよくつまずく点を記しておきます。 この記事の対象者:AngularJSに触れたことがある、自作のDirectiveを作ったことがある bindToControllerとは AngularJS公式サイトのReferenceからbindToConrollerの説明を意訳すると、 再利用可能なコンポーネントを作るために、分離?隔離?スコープやcontrollerAsを用いる際に、bindToController:trueとすることでコンポーネントのプロパテ
AngularJSのフィルターを使ってみる
AngularJSのフィルター周りを試してみます。 uppercaseとlowercase 大文字や小文字に統一します。 HTML <div ng-controller="sampleCtrl"> <p>■そのまま表示</p> <ul> <li ng-repeat="character in loveplus"> {{character}} </li> </ul> <p>■uppercase</p> <ul> <li ng-repeat="character in loveplus"> {{character | uppercase}} </li> </ul> <p>■lowercase</p> <ul> <li ng-repeat="character in loveplus"> {{character | lowercase}} </li> </ul> </div> JavaScrip
angular.jsをやってみる (22) - $exceptionHandler -
公式リファレンス: http://docs.angularjs.org/api/ng/service/$exceptionHandler 例外とかがスローされた際には$exceptionHandlerっていうサービスに処理が委譲されるようになっている模様。でデフォルトでは$log.errorでエラー内容が処理されるようになっているとの事 angular.module("app", []) // 定義しなければ$log.errorでエラー内容が処理される .factory("$exceptionHandler", function($window) { return function(exception, cause) { $window.alert(exception.message); }; }) .service("sample", function() { this.say = fu
配列からm～n件目の要素を取り出すには？（limitTo）
limitToフィルターを使って、配列の先頭から指定された件数だけ要素を取り出す方法を説明。応用例としてページング処理を実装する。
angularjsのunitテストの書き方【$resource編】 - is Neet
さて前回の記事、「Rails4.0でangularjsを使ってRESTfulなajaxを実装する」に引き継ぎ今回はangularjsのテストについて書こうと思う。 題材には引き続き前回の内容を使うので、そちらを読んでからのほうが読みやすいかと。 ちなみにangularjsにしてもテストにしても自分自身かなり手探りで進めているため、不自然な点や改善点があればどんどん伺いたい。 実行環境 angularjsはtestableだと謳われている割にビルドインされたテスト実行環境がないので自力で整える必要がある。（しょうが無い気もする） 今回はテスト実行環境にkarma、テストフレームワークはjasmineを使用する。 前提としてnodeはインストールされているものとする。 $ npm install -g karma $ npm install -g karma-ng-scenario 以上でka
Jasmine × Karma × Gulp でつくるユニットテスト環境 入門 - AngularJS + TypeScript #3 | リクルート テックブログ
テストランナーとは、様々なブラウザでテストを実行し、その結果をまとめてレポートするためのツールを指します。Karma は Node.js 上で動作するテストランナーです。元々はTestacular という名称で Google が AngularJS の開発で使うために作ったものですが、2012 年にオープンソース化されたタイミングで業 ( カルマ ) を背負った名称に変わりました。 Karma - Spectacular Test Runner for Javascript 本記事では、Jasmine をベースにしてテストコード ( 実処理 ) を記述し、それらを Karma から実行してレポート ( テスト結果 ) を確認するという流れで進めていきたいと思います。 環境構築 前提条件 Mac OS X Yosemite node.js インストール済み (v5.4.0 ~) npm イン
AngularJS イベント通知 Scope#$emit, Scope#$broadcast, Scope#$on - howdylikes
$scopeのイベント通知関連の関数は以下の3つがある Scope#$emit 派生元に向けてイベントを送信（自身を含む） Scope#$broadcast 派生先に向けてイベントを送信（自身を含む） Scope#$on イベントを受信 リファレンス https://code.angularjs.org/1.4.7/docs/api/ng/type/$rootScope.Scope#$on $emitと$on $emit $emitは自身と派生元に向けてイベントを投げます イベントを区別するための名前と渡したいデータを指定 $emit(name, args); $on $onはイベントを受け取ります $onはイベント名とイベントを受け取るコールバックを指定 $on(name, listener); コールバックはeventとデータを受け取る事が可能 function(event, ...a
【AngularJS】 $on, $emit, $broadcast | コーテッグのバケツ
イベント監視を行う 指定のイベントが発生した際に実行されるリスナーを登録できる scope.$on('eventname', function(event, args) { ... }); 自分を含む下方向（子方向）へのイベント通知 イベントと一緒にデータも渡..(ry scope.$broadcast('eventname', args); そもそも親子ってなんなのよ？ コントローラーが入れ子になっている場合、AngularJSは 外側のコントローラーを親、内側を子としてみる <div ng-controller="Ctrl1"> <a href="#" ng-click="click()">click1</a> </div> <div ng-controller="Ctrl2"> <a href="#" ng-click="click()">click2</a> </div> <div
【AngularJS x TypeScript デザインパターン】 Controller と Routing 篇 - AngularJS + TypeScript ＃4 | リクルート テックブログ
【AngularJS x TypeScript デザインパターン】 Controller と Routing 篇 - AngularJS + TypeScript ＃4 wakamsha この記事は RECRUIT MARKETING PARTNERS Advent Calendar 2015 の投稿記事です。 前置き 2015年11月30日にリリースした 英語サプリ Web 版は完全 SPA ( Single Page Application ) であり、AngularJS と TypeScript を主要テクノロジーにおいた作りとなっています。このプロダクトでは実装開始からリリースの前日までの間に幾度となくアーキテクチャの見直しを図ってきました。当エントリでは、そんな試行錯誤の中で生まれた ( 開発に取り入れられた ) 数種類のデザインパターンについてご紹介します。 そんなわけで、今回
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの集約例外ハンドラチートシート - Qiita
AngularJSアプリでソート／ページングやフィルター機能付きの高機能グリッド表を実装する（UI Grid）
flabo.io
AngularJSプロジェクトにおけるngdoc・jsdocルール案 · Issue #65 · HAKASHUN/manabi
物理サーバを選定する際のポイント – Eureka Engineering – Medium
ブログ記事一覧