UPDATE: Radian is now open source. Read about it on the BayesHive website here. Courtesy of Hideharu Sakai, this article is also available in Japanese. One of the things we needed to be able to do for the BayesHive software I’m working on with Tom Nielsen of OpenBrain is easily produce plots within our front-end web app. There are lots of JavaScript libraries for doing this: Tom started off using
前回から間があいてしまいましたが。。。 今回はAngularJS が提供している filter についてまとめてみました。 まとめたものがコチラ デフォルトで用意されているのは以下です。 lowercase uppercase json currency date limit number orderBy これら以外にも自分で実装することもできますが、今回は説明しません。 徐々に紹介していけたらと思っています。 主観ですが、date, limit, orderBy が非常に優秀だと感じました。 lowercase / uppercase {{ plainText | lowercase }} {{ plainText | uppercase }} これ日本語という観点で考えると使い道が。。。使う頻度は少ないと思います。 json {{ jsonFilter | json }} // ※js
前回（AngularJS で Hello World）に引き続き AngularJS + TypeScript による簡単なアプリケーションを書いてみました。 今回は AngularJS を使ったフォームの例です。 AngularJS のみで、比較的簡単にリッチなフォームが作成できることがわかるんじゃないかなぁと思います。 まえおき TypeScript で書いてます。 AngularJS のバージョンは2013年2月現在の最新安定版である 1.0.4 を使用します。 自動受け入れテスト（E2E Test）は面倒なので省略しました。 ソースコードについて なお、今回のソースコード一式も GitHub で公開しています。 また、こちらで実際に動作を確認することもできます。 解説 前回解説した内容についてはなるべく割愛します。 form 要素 <form id="signupForm" nam
意外とAngularJSを使った入力フォームのサンプルが無かったので作ってみました。 まず作ったものがコチラ AngularJSを使えば手軽にシンプルかつリッチな入力フォームを作ることができます。自前のJavaScriptを用意すればさらに凝ったものも作ることができますが、今回は自前のJavaScriptを使わないでもこれだけできます！というサンプルです。 個別のバリデーションチェック サンプルで行われているバリデーションは、全てAngularJSによるもので、JavaScriptによるコードの記述は一切書いていません。その代わりに、以下のような記述でチェックする内容を指定しています。 <form method="post" name="userInfo"> ... <input type="text" name="userName" ng-model="userName" ng-minl
1/26に開催されたAngularJSハッカソンに参加してきました。 ハッカソンは初めてでしたが、スタッフの方やチームに恵まれエキサイティングな一日でした。中でも新鮮だったのは、Dropbox上に作業エリアを作ると共同作業がはかどることです。今後もお世話になりそうです。 今回はチーム編成の都合上サーバーサイドの担当だったので、目当てのAngular.jsにはほとんど触れませんでした。そのため復習がてら本家のTutorial を通していくつか引っかかった点を調査してまとめました。 Controllerで非同期処理を扱う 以下のコードでは、“Change the world!”と表示されることを期待していたのですが、実際は“Hello world!”と表示されます。どうしてでしょうか？ index.html <div ng-controller="MainCtrl"> <p>{{title}}
Web先端味見部 第5回 に行ってきた。今回のテーマはvert.xの予定だったけど、予定を変更して、AngularJSになった。 Web先端技術味見部#5 （仮テーマはAngularJS！） : ATND AngularJS ― Superheroic JavaScript MVC Framework AngularJSの概要については、以下のエントリが参考になる。 グーグル製のJavaScript MVCフレームワーク「AngularJS」、正式版が公開 − Publickey Better Web Templating with AngularJS 1.0 - Google Developers Blog こてさきAjax:クールなMVCを実現するフレームワーク Angular.js の紹介 - livedoor Blog（ブログ） 僕はJavaScriptのMVCフレームワークを全く
引き続きAngularJSのDeveloper Guideを読んで勉強しています。 今回はInjecting Services Into Controllersのサンプルコードで、Serviceが登録されてからControllerの中で利用されるまでAngularJSの中では何が起こっているのか、関係のあるところだけ辿って見てみました。 サンプルコードは以下の通り。 angular. module('MyServiceModuleDI', []). factory('notify', ['$window', function(win) { var msgs = []; return function(msg) { msgs.push(msg); if (msgs.length == 3) { win.alert(msgs.join("\n")); msgs = []; } }; }]);
Backbone.jsは触ったことがあったので、次は違うのに手を出してみようと思ってたらタイミングよくAngular JS 1.0リリースのニュースを見つけたのでちょいちょい触っていました。 主観的かつ大雑把な感想をいうと、Backbone.jsはプレーンなHTMLに対してイベントやコントローラをがしがしくっつけてずっとJavaScriptワールドで作業するのに対し、Angular JSはHTMLに独自属性を付与してDOMをそれぞれ独立したコンポーネントとみなしていろいろする感じです。 サンプルで必ず出てくる<div ng-app="hoge"></div>のng-appについてですが、ngというのがAngularのnamespaceでappが具体的なモジュール（ディレクティブ）です。以下のようにして自由に定義できます。 angular.module('hoge.directives').
【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ このブログでは、HTML5+CSS3+Javascriptなどの情報を定期的に提供していきます。 運営企業：株式会社ニーロク（http://i26.jp/）
【スマホ×HTML5】Web&ハイブリッドアプリ開発者ブログ このブログでは、HTML5+CSS3+Javascriptなどの情報を定期的に提供していきます。 運営企業：株式会社ニーロク（http://i26.jp/）
Coderwallのバッチ取得するのはよくみるけど Angularでやってみた的なのはみないなーと思ったのでやってみた。 といってもjQueryなんかでやるのとそんなに変わらないです。 バッチを表示させるHTMLを書く とりあえずリストにイメージを突っ込んでいく感じにすることにしました。 <div ng-controller="coderwallController"> <ul> <li ng-repeat="badge in badges"> <img ng-src="{{badge.badge}}" alt="{{badge.description}}" title="{{badge.name}}" /> </li> </ul> </div>
メモ書き。何か発見するたびに更新してます。 合っているかどうかは分からない話 下記は古い(いつから？)AngularJSの記述方法です。 ng-controllerはwindowオブジェクト直下の関数を見なくなりました。 var app = angular.module('app', []); app.controller('con', function($scope){});ng-controllerの名前の指定は、angular.module().controllerの第一引数で指定します。 view ng-model属性 コントローラーの$scopeのオブジェクトと一致する。 <div ng-controller="con"> <input type="text" ng-model="a.b" /> <input type="text" ng-model="c" /> </div>
![AngularJS - [´・[ェ]・] <もももっもっ](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa5e853b5520aef7936b33deff9cbb4580e1495a/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fogimage.blog.st-hatena.com%2F17680117127031738462%2F17680117127031755313%2F1555342496)
Currently no descriptions for this product and will be added soon.
AngularJSを使って記事を書いていたら、事情により下記途中の記事が吹っ飛んでしまった・・・。再度書きなおしを行うこととなり、間がかなり空いてしまった。 AngularJSはHTMLをテンプレートとして扱う動的Webアプリケーションを作るためのフレームワークである。特にCRUDアプリケーションを開発することを念頭に作られている。JavaScriptのフレームワークには珍しく、DIを採用している。(型が無いので変数名ドリブンで判断している)後、特に強力なのはビューとデータのバインドがシームレスという事だ。例えばある変数をテキストボックスにバインドしたとする。その変数に値を代入すれば、テキストボックの値も即時に変更される。逆もまた然りでテキストボックスの値をユーザが変更すれば変数の値も変わる。HTMLをテンプレートに使うというのは、他のテンプレートエンジンの様にscriptタグの中にテンプ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
