読者です 読者をやめる 読者になる 読者になる

Re:Angular

React 人気はまだ健在だけど、入力項目の多い業務アプリを実装するには辛かった。 この手の Web アプリには、双方向データバインディングがある Angular2 の方が向いてそうだ。 Angular2 が正式リリースになって、名前が Angular に変わったことだし、 本格…

Rails Assets を使って Rails プロジェクトに AngularJS をインストール

Rails で AngularJS を使おうと思っていたけど、 ファイルをダウンロードして vendor/assets に直接配置するのは管理が面倒 AngularJS をラップした gem は AngularJS 本体がバージョンアップしたとき対応するまでタイムラグがある そもそも angular-gem や …

AngularJS で Underscore.js を使ってみた

AngularJS にユーティリティ関数あるにはあるけど、配列やオブジェクトを操作する関数が足りないので、 Underscore.js を使うことにした。 AngularJS らしく依存性注入したいから、Underscope.js を AngularJS モジュール化している。 <html ng-app="UnderscoreSample"> <head> <meta charset="utf-8"> <title>UnderscoreSample</title> </head> <body ng-controller="MainCtrl"></body></html>…

AngularJS のテンプレートを入れ子にしたかったから angular-ui-router を使ってみた

AngularJS でテンプレートを入れ子にしたかったけど、ng-view は入れ子にできない。 つまり AngularJS の機能だけでは困難。 おまけに ng-view は複数置いて、別々のテンプレートを表示することもできないときた。 そんな ng-view や ngRoute に置き換わるの…

angular-mocks でモックが返すデータを動的に決める

angular-mocks をスタブとして使ってフロントエンドを開発していて、 ずっと angular.module("sampleApp").run(["$httpBackend", function($httpBackend) { $httpBackend.whenGET("/users").respond([ { id: 1, name: "香川" }, { id: 2, name: "本田" }, { …

ng-templat​e でテンプレートを HTML に埋め込む

script タグの type に text/ng-template を指定したら、 AnguarJS が中のテキストを $templateCache にキャッシュしてくれる。 そして、ルーターでテンプレートの URL を指定するとき、 その script タグの id にすると $templateCache にキャッシュされて…

AngularJS で Rails の CSRF トークン検証に引っか​かったときの対処法

Rails で AngularJS を使おうと、angular-rails や angularjs-rails といった gem を調べてみたけど、どれもイマイチだったんで vendor/assets/javascripts 下に AngularJS ファイル一式を放り込んで開発している。 AngularJS のデータバインディングを活用…

AngularJS でモデルとコントローラーをモジュール化する

先日 AngularJS のルーティング機能を試したけど、サンプルではモデルをコントローラーごとに作成していた。でも、プロダクトコードだとコントローラーやモデルは再利用しやすいように、AngularJS のモジュールにするはず。特にモデルは。そういうわけで、モ…

AngularJS のルーティング機能を試してみた

AngularJS を使って Single Page Application を作成するなら、おそらく避けて通れないのがルーティング機能。例えば一覧と編集でビューを切り替えたい場合、ルーティング機能を使ってコントローラーとテンプレートを切り替えて描画する、はず。先日作成した…

AngularJS で Web API を呼び出す

AngularJS で Web API を呼び出すのに使う $resource が、ドキュメントを読んだだけじゃイマイチ分からなかったんで、簡単なサンプルを書いてみた。まず、呼び出す対象の Web API は Sinatra でさくっと作成。 # coding: utf-8 require "sinatra" require "j…

AngularJS でコントローラーをネストする

AngularJS ではコントローラーを入れ子にして、ng-repeat で処理するコレクションの要素1つ1つに子コントローラーをバインドすることができる。例えば、よく見かける ToDo アプリのサンプルだとこんな感じ。 <html ng-app> <head> <meta charset="utf-8"> <title>Angular Sample</title> <style type="text/css"> .done-true { text-decora</style></meta></head></html>…

AngularJS で ToDo アプリのサンプルを書いてみた

Google 製の JavaScript MVC フレームワーク『AngularJS』で、簡単な ToDo アプリのサンプルを書いてみた。 <html ng-app> <head> <meta charset="utf-8"> <title>AngularTodo</title> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> <script> // モデル function Todo(text, done) { this.id = Todo.getNextId(); …</meta></head></html>