オープニング大放出セール SAINT LAURENT(サンローラン) / 2017AW/ワイアット30チェルシーブーツ/42/26.5cm/グレー/スウェード/443208 | |衣類・家具・家電等の買取と販売なら | お問い合わせ番号:2337830026602 -qoosky.net
※出来る限り早い内に、清書しなおします。。 AngularJSのルーティングはhashありとなしのどちらでも対応できる。 あり http/xxxxxxxxxx.jp/#/top http/xxxxxxxxxx.jp/#/sub なし http/xxxxxxxxxx.jp/top http/xxxxxxxxxx.jp/sub 今回は、なしversion(html5対応browser限定)に関してメモを残します、、 <html ng-app="app"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular-resource.
はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
先日(7/3)開催した ng-mtg#3 AngularJS 勉強会 1周年記念! の @agektmr さんのセッションで紹介された、AngularJS のベストプラクティスです。 デモで使われたコードはこちらです。 AngularJS を使ってみると、個々に controller や directive をあれこれするのはさほど難しくないのですが、例えば、controller A で使う変数と directive B で使う変数を共通で使いたい場合に、これを知らないと悩むんじゃないかな〜と思います。 angular.module() の .value() というメソッドを使います。 ( 厳密には $provide.value() ですけど気にしない! ) 1.定義する まずはモジュール( myModule とします )を作ります。 その後に .value() として、引数に key -
メモ。AngularJSの$scopeをng-controllerの外から参照する方法。 angular.elementを使ってDOMをラップしたオブジェクトを取得し、scopeメソッドを呼ぶ。 AngularJS: API: angular.element 試したのはAngularJS 1.2.27。 test.html <!DOCTYPE html> <html> <body> <button type="button" onclick="test()">test</button> <div ng-app="myApp"> <div ng-controller="myController" id="myElement"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/an
はじめに AngularJSのDirectiveについては、カスタムディレクティブの作成方法含め、おおよそ理解していたつもりであったが、CompileとLinkについて、若干自信が無い部分があったので、勉強がてら少し厚めに書いてみた。 なお、公式の開発ガイドにも、Oreillyの書籍でも書かれているが、カスタムディレクティブを開発することがあっても、殆どのケースでは、Linkの処理のみを気にするだけでよいため、あんまりこのエントリは役には立ちません。 おさらい 「AngularJSのDirectiveを理解する」にも書いているが、ざっくり言うと、Angularのディレクティブがテンプレートから実際のViewを描画する際は、Compile → Linkの2フェーズに分かれている。 Compile:ディテクティブのテンプレート(html文字列ではなく、DOMオブジェクト)から、Link関数を生
カスタムディレクティブを作るに当たって、覚えておくプロパティがいくつかある。 ディレクティブ ng_service/$compile プロパティ一覧にすると restrict priority template templateUrl replace transclude scope controller require compile link となっている。 相変わらず公式の説明が取っつきづらく、かつ意外と奥が深いので、かみ砕きつつサンプルと一緒に載せておく。 ちなみに AngularJSアプリケーション開発ガイド はわりと役に立つので AngularJS をやるならおすすめの一冊です。 Ebook 版を買っていたのに書籍版も何故か買ってしまったので誰か書籍版を僕から買い取ってください。 restrict HTML 側でディレクティブを呼び込むための形式を定義するプロパティ 複数指定も
Step0 事前準備 index.html <!doctype html> <html lang="ja" ng-app="app"> <head> <meta charset="utf-8"> <title>My HTML File</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> </head> <body ng-controller="AppCtrl"> <p>{{value}}</p> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script> <script src="controllers.
To get AngularJS to work in IE7 and IE8, I add id="ng-app" and class="ng-app" to my ng-app element: <html id="ng-app" class="ng-app" ng-app="myApp"> <div ng-view></div> </html> This has always worked in the past, but now I've added class="ng-app" to two different projects, and in both the view no longer renders in any browser. Has the way to do IE7/8 compatibility changed? I'm using version 1.0.2
AngularJS を IE 8 以前の Internet Explorer に対応させるには、AngularJS: Internet Explorer Compatibility のページに記載されている手順を実施する必要がある。 まず json2.js または json3.js。 index.html <!doctype html> <html xmlns:ng="http://angularjs.org"> <head> <!--[if lte IE 8]> <script src="/path/to/json2.js"></script> <![endif]--> </head> <body> ... </body> </html>
はじめに 好物はインフラとフロントエンドのかじわらゆたかです。 今回の案件ではAngularJSのFormのバリデーションを用いました。 チェックの条件をView側に埋め込むことができ、 また、ngMessage ディレクティブを用いることで、エラーメッセージの表示まで行うことができます。 非常に便利な機能ではあるのですが、2点ほどハマった点があったので紹介します。 Modelにバインディングされていない 冷静に考えればそのとおりなのですが、バリデーションでエラーとなった値はModelにはバインディングされません。 これを意識しておかないとパスワードとパスワード(再入力)の同値評価をバリデーションで行おうとした際に、 ちょっと困ったことになります。 現象説明 Validation Form Check Sample 上記はパスワードとパスワード確認用を入力するフォームです。 両方のフォーム
こんにちは中川です。 先日、AngularJS 1.3 がリリースされましたね。 動作速度の改善や、メモリ消費量の削減などパフォーマンス面での改善もうれしいところですが、 機能的にはフォーム関連の機能強化が特にうれしく感じましたので、紹介したいと思います。 ■ ngModel.$validators https://docs.angularjs.org/api/ng/type/ngModel.NgModelController ngModel.$validators を使うと、独自のバリデーション関数を簡単に定義することができるようになりました。 以下の例のように、入力値を引数で受け取り、返り値で真偽値を返す関数を$validatorsオブジェクトに定義します。 $validatorsのキー(ここではvalidCharacters)が、エラーメッセージ表示時などの参照用に利用できます。 n
この記事は、AngularJS Advent Calendar 2014 - Adventar の19日目の記事となります。前日は、@albatrosaryさんのYEOMANにあるAngularJS関連ジェネレータをご紹介します - albatrosary's blogです。YEOMANのジェネレータしか使ってこなかったので、他のも触って違いを感じてみたいです。 今日は、AngularJSの基本的なバリデーションの話です。AngularJSの初心者向けの記事になります。最近、仕事でもAngularJSを触り始めているので、少しずつノウハウを公開していきたいと思います。 AngularJSはバリデーション周りで便利な仕組みが色々と用意されていますが、それを拾い集めるのがなかなか大変なため、基本的なことをまとめてみました。 前提 環境 AngularJS 1.3 やりたいこと メールアドレスが
サンプルコードを使ってAngularJSの基本的なカスタムディレクティブの作成方法をまとめてみました。 デモとコードサンプルはこちら。 (1)サンプルコードの仕様 商品リストを表示する下記内容を”productsList”という名前でカスタムディレクティブを使って書き換えてみます。 (カスタムディレクティブ未使用) <div ng-controller="cus1Ctrl"> <ol> <li ng-repeat='item in products'> {{item.product_name}} : {{item.price | number:0}}円 </li> </ol> </div> (カスタムディレクティブ使用) <div ng-controller="cus1Ctrl"> <div products-list="products"></div> </div> (2)カスタムディレ
明日AngularJSのハッカソン(AngularJS ハッカソン - AngularJS Japan User Group | Doorkeeper)に参加することになったので、AngularJSを一から勉強してみることにした。そこで今回は、AngularJSのディレクティブについて解説していきたい。 目次1. AngularJSのディレクティブとは 2. カスタムディレクティブを作る 3. ディレクティブのオプションでできることまとめ 1. AngularJSのディレクティブとはAngularJSのディレクティブとは、双方向バインドを実現するための仕組みである。 AngularJSで言うところの双方向バインドでは、具体的に以下の2つの処理が行われる。 1.Model(=scope)の変更をView(=DOM)へ反映する 2.Viewの変更時にscopeの値を変更する 具体的に、双方向バ
先日にはてブのホットエントリになってたこの記事(Promises: ブラウザーJavaScriptの新しい非同期標準になるか?)をみるに、APIアクセスの場合は promises を使わないと、APIの応答が遅い場合に結果が取得できないし、またAPIの結果が返ってくるまでユーザを待たせてしまうことになります。 というわけで、AngularJS でAPIの結果を非同期で取得して画面を更新する、というデモを作ってみました(応答が遅いAPIを模するために、1秒のウェイトを擬似的にいれてます)。 デモはこちら⇒http://hkusu.github.io/AngularJS_apicall_demo3 下記にソースの説明をします。 ※ 私のJavaScriptの経験はまだ浅いので、おかしなところがあったら教えてください^^; ① ソースツリーのWEB公開領域に、適当にJSONファイルを用意
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く