Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sample</title> </head> <body ng-app="myApp"> <div ng-controller="SampleCtrlA"> <dir-a my-arr="arr"><span ng-repeat="a in arr">{{a}},</span></dir-a> </div> <div ng-controller="SampleCtrlB"> <dir-b my-arr="arr"><span ng-repeat="a in arr">{{a}},</span></dir-b> </div> <div ng-controller="SampleCtrlC"> <dir-c my-arr="arr"><span ng-re
AngularJSのデータバインディング便利ですが、ng-bindで複数行のテキストを表示しようとすると途端に面倒になるんですよね。。 そのままじゃHTML上では改行されないので<br>に変換する必要があって、それはfilterとかで簡単にできるのですが、それをタグとして認識させるには$sce.trustAsHtmlしないといけなくて。。 でもユーザー入力の文字列をHTMLとして画面に表示することを許可してしまうのは危険すぎる。。 br以外のタグはエスケープするにしても、たかが改行表示するだけでそこまでするのはやーーだーー。。 とまあそんな感じだったんですが、この間すごいことに気付いてしまいました。 アッ・・・ CSSだけでできた・・・・・ ちなみに、white-space: pre; でも改行は反映されますが、右端に達したときの自動の折り返しはないので行が長い場合にテキストがはみ出てしま
対象読者 jQueryなどを使っている開発者 JavaScriptを使った複数人でのプロジェクトに参加している方 JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方 必要な環境 この記事では、AngularJSを使用し、Chrome(39.0)、IE11、Firefox(35.0)、Safari(8.0.2)の環境にて確認を行っています。 入力フォームを扱うためのディレクティブ FormやInputタグなどフォームを扱うディレクティブでは、ユーザから入力される値を管理するために表示するだけのディレクティブとは異なり、便利な機能が沢山あります。それらの機能をうまく使うことで手間なく、また、問題がおきにくいシステムを構築できるようになっています。まずは、このフォームを扱うための機能を紹介します。 フォームの管理を扱うためのディレクティブ ngForm/ngSubmi
前回作成したAngularJSのアプリのひな形でどんなファイルができているかをいろいろ調べてみようと思います。 app/ それぞれアプリーケーションソースとテストケースが格納されています。 詳しくは次回以降に見ていきたいと思いますので、今回はスキップ。 test/ 同じくテストケースが格納されているディレクトリです。 ちなみにgenerator-angularでcontrollerやdirectiveを追加すると、こちらのディレクトリにテストケースのひな形が自動的に追加されます。 $ yo angular:controller piyo create app/scripts/controllers/piyo.js create test/spec/controllers/piyo.js $ yo angular:directive fuga create app/scripts/direc
Webアプリケーションを作る入門的なジェネレータ generator-angular を紹介します。このエントリーは「YEOMAN Advent Calendar 2014」12月4日の記事です。 YEOMAN Advent Calendar 2014 - Adventar ジェネレータ generator-angular は AngularJS を利用するためのものです。 インストールから実行まで インストール いつものようにジェネレータをインストールしてプロジェクトディレクトリを作りyoとgruntの実行です。 $ npm install -g generator-angular $ mkdir angular && cd $_ $ yo angular $ grunt serve 途中聞いてくるオプションは Sassを利用するか? Bootstrapを利用するか? AngularJS
AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ(前編)。Deverlopers Summit 2015 JavaScriptのフレームワークの1つとして注目されている「AngularJS」は、どんな用途に向いているのか、学習コストはどれくらいか? 使いにくいところは? などの疑問をAngularJSのエキスパート達が次々に答えてくれるセッション「AngularJSの今とこれから」が、2月19日に都内で行われたイベント「Developers Summit 2015」で行われました。 ふだんなかなか聞けない、AngularJSを現場で使っている人たちの本音が詰まっていたセッションの内容をダイジェストで紹介しましょう。 AngularJSのFAQ 川田氏 今日は、AngularJSを使って開発している方、AngularJSの本を執筆している方々に、Angu
AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ(後編)。Deverlopers Summit 2015 JavaScriptのフレームワークの1つとして注目されている「AngularJS」は、どんな用途に向いているのか、学習コストはどれくらいか? 使いにくいところは? などの疑問をAngularJSのエキスパート達が次々に答えてくれるセッション「AngularJSの今とこれから」が、2月19日に都内で行われたイベント「Developers Summit 2015」で行われました。 (本記事は「AngularJSのエキスパート達が語る、AngularJSの使いどころとつらいところ(前編)。Deverlopers Summit 2015」の続きです) AngularJSを選んだ理由 川田氏 次の質問は、数あるフレームワークの中からAngularJSを選ん
All the ajax calls that are sent from the IE are cached by Angular and I get a 304 response for all the subsequent calls. Although the request is the same, the response is not going be the same in my case. I want to disable this cache. I tried adding the cache attribute to $http.get but still it didn't help. How can this issue be resolved?
アプリケーションをデプロイした後、利用者から「リロードしてもデータが最新にならない」「更新したはずのデータが書き変わらない」というクレームを受けたので調べてみると以下のようなログが出ていた。 データの更新後、$location.path("/path")内部パスを変える処理を行っているのだが、パスを変えた後のGETリクエストが全てHTTP 204で返って来ていることが分かる。(後で調べるとと304の時もあった) 普段、開発とテストに使用しているChromeでは見たことが無いので、UAを調べると案の定IE(IE10、IE11)だった。 調べてみるとIE(少なくとも10と11)はAjaxのリクエストを勝手にキャッシュするようで、このログが表示されている間はサーバに全く問合せに行っていなかった。 この問題(IEだけのようだが)解決するにはHTMLのヘッダーのようにリクエストのヘッダを明示的にキャ
最近、サーバー側 = ASP.NET WebAPI と、クライアント側 = AngularJS + TypeScript で、SPA (Single Page Application) な Web アプリを実装する機会があった。 その経験を通して得た注意点や Tips を、数回の投稿にわけてまとめておく。 ひとつひとつのテーマは、インターネット上を検索すればあちこちで見つかる情報ばかりだが、自分の備忘録としての意味も込めて、自分のブログにひととおりまとめておこうと思った次第。 というわけで、早速、タイトルの「IE でキャッシュが効きすぎる」件について。 IE の「キャッシュが効きすぎる」件XHR GET、いわゆる AJAX 呼び出しで、特に GET メソッドの場合だが、ブラウザが IE だと "キャッシュが効きすぎる" ことがある。 IE は、いちどサーバーからの応答を得てしまうと以後は、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く