AngularJSではじめるHTML5開発 – Part7 Promise/Deferredを用いたデータ更新後の画面リフレッシュ at nkjmkzk.net
Part6の続きです。 今回はデータ更新後に、現在画面に表示されている情報を最新状態にアップデートする仕組みを「Promise/Deferred」なるデザインパターンを適用して実装していきます。 まず今回開発する部分をデモでみてみましょう。 デモ それでは実装へ。 Promise/Deferredって何ですか？ データ更新後にサイドバーの情報をリフレッシュするのは難しいことではありません。 updateGuest()の成功時コールバックでgetGuests()を実行すればいいだけです。 ただし、このコールバックで逐次処理を記載していくと、いくつかの問題が発生してきます。 どんどんコールバックが深くなっていく（いわゆるコールバック地獄）。 ゲスト情報は更新したいけどその後の処理は必要ない、といったケースがでたときに更新処理だけを実施できない。 今回のようにAjax非同期通信でデータアクセスを
マテリアルデザインに対応したAngularJS用UIフレームワーク「Angular Material 1.0」正式リリース
マテリアルデザインに対応したAngularJS用UIフレームワーク「Angular Material 1.0」正式リリース AngularJSでアプリケーションを開発する際に、マテリアルデザインに対応したユーザーインターフェイスの構築に使えるフレームワークが「Angular Material 1.0」として正式にリリースされました。 Angular Materialは、ボタンやアイコン、メニュー、スライダーといった32個のコアコンポーネントを含み、グリッドレイアウトも可能。反応時のアニメーションやCSSによる配色、文字のスタイリングなどにも対応しています。 下記はボタンのサンプルの一部です。 対応するAngularJSはバージョン1.3以降。対応するWebブラウザはChrome、Safari、FirefoxなどのモダンブラウザとInternet Explorer 11以降。Android
AngularJS使い方メモ - Qiita
AngularJSアプリケーション開発ガイド を読みながら勉強したときのメモ。 HelloWorld AngularJS を入手する 公式サイトから angular.min.js をダウンロードする。 HTML を書く <html ng-app> <head> <script src="angular.min.js"></script> <script src="helloWorld.js"></script> </head> <body> <h1 ng-controller="HelloWorldController">{{message}}</h1> </body> </html> angular.min.js を読み込む。 ng-app ディレクティブを付けたタグの中が、 AngularJS のテンプレートとして処理される。 ng-controller ディレクティブを付けたタグの中
AngularJS 製アプリで jQuery を使いたい | DevelopersIO
本記事で使用している AngularJS のバージョン 1.2.16 angular.element 先日紹介した ng Global APIs の中に angular.element というメソッドが用意されています。 このメソッドは、デフォルトでは "jQuery lite" または "jqLite" と呼ばれる AngularJS が提供する jQuery のサブセット ( 軽量版 jQuery ) オブジェクトを返しますが、ドキュメントを読む限り制限が多く、困ることが少なくありません。 どのくらい制限されているかというと、、、 https://docs.angularjs.org/api/ng/function/angular.element より addClass() after() append() attr() bind() - Does not support namesp
なんだかんだで SPA から jQuery に戻った話 - ボクココ
最近は SPA とか React といった話題が尽きないが、自分は結局 フロントエンド JavaScript は jQuery が最もいいと感じている。それはそれら SPA の JavaScript をいじった経験を踏まえての感想。 理由としては、「 やりたいことができにくい 」これに尽きる。 最新を追うということ 自分が最初にSPAを触ったのは AngularJS だった。なるほど、この ng-repeat や $route, $scope などを使えば、今までサーバサイドでやってたようなレンダリングが表側で制御できるようになる！と感動したものだった。この気持ち良さはきっとサーバーサイドでごにょごにょやっていた経験のある人ならなおさら感動するものだ。 さて、じゃあといって「次作るのは SPA のサービスにしよう！」と意気込んで初めて見たとする。それで作っただけで話題になるし、エンジニアと
angularJS と jQuery に関する誤解を解く - nazokingのブログ
最近 angularJS に対する期待の低下が著しくてつらい。 なんだかんだで SPA から jQuery に戻った話 - ボクココ Angularの問題では はてなブックマーク - mizchi のブックマーク - 2015年5月18日 みんな使いどころを間違ってるんや。１年半くらい使ってて不満もあるけど自分のよく使う範囲では angularJS 最強だと思う。 angularJS が向いてるのは Single Page Application ではない angularJS が向いてるのは ◎ フォームのような細かい部品を多用 ＆ DOMツリーとデータスコープがほぼ一致していてユーザの入力をサーバに送ったりする webアプリ。管理画面、マイページ、業務アプリなど △ Single Page Application ← 簡単に作れるけどページ間の連携が必要ないならサーバ側で分けてしまった方
AngularJS+PHP+MySQLでCRUD入門 - Qiita
AngularJSとPHPを組み合わせたCRUDのサンプルです。なるべくシンプルになるように作ってみました。 全ソースコード https://github.com/naga3/angular-php-basic 以下のデータベースとテーブルを作成して、それ以下の3ファイルを入力してindex.htmlを開くと動きます。 CREATE DATABASE school; USE school; CREATE TABLE students( id SERIAL PRIMARY KEY, name VARCHAR(255), age INT, comment TEXT ); <!doctype html> <html lang="ja" ng-app="app"> <head> <meta charset="utf-8"> <title>名簿</title> </head> <body ng-co
AngularJSの便利なツール20選 | POSTD
皆さんはAngularJSに興味がありますか？ この記事では、AngularJSのための最適なツールと選りすぐりの情報をリストにまとめています。Angularを使ってアプリケーションの開発をする際には役立つ内容です。 Webアプリケーションを動的に設計したいWeb開発者の多くは、 フレームワークとしてAngularJSを選択するようになってきました 。AngularJSの開発者が新たにAngularJSプロジェクトを立ち上げる場合、本格的にWebサイトを開発しようとすると、非常に多くのツールが必要になります。 AngularJS初心者の場合は、まず始めに AngularJSの良書 を何冊か読むと良いでしょう。 私たちは、オンラインでAngularJSを学習するための、膨大な AngularJSのチュートリアル リストも作成しています。 AngularJSでWebアプリケーションを開発する際
初心者向けAngularJS - その２ - albatrosary's blog
続きましてもうちょっとかっこよくしていきたいと思います。かっこいいというかJavaScriptファイルが一つですので数人で開発するときにはちょっと困りますね。なので少し「かっこよく」です。前回はビルトインディレクティブと簡単なコントローラーとファクトリーまで行いました。 初心者向けAngularJS - その１ - albatrosary's blog ゴールですが ファイルを用途に合わせて分割する ルーターを導入しページ遷移を作成する です。前回作ったものを流用する形ですが、作業量が少し多いですので焦らずにご自身のペースで進められてはと思います。分かりづらい事項はコメントを入れていただくかツイートして頂けたらと思います。 ファイル分割は最終的に次のようになります： 少し難し話 コーティングを始める前に少し背景を。 最近ではWebアプリケーションを「SPA(Single-page Appl
初心者向けAngularJS - その１ - albatrosary's blog
この記事は「AngularJS初心者向けハンズオンのネタ」としてまとめています。最近ではいろいろ書籍もありますし、AngularJSリンク集でもまとめている通り資料は豊富にありますが改めて。内容としてはビルトインディレクティブとコントローラー/ファクトリーを触ってみる程度です。 Angularリンク集 - albatrosary's blog ※ この記事はAngular1.3をベースに書いています。Angular1.5ベースのものはこちらになります(追記:2016/2/18)。 GitHub - albatrosary/Angular1Study: Comprehensive Beginner’s Guide to Angular 準備 サーバのインストール Python 「 http://www.python.jp/ 」からダウンロードしインストールします コマンドラインで $ pyt
「SPAを構築するときに知っておいた方がいい7つの課題」は課題ではない - albatrosary's blog
2014-01-15 「SPAを構築するときに知っておいた方がいい7つの課題」は課題ではない 「SPAを構築するときに知っておいた方がいい7つの課題」という記事がブログエントリーされていました。しかし、課題の一つ一つは、先人がノウハウとして蓄積されており課題というよりも「知っておくべき事柄」です。 ７つの課題として上げられている事項は パフォーマンス メモリリーク セキュリティ フレームワークロックイン 画面設計からUIコンポーネント設計への思想転換 フロントエンジニア不足 番外編 です。いづれもSPA構築の際考慮すべき事柄ですが解決する道筋は既にできています。 パフォーマンス Sencha Touchの開発チームがHTML5で高速に動作するfacebookを開発したことで問題は明確になっています。 Facebookのモバイルアプリが失敗した理由はHTML5のせいじゃない。HTML5でサク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Build Your First Mobile App With Ionic 2+ & Angular 2+ - Part 1
GitHub - dbiele/TypeScript-Cordova-SystemJS-Angular2-beta: VS2015 project created using TypeScript, Cordova, SystemJS, Angular beta
https://senta.me/ja/blog/2014-09-26/angularjs-basic/
HTMLを細分化して読み込む
外部HTMLの読み込み、controller指定とcontrollerAs指定の違い
AngularJS
directiveメソッドとは（Hello world）
ngAnimateモジュールを使用したアニメーション（jQueryでアニメーションを設定）
モジュールを細分化して読み込む