自己流JavaScriptを書いていた人がAngularJSのユニットテストで躓いた点 - 2015-07-10 - ククログ
結城です。 最近、AngularJSを使ったWebアプリ開発のプロジェクトに参加する事になり、とりあえず一通りの事は把握しておかなければと思って公式のチュートリアル（英語）を実践してみたのですが、JavaScriptの経験が浅い人だとハマらなさそうだけれども、中途半端に経験があったせいでドハマり、という場面に遭遇してしまいました。 恥ずかしい話ですが、せっかくなので同じように躓いている人（もしいれば）のために、分かった事や理解のポイントを書き記しておこうと思います。 この記事の対象読者は、以下のような状況にある人です。 フレームワークを使わないJavaScript（例えば、jQueryを使ったJavaScript程度）は書いた事がある。 自動テスト（特に、ユニットテスト）は書いた事がある。 AngularJSを始めたばかりである。 依存性注入という概念は理解できるが、実際にどう使うかはあま
AngularJSのjqLiteの使い方と3つの注意点
以下のように要素をangular.element()に入れてjqLiteのメソッドを使用する。 var foo = document.getElementById('foo'); var fooElem = angular.element(foo); fooElem.addClass('bar'); ただし、通常のjQueryとは使い方が異なるため以下の3つの点に注意が必要だ。 使用できるメソッドが少ない jqLiteで使用できるメソッドはバージョン1.4の時点では以下の35種類しかない。 addClass() after() append() attr() bind() children() clone() contents() css() data() detach() empty() eq() find() hasClass() html() next() on() off() on
AngularJS Directive なんてこわくない（その１） - AngularJS Ninja Blog
angular.module('Ninja', []) .directive('ninjaCustomer', function() { return { templateUrl: 'partials/ninja-customer.html' }; }); こんだけなので、まあどってことない。これだけなら ng-include のほうがラクでいいやんってことになるかな。でもまあ、とりあえずこんだけしか書かなくても directive として動作するのかってことを見ておく。 要素として使う Directive としたければ デフォルトでは属性（restrict: 'A'）として使う directive として作られる。なので、要素として HTML で指定する directive にしたければ、restrict オプションが必要になる。
AngularJSのDirectiveを理解する. - Qiita
はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
AngularJSコードサンプル | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで
<strong>１）Wayデータバインディング</strong> <div>１）二重波括弧：私は{{country}}在住です。</div> <div>２）ng-bind：私は<span ng-bind="country"></span>在住です。</div> <div>３）二重波括弧：私は{{country}}在住の{{gender}}です。</div> <div>４）ng-bind-template：私は{{country}}在住の{{gender}}です。</div> <div ng-non-bindable>二重波括弧{{....}}を表示するには、ng-non-bindableを使用。</div> <strong>２）２Wayデータバインディング</strong> <div>私の名前は{{name}}です。</div> 名前:<input ng-model="name" />
Sort, Filter, Edit！多機能なtableを実装できる「Smart Table」 - Tecuration .com
「Smart Table」はソート、フィルタリング、フォーマッティング、Edit、セレクトなど多機能なテーブルを実装することの出来るJSライブラリです。 Smart Table 「Smart Table」ではtableタグを一切使わず、JavaScriptのMVCフレームワークであるAngularJSによって作られたライブラリを用いることでtableを実装します。難しそうに思うかもしれませんが、まったくそんなことはありません。リンク先では実装例も丁寧に載せてくれています。今日はまずどんなtableが実装できるのかを紹介し、その後実装例を載せていきます。 「Smart Table」で実装することの出来るtableです。まずはベーシックなtable。 フォーマットかつ、ソートが出来るtable。Last Nameには小文字が入ってきても自動的に大文字変換されます。また、各カラムでデータの昇順、
AngularJSはもう古い？未来志向フレームワークAurelia.JSを試してみた！ - paiza times
こんにちは、吉岡(@yoshiokatsuneo)です。 最近のJavaScriptフレームワークといえばAngular.JSやReact.JSがホットですが、今年来ると思われるフレームワークAurelia.JSが2015年1月末リリースされました。 Home | Aurelia Aurelia.JSはGoogleでAngularJSの開発に関わっていたRob Eisenbergさんが開発した次世代のJavaScriptフレームワークです。 特徴として、最新のJavaScript関連技術であるECMAScript6、WebComponents、Object.observeなどの機能を取り込むことで、シンプルで使い勝手のよいフレームワークになっていることが挙げられます。 オンラインコーディング環境paiza.IOでも利用しているAngularJSとの比較を中心にして紹介します。 ■Aurel
AngularjsでDirectiveを作るときに考えていること - ハードコイルド・ワンダーランド
最近、仕事や趣味でAngularjsのDirectiveを作る機会が何回かありました。Directiveは非常に強力な機能ですが、使い方を誤ると碌なことにならないので現在どのような方針でDirectiveを作っているのかを書きます。 いまや最も優れたJavaScriptフレームワーク「AngularJSリファレンス」出版記念会 イベントレポートでも触れられているように、ベストプラクティスが見つかっていない感じなので色々な人の意見を聞きたいです。 基本的な方針 可能な限りDirectiveは作らない DirectiveはAngularjsの中でも仕様が複雑で理解しづらく、ファイルが分散するので作るだけの明確な理由がないものについてはDirectiveにするべきではない。Angularjsはビルトインディレクティブが充実しており、大半の問題はこれを利用すれば解決する。無駄な重荷を負う必要はない
AngularJS のデータバインドを支える $apply - AngularJS Ninja Blog
データバインドが効かない？！ AngualrJS を使っていて楽しいのは超ラクチンなデータバインド。なのに、そのデータバインドで以下のような困ったことに遭遇しているとしたら、それは $apply を学ぶときが来ているということ。 データバインドが効かないぞ？！ データの反映が次のイベントまで遅れてる気がする？？ こういうときは $apply の出番だ。$apply を使う必要があるケースというのは、ざくっと言うと AngularJS が知りえないところでイベントが起こっているとき。$apply で AngularJS に変化が起きていることを伝え、後のことは任せることができる。 $apply が必要ないケース 整合性を維持するための dirty checking（$watch）処理は、$digest ループ（サイクル）でまとめて実行される。この $digest ループが始まるきっかけは、『
HisasAnn.com is for sale | HugeDomains
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
AngularJS の $watch, $digest, $apply について書く - きちぽよ〜
「僕らはみんな河合荘」 のアニメ化決定に小躍りしている seikichi です． 律ちゃんかわすぎ……． 前置きはさておき，AngularJS の話をします． AngularJS はブラウザ上で動作するWebアプリケーションを作成するための JavaScript フレームワークです．Backbone.js，Ember.js，Knockout.js などに代表される，最近流行り(?)のMV*フレームワークの1つと言えば良いのでしょうか． AngularJSの公式サイト に掲載されているサンプルを見てみます． テキストボックスの内容を変更すると，<h1> 要素の中身にリアルタイムに反映されます． すごい．JavaScript をまだ1行も書いてないのに，何か作った気分になってしまいました (おいおい)． AngularJS は ビューでの変更をモデルに，モデルでの変更をビューに自動的に反映する
AngularJS のデータバインドを支える $watch - AngularJS Ninja Blog
AngularJS の強力なデータバインドを支える仕組みのうち、まず $watch について取り上げる。 $watch を使えば、監視（Observe）したいオブジェクトやプロパティが変化したときに実行する処理（リスナー）を容易に記述できる。 $watch を利用する場所は scope のある directive や controller で、ng-model や ng-bind のようなデータバインドする directive を独自に実装する場合や、モデルの変更に応じて処理をバインドする場合などに使用できる。 $digest サイクル $watch による変更検知処理は、ポーリング的（一定間隔で頻繁）に実施されるのではなく、以下のイベントが生じたときに $digest サイクル（または $digest ループ）と呼ばれる処理が実行され、その中で実行される。 イベント 概要
AngularJS ではモデルをどう宣言すればいいのか - AngularJS Ninja Blog
AngularJS の ng-model、大事なのは dot があること AngularJS では、モデルをどこに宣言すればいいんだってのがわかりにくい。 controller に $scope があって、簡単なサンプルコードでは大抵そこに直接$scope.nameみたいに記述されているので、同じように書いてしまう。 うまくいかないコード例は以下。 <!-- うまくいかないコード --> <div ng-controller="ParentController"> <input type="text" name="parent" ng-model="name"> <div ng-controller="ChildController"> <input type="text" name="child" ng-model="name"> </div> </div>
Angular.js入門 (1)導入とデータバインディング - Qiita
<!doctype html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>{{hello}}</h1> <input type="text" ng-model="hello"/> </body> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.6/angular.js"></script> </html> scriptタグでAngular.jsを指定しています。今回は1.3.0のベータ版を入れていますが, 好きなバージョンを公式サイトのDownloadからCDNのリンクから入手可能です。 https://angula
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJSのDOMイベント処理と注意すべきディレクティブを知り、HTMLテンプレートを使いこなそう
ビジネスロジック記述の必須知識、AngularJSの「サービス機能」を理解しよう
Googleマテリアルデザインを取り入れたAngularJSベースのRWD対応フロントエンドフレームワーク・「lumX」
AngularJSの強力なデータバインディングの肝となる！ スコープを理解して、独特な開発スタイルを自分のものにしよう
FLABO
IBM Developer
