Works by

Ren's blog

@rennnosuke_rk 技術ブログです

AngularJS

【AngularJS】$injectプロパティを利用して依存性注入を行う

メモ。 AngularJSではコントローラやサービスの定義をDI(依存性注入)によって初期化します。 具体的には、['サービス名1','サービス名2'...,'コントローラ関数']のように、サービス名とコントローラの挙動を定義する関数オブジェクトの配列を作り、AnguraJ…

【AngularJS】ng-repeatの要素に一意な識別子を付加する

メモ。 AngularJSのng-repeatによってHTML内の繰り返し要素を生成できますが、 HTML <div ng-app="myApp"> <div ng-controller="MyAppCtrl"> <div ng-repeat="msg in messages"> <p>{{msg}}</p> </div> </div> </div> JavaScript let mod = angular.module('myApp',[]); mod.controller('MyAppCtrl', ['$scope', function($scope){ $scope.messages =…

【AngularJS】AngularJSで任意のイベント通知を送信・ハンドリングする

AngularJSのイベントハンドリング JavaScriptでは多くのイベントをハンドリングする手段がありますが、AngularJSも独自にイベントハンドリングするための機能を備えています。 例えば、AngularJSでのスクロールイベントのハンドリングは以下のように行います…

【AngularJS】未コンパイル状態のHTMLテンプレートが一瞬表示されるのを防ぐ

テンプレートのちらつき AngularJSのHTMLテンプレートを用いたページを表示したときに、一瞬だけ元のテンプレート表記がちらついてしまう場合があります。 例えば、以下のようなコードでHTML上の{{message}}に動的に文字列を挿入しようとしたとき、下の画像…

【AngularJS】$httpによる通信を任意のタイミングで中断する

$httpのタイムアウト AngularJSではHTTPリクエストを投げるためのサービス$httpが提供されていますが、 引数configのプロパティtimeoutを設定することで、HTTPリクエストをタイムアウトさせることができます。 timeout – {number|Promise} – timeout in mill…

【AngularJS】プルダウンの一部を動的に選択不可能にする

メモ。 AngularJSではselectタグにng-optionsを指定するとIterableオブジェクトの要素からなるプルダウンを作成できますが、その一部をdisable状態にすることができます。 HTML <div ng-app="myApp"> <div ng-controller="NgOptionDisableCtrl"> <select ng-model="num" ng-options='number disable when number === 3 for number in numbers'></select> </div> </div> JS let mod = ang…

【AngularJS】$rootScopeに対してイベントリスナを登録・解除する

メモ。 Angularでは`$rootScope.bind`経由でスクロールやページ遷移等に対するイベントリスナーを登録することができます。 angular.module('myApp', []) .controller('MyController', ['$rootScope', function($rootScope){ $rootScope.bind('scroll', func…

【AngularJS】Serviceを用いた画面遷移時のパラメータ受け渡し

画面遷移時にパラメータを受け渡す AngularJSでは画面遷移が発生する(厳密には画面遷移というよりng-viewによる一部HTMLの差し替え)と、多くの場合Controllerも遷移先のViewに合わせて切り替わります。 このとき、遷移前に利用していたController上のパラ…

【AngularJS】$httpでformによるPOSTリクエストを再現する

AngularJSの$httpメソッドでHTTPリクエストを発行する時、 コンテンツの形式をサーバ側と一致させなければサーバ側に正しくデータを受け取ってもらえない。 例えば、サーバ側がformタグのsubmitによってデータが送られていること想定しているとする。 HTML <html> <head></head></html>…

【AngularJS】入力フォームの値を正規表現でバリデーションチェックする

ng-pattern HTML5ではinputタグに対して様々な値チェック機構を標準で備えている。 特に、inputタグの属性typeを指定すると、一部のtypeに対しては HTML5標準の入力規則が適用される。 <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>input test</title> </head> <body ng-controller="myController"> <form id="formExample"> </form></body></html>

【AngularJS】ng-classで動的にhtmlタグのclassを変更する

ng-class AngularJSではHTMLタグに付加するクラスを動的に変化させるng-classディレクティブが用意されています。 タグに割り当てるクラスを状態や条件で変更できるので、非常に便利です。 使い方 <div ng-class=" <割り当てるクラス名1> : <条件1> , <割り当てるクラス名2> : <条件2> , ... "></div> ng-classで割り当てたいクラスと条件は上記のように複数指…

【AngularJS】AngularJSの組み込みjQuery "jqLite" を使う

jqLiteとは jqLiteはAngularJSに組み込みで実装されている軽量版JQueryです。 JQueryのようにDOM要素やHTML文字列を操作することができます。 使い方 angular.element()を使うと、JQueryの$()のように働きます。 // id指定 angular.element('#element_id'); …

【AngularJS】ルーティングを設定する

AngularJSはSPAを実装するフレームワークであるため、単一のページを読み込んだ後にクライアント側で柔軟に表示を切り替えていく機能を備えています。 AngularJSでは$routeProviderを使うことによって、リクエストURL別にコントローラーやテンプレートを切り…

【AngularJS】Controller間で共有可能な値を定義する

AngularJSでは、Controller間で共有可能な値を定義する方法が二通りあります。 value constant value valueメソッドを使うことで、Controller間で共有できる値を定義することができます。 定義した値はControllerの引数に設定することで使用可能になります。…

【AngularJS】AngularJSで動的にイベントハンドラを定義する

AngularJSのモジュールを使い、動的にイベントハンドラーを追加する方法メモ。 // controller angular.module('myApp',[]) .controller('myController',[ '$window', function($window){ // 画面全体に対するクリックリスナー angular.element($window).bind…

【AngularJS】Viewにhtml文字列を挿入、htmlとしてレンダリングする

AngularJSを使ったフロント開発の中で、技術記事のAPIで取得したHTMLを画面に表示させたくなった ときの処理をメモ。 ng-bind-htmlでViewにhtml文字列をサニタイズされた形で挿入できます。 View <div ng-bind-html="article.body"></div> // APIで記事を取得 articleService.getArticle().then(fun…

【AngularJS】既存のServiceを拡張した派生Serviceを定義する

AngularJSで既存のServiceが持つ機能を拡張させたServiceを定義したかったので、 以下のようにしてServiceを派生させてみました。 Service定義 "use strict"; // 基底Service(factory形式) angular.module('App') .factory('baseService',[ function(){ let …

【AngularJS】AngularJS1.6の$httpでは、success()/error()の代わりにthen()/catch()を使う

少し嵌ったのでメモ。 AngularJS1.6の$httpでは、HTTPレスポンスが返ってきたときに走る処理を記述するsuccess()とerror()が非推奨、もとい使用不可な状態となっていました。 Due to b54a39, $http's deprecated custom callback methods - success() and er…

【AngularJS】Jasmine+KarmaでAngularJS用テスト環境を構築する

AngularJSはフルスタックなフレームワークで有名ですが、テストもサポートします。 AngularJSではテスティングフレームワークとテストランナーと呼ばれるツールを用いて、ユニットテストとE2Eテストを実行します。 テスティングフレームワーク ソフトウェア…

【AngularJS】ServiceにControllerのロジックを退避する

AngularJSではControllerにロジックを記述しますが、ロジックが複雑になるにつれControllerは肥大化してしまいます。 // Controller angular.module('MyApp') .controller('MyController', [ '$scope', '$location', '$http', '$q', function($scope, $locat…

【AngularJS】データモデルの変更を監視する$watch

$watchとは AngularJS(以下Angular)では、ビューとロジック間で一つのモデルを共有することができます。 モデルの変更をビューに動的に反映でき、逆にビューの変更をモデルに反映させることができます。 例えば、HTML上のプルダウンにng-modelでモデル名を…

【AngularJS】Tableのセルをng-repeatで繰り返し表示する

AngularJSのng-repeatを用いることで、セル要素一つ分のhtml記述で Table内の全セルを描画することが可能。 test.js // strictモード "use strict"; // MainController angular.module('MyApp', []) .controller('MainController', ['$scope', function($sco…