AngularFire V5 + Firestore 環境で Virtual Scroll を導入する - Qiita
これは Angular Advent Calendar 2017 4日目の記事です。 こんにちは (｡･ω･｡) Angular で CGM サービスを運用・構築したり、ng-japan の slack で emoji を追加することを生業としている者です。 今回は、担当しているサービスで Virtual Scroll を導入する機会があったので、その経緯と方法について紹介したいと思います。 今回の動作 demo は コチラ * この demo は、いずれ落とすことになると思いますのでご了承くださいm(__)m ↓ 動いている様子 demo 用に 100 件のデータを投入しましたが、どんなにデータを読み込んでもページ間の遷移速度が落ちない様子がわかると思います。 なぜ Virtual Scroll が必要だったのか サービス内で使われるリストは、新着一覧やランキング等様々なページの要となる
noteをAngularJSで構築した話
2014/06/02 LIGにて行われたイベントの時に発表したスライド AngularJSを業務で使いたいけど今一歩踏み出せない方のための勉強会 http://eventdots.jp/event/52461Read less
AngularJSのMVWパターンを理解する - Qiita
12/4の記事（AngularJSを使ったWebアプリのアーキテクチャ設計）で書くと言ったまま放置していたので、AngularJSのMVCパターンについて書いてみたいと思います。 AngularJSのMVCについては、12/19のお前のAngular.jsはもうMVCではない。と言われないためのTutorialというすばらしい記事がありますが、本記事ではもう少し抽象的な内容を扱ってみようかと思います。 MVW（Model-View-Whatever）パターンとは MVCパターンには、MVC2、MVP、MVVMなど数多くの派生パターンがあります。 目的は同じなのに派生パターンがたくさんあるのは、それぞれのプラットフォーム固有の問題（フレームワークの違いや、サーバサイドかクライアントサイドかの違いなど）によってMV*の*の役割が異なるからです。 AngularJSは公式ページで"Superhe
3分で分かるAngularJSセキュリティ - teppeis blog
先日のng-mtg#4 AngularJS 勉強会でLTしようと思ったけど申し込みが間に合わなかったのでブログに書きます。 先月リリースされたAngularJS 1.2はセキュリティがんばってる的なことを聞いたので、セキュリティ周りの仕組みを調べてみました。 お題は以下です。 CSRF JSON CSP (Content Security Policy) Escaping CSRF ユニークなトークンをHTTPリクエストに載せてサーバーでチェックする対応が世の中では主流（最近はカスタムヘッダのチェックによる対策も） AngularJSでは、XSRF-TOKEN Cookieにトークンが載っていると、$httpを使ったHTTPリクエストのヘッダに自動的にX-XSRF-TOKENヘッダーが付く。 XSRF-TOKEN CookieはもちろんNot HttpOnlyで。 Angular界ではCS
BackboneマンがAngular勉強会いってきたけどそんなに好きになれなかった話 #ng_jp - mizchi's blog
最初に僕のポジションは表明しておくけど、今までbackbone.js, というかそのラッパーであるchaplin.jsべったりの環境で開発してて、今のプロジェクトをゼロから作り直す機会があるので次バージョンのためのライブラリ選定のためにとりあえず比較として angularを試した見た程度の人間なので、深くは理解してない。 Angularのメリット 僕の浅い理解と勉強会での話を総合した感じ レールに乗り切った時の開発効率が半端ない レールがしっかり敷かれているので開発者の能力差が問題にならない HTMLがテンプレートなので意味的な乖離が少ない ビューモデルに対する操作が一貫していてテスタビリティがある 自分もモジュラリティがあるHTML/CSSは幻想だと思っているので、HTMLに直接属性を書くのは別に構わないと思っている。 ただ、集団開発でも開発者の能力差が問題にならない、という発表をしてい
AngularJS 20min #ng_jp
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
AngularJSの素晴らしさを整理してみる - pochi's weblog
久々のブログになります。 3年ほどJavaScriptを利用した開発をしてきましたが、最初はなぜJavaScriptでMVCフレームワークが必要なのかいまいちわからず、いろいろ試行錯誤してきました。 今日はタイトルの通りAngularJSが素敵だなということを書きたいのですが、よくあるベストプラクティスみたいなものではなく、自身がどのように思考回路を経由してここに行き着いたのかという経験談を記しておきたいと思います。 ちなみに私のJavaScript力は高くありませんのであしからず・・・。 jQuery 昔々、JavaScript MV(V)Cみたいなものがなかった時代、JavaScriptでリッチなものを作ろうとなるとjQueryやDojoのような低レイヤーのフレームワークが主に利用されていました。 その当時簡単なシングルページアプリケーションを作っていましたが私はjQueryを採用しま
今、AngularJSというフレームワークがヤバい - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年11月05日10:36 JavaScript 勉強会 今、AngularJSというフレームワークがヤバい 先週の土曜日、ランサーズさんで行われた 第３弾 週末ランサーズ に参加して個人的に今アツい AngularJS について話してきました。 AngularJS は ng-repeat が便利だったり、コードの見通しが良くなるなどいろいろなメリットがあると思うのでうまく使えば大変メリットがあると思います。特に、データの状態（要素の追加・削除や、状態のon/off など）を制御すればそれに合わせて view の表示はすべて AngularJS がやってくれるというのは素晴らしいですね。 ちなみに、以下の資料の中で ng-app とか ng-repeat とか出てきますが（これは directive と呼ばれます）、この ng というのは AngularJS の２文字目と３文字目を表
AngularJSの設計思想 [Google I/O 2013] - ワザノバ | wazanova.jp
[Video] https://www.youtube.com/watch?v=HCR7i5F5L8c AngularJSのHype (盛り上がり感)があるようなので、GoogleのMisko HeveryとBrad GreenがGoogle I/O 2013でAngularJSの設計思想について語っているのを紹介します。 アプリ開発は、雛形構文（ボイラープレート）を利用しながらデータをブラウザとDBの間でやりとりさせるのが中心で、気づいてみると同じ雛形構文を書く作業をかなり繰り返している。コードを書いてる時間よりもコードを読んでいる方に時間がとられることも多い。この雛形構文を使った作業を極力減らして、アプリに付加価値をもたらすコーディング作業だけを抽出したいと思った。 コーディング作業が効率的になる構造が欲しかった。 フレームワークにテストを組み込むが、フレームワーク自身をきっちりテスト
こてさきAjax:クールなMVCを実現するフレームワーク Angular.js の紹介 - livedoor Blog（ブログ）
先週＆今週は、出張でアメリカ西海岸。そんな折、先週の金曜日（16日）の夜に BayJax meetup が Yahoo! 本社で開催されるということで、参加してきました。 BayJaxは、シリコンバレー地区のAjax & Javascriptに関するMeetUp。大体、半年おきに開催されているようです。今回参加したMeetUpの形態は、Conference形式（勉強会ののりに近い）。日本との勉強会との違いは、最初にピザを食べてお腹が満たされたところで勉強会が始まることと（こっちの考え方の方が、確かにリーズナブル）、質問が活発なこと（海外では一般的なことですが）。とても、楽しい時間を過ごすことが出来ました。 その中で講演された AngularJS について、今回は紹介します。 AngularJS AngularJSは、とてもシンプルにWeb Appを書くことができる軽量な MVC フレームワ
AngularJS 基礎最速マスター
AngularJSとは、Googleのエンジニアが中心となって開発されている Webアプリケーションフレームワークです。 百式田口さんのドットインストール12+4+4連投で盛り上がっているので、大好きな 最速マスターシリーズっぽくまとめてみた。 特徴 双方向データバインディング HTMLをテンプレートとして利用 コンポーネントの最利用 詳しくは公式サイトや Google Developers Blog の翻訳記事をどうぞ。 通常の WebAppの場合、View(HTML)とModel(データ)の紐付けの指定がめんどいのですが、AngularJSの場合、HTMLのタグを拡張することで、Controller側の指定やイベントをシンプルにバインドしてくれます。 AngularJSの読み込み 公式のサンプルコードを参考に <script src="http://code.angularjs.org
AngularJSでServiceがControllerへDIされるまでの流れをざっくり見てみる - tyn-iMarketの技術メモ
引き続き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 = []; } }; }]);
Web先端味見部 第5回(AngularJS) に行ってきた - techlog
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での非同期処理 - 四畳半の窓辺より
1/26に開催されたAngularJSハッカソンに参加してきました。 ハッカソンは初めてでしたが、スタッフの方やチームに恵まれエキサイティングな一日でした。中でも新鮮だったのは、Dropbox上に作業エリアを作ると共同作業がはかどることです。今後もお世話になりそうです。 今回はチーム編成の都合上サーバーサイドの担当だったので、目当てのAngular.jsにはほとんど触れませんでした。そのため復習がてら本家のTutorial を通していくつか引っかかった点を調査してまとめました。 Controllerで非同期処理を扱う 以下のコードでは、“Change the world!”と表示されることを期待していたのですが、実際は“Hello world!”と表示されます。どうしてでしょうか？ index.html <div ng-controller="MainCtrl"> <p>{{title}}
AngularJS 地味だけど知っておきたい filter 機能 - Can I do web?
前回から間があいてしまいましたが。。。 今回はAngularJS が提供している filter についてまとめてみました。 まとめたものがコチラ デフォルトで用意されているのは以下です。 lowercase uppercase json currency date limit number orderBy これら以外にも自分で実装することもできますが、今回は説明しません。 徐々に紹介していけたらと思っています。 主観ですが、date, limit, orderBy が非常に優秀だと感じました。 lowercase / uppercase {{ plainText | lowercase }} {{ plainText | uppercase }} これ日本語という観点で考えると使い道が。。。使う頻度は少ないと思います。 json {{ jsonFilter | json }} // ※js
AngularJS + TypeScript でリッチなフォームを作ってみる - パンダのメモ帳
前回（AngularJS で Hello World）に引き続き AngularJS + TypeScript による簡単なアプリケーションを書いてみました。 今回は AngularJS を使ったフォームの例です。 AngularJS のみで、比較的簡単にリッチなフォームが作成できることがわかるんじゃないかなぁと思います。 まえおき TypeScript で書いてます。 AngularJS のバージョンは2013年2月現在の最新安定版である 1.0.4 を使用します。 自動受け入れテスト（E2E Test）は面倒なので省略しました。 ソースコードについて なお、今回のソースコード一式も GitHub で公開しています。 また、こちらで実際に動作を確認することもできます。 解説 前回解説した内容についてはなるべく割愛します。 form 要素 <form id="signupForm" nam
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
20140823 LL diver Angular.js で構築した note に関して
GitHub - jrief/django-angular: Let AngularJS play well with Django
Home
AngularJS