最近は SPA とか React といった話題が尽きないが、自分は結局 フロントエンド JavaScript は jQuery が最もいいと感じている。それはそれら SPA の JavaScript をいじった経験を踏まえての感想。 理由としては、「 やりたいことができにくい 」これに尽きる。 最新を追うということ 自分が最初にSPAを触ったのは AngularJS だった。なるほど、この ng-repeat や $route, $scope などを使えば、今までサーバサイドでやってたようなレンダリングが表側で制御できるようになる！と感動したものだった。この気持ち良さはきっとサーバーサイドでごにょごにょやっていた経験のある人ならなおさら感動するものだ。 さて、じゃあといって「次作るのは SPA のサービスにしよう！」と意気込んで初めて見たとする。それで作っただけで話題になるし、エンジニアと
HTML5モバイルアプリを開発するのに最適なUIフレームワーク、Onsen UIの最新バージョン1.2.2がリリースしました。今回は大きな機能追加が二つあります。 ・Pull to Refresh ・Infinite List こちらの機能について解説します。 Pull to Refresh Pull to Refreshは表示領域を下に引っ張ってイベントを起こす機能です。ネイティブアプリではよく知られた機能で、通常は情報更新する際に利用されます。こちらはまずデモで動作をご覧ください。実際に動かせるようになっていますので、その操作感を確かめてください。 <ons-page ng-controller="MyController"> <ons-pull-hook var="loaded" ng-action="load($done)"> <span ng-switch="loader.get
この記事を三行にまとめると AngularJSのソートやフィルタリングをやってみるっすよー。 何かソートやフィルタリングが効かないことがあるっすよー。 画像はMVCの人文字です。 AngularJSっていうjavascriptのMVCフレームワークがありまして……これがなかなか便利なので、僕も最近使っているんですが、いまいち使い慣れてないこともあって、意外に簡単なことでつまづいたりしている毎日です。 AngularJS 今日はその中でも、たぶんAngularJSを使う上で、かなり頻繁に使われる機能なんじゃないかと思われる『ng-repeat』のフィルタリングやソートについて。 一言で言うと、これが効かない場合があるような気がするんですよ。や、僕の考え方とかやり方が間違ってただけなら、遠慮なくつっこんでもらえればと思うんですが。 一応、まずは基本的な使い方から ぶっちゃけ、AngularJS
jQueryの$.whenみたいに複数のdeferredを同時に処理するみたいのはAngularJSだと$q.allでできる。 var d1 = $q.defer(); var d2 = $q.defer(); var d3 = $q.defer(); $timeout(function() { console.log('d1'); d1.resolve('d1'); }, 10); $timeout(function() { console.log('d2'); d2.resolve('d2'); }, 1000); $timeout(function() { console.log('d3'); d3.resolve('d3'); }, 200); $q.all([ d1.promise, d2.promise, d3.promise ]).then(function(result)
この記事は、AngularJS Advent Calendar 2014 - Adventar の19日目の記事となります。前日は、@albatrosaryさんのYEOMANにあるAngularJS関連ジェネレータをご紹介します - albatrosary's blogです。YEOMANのジェネレータしか使ってこなかったので、他のも触って違いを感じてみたいです。 今日は、AngularJSの基本的なバリデーションの話です。AngularJSの初心者向けの記事になります。最近、仕事でもAngularJSを触り始めているので、少しずつノウハウを公開していきたいと思います。 AngularJSはバリデーション周りで便利な仕組みが色々と用意されていますが、それを拾い集めるのがなかなか大変なため、基本的なことをまとめてみました。 前提 環境 AngularJS 1.3 やりたいこと メールアドレスが
5. 本セッションの内容 ✤ JavaScriptには、HTTPアクセス、ファイルIO、 アニメーションなど非同期処理がたくさん! ✤ 可視化のためのデータ取得も非同期処理！! ✤ 実アプリケーションには必要不可欠な非同期処理を AngularJSでどのように扱うのか様々な例を紹介 6. 目次 1. 遅延処理 - $timeout! 2. HTTPアクセス - $http! 3. REST APIサーバーへのアクセス - ngResource! 4. Promiseを提供する - $q! 5. ngRouteとresolve 7. 目次 1. 遅延処理 - $timeout! 2. HTTPアクセス - $http! 3. REST APIサーバーへのアクセス - ngResource! 4. Promiseを提供する - $q! 5. ngRouteとresolve 9. $timeou
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Angular.jsのアドベントカレンダー6日目です。(遅れてすみません汗) 今日は泥臭い?感じの話になります。 この記事は言及している人達の記事やスタイルガイドのまとめという感じなのですが、これからディレクトリ構成を考える初学者の方や，ディレクトリ構成に悩んでるかたの参考になれば幸いです Angular.jsのディレクトリ構成パターン紹介と、利用して感じた考察などのことを書きます。 ##はじめに LIG主催のAngular.js勉強会 #ng-curry にて、登壇したときの発表内容をまとめようと思っていたのですが、今回のAdvent
はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
はじめに Angular JS で複数のコントローラ間でモデル（状態や値）を共有する方法として、次の 3 種類を解説します。 モデルを共有するサービスを使用する (Shared Service)。 親コントローラのスコープを子コントローラで共有する (Parent Scope Sharing)。 イベントを利用する (Pub/Sub)。 Shared Service 複数のコントローラ間で共有するモデルをサービスとして作成し、そのサービスを複数のコントローラで参照します。 実装例を示します。 <!DOCTYPE HTML> <html ng-app="AngularJsStudy"> <head> <title>Shared State Service - AngularJS Study</title> <meta charset="utf-8" /> <meta http-equiv="
[Angular.js]factoryとserviceの使い分けについて
最近、プライベートのプロダクトでAngular.jsを勉強がてら使っている。 Yeomanでgenerator-angularを使う方法でやってたり。 で、結構悩んで調べたことがあったので、メモ。 ※使い始めて間もないので、間違いがあったらご指摘ください。 サービスを作るやり方、Angular.jsだと色々あります。 yeoman-generatorのREADMEを参考に挙げると https://github.com/yeoman/generator-angular#service service, factory, provider, value, constant と、実にたくさん。 providerとvalueとconstantは、名前からなんとなく使い分けが判るんだけど、 serviceとfactoryの違いって何よ？って結構悩んだ。 簡単な実装例だと、「結局どっちも書き方が違うだ
AngularJSをちょっと試してみました。 今回は、 ・リストを返すAPIを呼び出してリストを出す ・詳細情報を返すAPIを呼び出して情報を出す という二画面を実装するのがゴールです。 ファイル構成は下記です。 . |-- css | `-- app.css |-- index.html |-- js | |-- app.js | `-- controllers.js `-- partials |-- company-detail.html `-- company-list.html 今回はservice.js,factory.jsまで作ってません。 unit周りはじっくり調べて投稿したいですね。 index.html <!doctype html> <html lang="ja" ng-app="stockCompanyApp"> <head>
対象読者 jQueryなどを使っているJavaScript開発者 JavaScriptを使った複数人でのプロジェクトに参加している方 JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方 必要な環境 この記事では、AngularJSを使用し、Chrome（36.0）、IE11、Firefox（31.0）、Safari（7.0.5）の環境で確認を行っています。 サンプルアプリケーションの概要 今回作成するアプリケーションは、単純な「タスク管理」のアプリケーションです。次のような3つの画面を作ります。 タスク（件名とメモ）を登録する画面 登録したタスク一覧を表示する画面 登録したタスクを参照する画面と、削除する為の画面 ページ遷移はシングルページアプリケーション形式で作成します。シングルページアプリケーションとは、jQuery Mobileなどでも使われている方式であ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
MEAN(MongoDB, Express, AngularJS, Node.js)を解説する 前に触った感想です。 MongoDB 良くも悪くもNoSQL。トランザクション無を補うためスキーマが基本汚くなる。 汚いスキーマにアプリケーションの変更が入って安全にデータが壊れる。 結局、不整合が起きてバッチに頼る。バージョン変えるとデータが壊れる。スケール環境は不安定になって止まるのは基本。基本いつのまにか変更されて変な動きして死んでる前提で、動く/戻せる環境構築できない奴は死ぬ Expressシンプルに書けるんじゃなくて、薄い機能しか無い。ミドルウェアをたくさん詰むことになり、ミドルウェアのチェーンは黒魔術詠唱と変わらん。 唱えた本人もどうなるか分からないのがざら。エラーが勝手に握りつぶされるのは基本。 落ちるのがミドルウェア内のエラーとか基本。 いつの間にか落ちるのも基本。基本いつのまに
MEANとは、LAMP(Linux, Apache, MySQL, PHP)に変わる技術としてじわじわと注目されはじめているアーキテクチャです。このアーキテクチャMEAN(MongoDB, Express, AngularJS, Node.js)は、シンプルでかつ強力なアーキテクチャで、現在のJavaを利用したアプリケーション開発とは一線を画すところです。HTML5開発にとってJavaの役割が殆どなくなるというのも注目すべき点だと考えます。MEANで一般的に言われる注目すべき事項は次のところです： JavaScriptフルスタックである データモデルとしてクライアントからデータベースに至までJSON そして、この記事を書こうと思ったきっかけですが、2014/10/5(日) Mozilla Open Web Day in Tokyo | Mozilla Japan でのMEAN解説展示で、様
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
