AngularJSの基礎を理解しよう(1/5):初心者のためのAngularJS入門 - libro
AngularJSは、JavaScriptのライブラリです。――というと、多くの人は「ああ、なるほどね……」と思うでしょう。そして、そこで急速に興味を失う人も多いかも知れません。 「JavaScriptのライブラリ？ まぁ、どんなのか知らないけど、特にいらないよ。jQueryがあるし、それで十分だからね」――そう思いませんでした？ 皆さんが今まで知っているJavaScriptライブラリは、基本的に「JavaScriptを便利にするもの」でした。「DOMの取得や属性の操作がjQueryなら格段に簡単に書けるよ」というようなことでライブラリを導入していくことになった人も多いでしょう。 これらは、プログラマが自分で作成するプログラムを考え、それを書いていくことを楽にしてくれる、というものでした。作成する処理は自分で考える。それを作るのが楽になる――それが今までのライブラリでした。 では、Angu
HTML5/JSでインスタントサーチ（入力中に検索結果表示） - Qiita
3. JS: インスタントサーチのスクリプト この節がいちばんの肝です。 まず、lists = document.querySelectorAll('.line-shell-main-users-li');で検索対象を取得します 次に、for文内でinnnerTextでタグ内の文字列を取得します 最後に、.hiddenクラスをトグルします searchUsersList = function(event){ var i, id, name, lists, input_text = $(this).val(); console.log(input_text); // listのdomを取得 lists = document.querySelectorAll('.line-shell-main-users-li'); for (i = 0; i < lists.length; i++){ id
AngularJSでマテリアルデザイン風のページ遷移アニメーションを作ろう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 6月から役職が変わりフロントエンドリーダーからCTOになりました、先生です。 もうAngular1.4にアップデートしましたか？ Angular1.4になりマテリアルデザインを意識したアニメーション関連の変更や実装がおこなわれました。その分Breaking Changesもあるのでアップデートには注意する必要があります。 今日はそんなAngularJS 1.4を使って、マテリアルデザイン風にページ遷移するアニメーションを作ってみたいと思います。 今回のデモ デモは下記リンクになります。 各メンバーをクリックするとスムーズにアニメーションして詳細ページに遷移します。まずは触ってみてください。 http://frontainer.com/ligblog-sample/angular-morphing-animation/#/ 必要なもの AngularJS1.4 – https:
AngularJS ui-routerを使って認証機能を実装してみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさま、GWは満喫できたでしょうか？ こんにちは、フロントエンドエンジニアの稲葉です。 今回はAngularJSでui-routerを使って簡単に認証機能を実装したサンプルをご紹介したいと思います。 実際の動作はDEMOで確認することができます。（モックなのでEメールとパスワードはなにかしら文字が入力されていれば通ります） デモのソースコードはこちらに置いています。 ui-routerとは angular-ui/ui-router · GitHub： https://github.com/angular-ui/ui-router ui-routerはAngularJS用のルーティングモジュールです。 viewの入れ子をサポートするなど高機能で扱いやすいので、標準のngRouteよりui-routerを使っている人の方が多いのではないかという気がします。 ルーティングの準備 まずはログイン
AngularJS x TypeScript でちょっと本格的な TODO アプリを作ってみる – AngularJS + TypeScript ＃2 | PSYENCE:MEDIA
AngularJS x TypeScript でちょっと本格的な TODO アプリを作ってみる – AngularJS + TypeScript ＃2 wakamsha 2015.05.18 426 5735224110 2015年5月23日 controllerAs について追記しました。 はじめに とりあえず何かアプリっぽいものを作ってみようということで、定番の TODO アプリに挑戦してみようと思います。 ググればいくらでも情報は出てきますが、この記事では以下にあるようないかにもチュートリアルっぽいものからもう一歩踏み込んで、より実践的かつ規模の大きな案件にも応用出来るような作りを目指してみます。 AngularJS 1.2 日本語リファレンス | js STUDIO AngularJS • TodoMVC サンプルコードはこちらからどうぞ。 wakamsha/angular-dem
AngularJSで、時間のかかる通信の間にモーダルを使ってプログレスバーを表示する - ブログ - ワルブリックス株式会社
時間のかかる非同期通信を行っている間は、通信中であることをユーザーに知らせつつユーザーによる画面操作を禁止したほうが良いことがある。UI Bootstrapのモーダルとプログレスバーでこれを行う方法を示す モダンな Webアプリケーションはいわゆる Ajaxという方式でサーバと非同期で通信することで画面に表示するための情報を取得したりユーザーの入力をサーバに送信したりする。同期通信と異なり、非同期通信の場合は通信中もユーザーインターフェイスがユーザーと対話出来るため、通信中にユーザーが画面操作を行うことにより別のアクションを起こされては困る場合には特別の配慮が必要である。 例えば、クレジットカードの決済画面でユーザーが送信ボタンを押しサーバとの通信が行われている数秒の間に送信ボタンが再度押されたり、メニューを操作して別の画面に飛ばれたりしてしまっては困るといった具合だ。クレジットカード決済
AngularJSをはじめる前に#AngularJS入門その1 | DevelopersIO
AngularJSをはじめよう ここにあるように、最近はWebアプリを作成する際にJavaScriptのフレームワークを使用するのが当たり前といっていいくらい、 さまざまなフレームワークが存在します。 弊社ブログでもember.jsの記事等、JavaScriptのいろいろなライブラリ・フレームワークを紹介していますが、 私が近頃AngularJSを使用する機会があり、とても使いやすかったので、改めてここで紹介しようと思います。 AngularJSとは もう一度「AngularJSとはなにか」という部分を簡単におさらいを。 AngularJSはGoogleとコミュニティより開発しているオープンソース(MIT)のJavaScript用MVWフレームワークです。 テンプレート言語としてHTMLを使用できたり、双方向データバインディングやDI(依存注入)が使用できたりと、 近年複雑化するWebアプ
JavaScript MVCフレームワーク「AngularJS 1.2」リリース。要望の多かったアニメーション機能が追加、脆弱なコードを制限するモードも
JavaScript MVCフレームワーク「AngularJS 1.2」リリース。要望の多かったアニメーション機能が追加、脆弱なコードを制限するモードも JavaScriptのMVCフレームワークはBackbone.jsやEmber.jsなど多くの種類が登場していますが、Backbone.jsやEmber.jsなどが比較的シンプルなフレームワークを指向しているのに対して、AngularJSの特徴はUIバインディングを含むリッチなフレームワークとして開発されていることです（ちなみにAngularJSのWebサイトでは「MVWフレームワーク」と名乗っています。MVWのWはWhateverらしいです）。 AngularJSでは、HTMLにJavaScriptのコードを混ぜ込まなくとも、識別子を差し込むだけで、その識別子に対応したモデルのデータを自動的かつリアルタイムに表示してくれます。逆に、HT
今、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 の２文字目と３文字目を表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
