ngProgress - A slim, site-wide progressbar for AngularJS
ngProgress A slim, site-wide progressbar for AngularJS I recently saw Youtube's and Medium's new loading bars (and Medium don't get it) and was interested in implementing it on my own. In comes NProgress, a jQuery dependent plugin that creates this effect. I didn't think the plugin needed a jQuery dependency, so I created my own AngularJS Provider that I can use for my heavy-applications. Try it o
AngularJSにあったLoading(ローディング)／Progress(プログレス)を簡単に表示するライブラリ - Qiita
AngularJSだけでもないが、ちょっと長めの検索処理などを実装する際に、UIで検索処理中なのか、フリーズしてるのかわかりづらいため、いわゆるローディングのアイコンを表示したくなったりする。 AngularJSにも、$rootScopeを使ったローディングのサンプルなんかはあるには、あったがスキル不足のためか、うまく表示できなかった。 ということで、Googleで検索して見つけました。 本家 ngProgress A slim, site-wide progressbar for AngularJS とうたわれているので、かなり軽量なのかと期待しましたが、 後で考えると、細い線のプログレスバーだと言いたいのだと理解しました。 ※決して重くはないです。 導入方法（我流） 上記ホームページからngProgress.min.jsのリンクを右クリックでダウンロード GitHubのngProgre
3分でわかるAngularJSの$qサービスのPromise Deferred then all finally
Promiseとは 非同期処理に使用するオブジェクト 使い方 まず$qサービスを使用するため以下の形を作る var app = angular.module('app', []); app.controller('Ctrl', function($q) { }); そして非同期処理用の関数を作成。var deferred = $q.defer();で非同期処理に必要なDeferredオブジェクトを作成して処理の最後にreturn deferred.promiseで返す function async() { var deferred = $q.defer(); // この中に処理を記述 return deferred.promise; } 名前を受け取ってHello付けて返す処理の場合はこのようになる function asyncHello(name) { var deferred = $q
AngularJSで HTML5的なアラートウィンドウを表示する - ブログ - ワルブリックス株式会社
手前の方にポップアップしてメッセージを伝え、ユーザーの了承を促すアラートウィンドウ。JavaScript標準の window.alertでは味気ないので、もっと HTML5的に表示してみる。 モーダルとだけ言うと日本ではあまり聞き慣れない言葉だが、ユーザーインターフェイス用語としてはかなり昔から存在する「モーダル・ダイアログボックス」を示す。ユーザーとの対話が終了するまで必ず画面の最も手前に居続け、表示されている間はその外にアクセスさせないようになる、よくあるダイアログボックスをいう。Web製作の現場ではポップアップと呼ばれることも多い。 JavaScriptの window.alertや Windows APIの MessageBox で表示されるメッセージウィンドウもモーダルの一種である。 AngularJSそのものはユーザーインターフェイスを提供しないのだが、Bootstrapを組み
TypeScriptとAngularJS「ページ切り替え」 - かずきのBlog@hatena
Single Page Applicationだとしても、疑似的にページ切り替えしますよね。ということで、そのための機能がAngularJSにもあります。 使い方 angular-route.js(min.js)をangular.js(min.js)の後に追加。angular.moduleのモジュール作成時に"ngRoute"への依存関係を追加する。スクリプトの追加は置いといて、モジュール作成時の依存関係の追加は以下のようなコードになります。 // AngularJSのモジュール定義 var navApp = angular.module("navApp", ["ngRoute"]); こうすることで、navApp.configメソッドに$routeProviderを受け取ってルートの構成を行うことが出来るようになります。 $routeProviderのwhenメソッドを使ってURLごとに
nkjmkzk.net - nkjmkzk リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
GitHub - angular-ui/bootstrap at gh-pages
The gh-pages branch contains generated demo pages for http://angular-ui.github.com/bootstrap as well as build results. #Installation All the directives in this repository depend only on AngularJS and bootstrap's CSS. There is no need to include any third-party JavaScript files. The bootstrap CSS can be referenced from a CDN: http://www.bootstrapcdn.com/ Then it is enough to include one of the buil
見た目は Bootstrapなのに動きは AngularJSなサイトを作るには - ブログ - ワルブリックス株式会社
レスポンシブ・デザインやモダンなUIコントロールを取り入れた Webサイトを構築する基礎として定番になっている Twitter Bootstrapを AngularJSと一緒に使う方法を紹介する。 Bootstrapが提供するもの その1: あたりさわりのない見た目とレスポンシブな表示を提供するスタイルシート Bootstrapのスタイルシートは、横方向12分割のグリッドでページをレイアウトしつつ画面の大きさによって配分をコントロールできるマルチデバイス向け表示システムと、構成要素の今風な見た目を提供する。デザイナ抜きで動いている開発チームにとっては「とりあえず Bootstrapベースで作っておけば今風の見た目になる」ため極めて有難い存在。 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/latest/cs
安全加密检测
已通过安全加密检测 如果没有自动跳转，请点击下方按钮前往 点击进入购彩中心360安全卫士提供技术支持 Copyright ? 1998 -2020. All Rights Reserved.
AngularJSでモジュールを定義するには？
コード規模が大きくなればモジュール化が必要になる。AngularJS専用として提供される「モジュール」の基礎を解説する。 ← 前回 連載 INDEX 次回 → Webアプリにおけるクライアントサイドの比重が高まるにつれて、当然ながらコード規模もいや増しています。そして、ある程度以上の規模のアプリを開発する際には、コードを目的／用途に応じて束ねるためのモジュール化は必須です。 従来、JavaScriptではオブジェクト、もしくは関数オブジェクトを利用して、モジュール（のようなもの）を定義していました。しかし、あくまで専用の仕組みではありませんので、使い勝手も悪く、コードの可読性を損なう原因ともなっていました。 そこでAngularJSでは、専用の仕組みとしてモジュールを提供しています。AngularJSで作成するコードは、原則として全てモジュールの配下で管理すべきです。 モジュールの基本 モ
自作directive内でng-modelをきちんと動作させる - Qiita
追記：require: '^ngModel'で解決しました。 自作directive内でng-modelを使ってみました。 デモ：Plunker - ng-model in a my directive. 作ってみるとわかりますが、自分で作ったdirectiveからng-modelを使おうとおもったらけっこう大変！ なんとisolated scope内では親スコープのngModelControllerを参照できないんですね。 ただ、isolated scopeにしないとせっかくのAngularJSでテンプレートが使えないという(複数個要素を作ると干渉するので)。 これを解決するためにscope.$new()で子スコープを作って、$compileを使ってテンプレートを手動でコンパイルした上で、さらに手動で親と子をバインドしてみました(以下コード例)。面倒くさいですが、現状わかっている範囲だと
AngularJSのngShowとngAnimateでフェードイン・フェードアウト処理をするには？
AngularJSのngShowによる表示・非表示の自動処理と同時にngAnimateを使ってフェードイン・フェードアウト処理をするにはどうしたらいいだろう？まずはデモ。 ngAnimateでアニメーション処理を行うには、まずscriptタグでライブラリを読み込んでおく必要がある。 それだけではまだダメで、さらにこのような感じでモジュールとして指定する必要がある。 var app = angular.module('app', ['ngAnimate']); ngAnimateのアニメーションは完全にCSSの設定によって行われる。つまり、CSSのアニメーションが設定されたクラスが追加されたり削除されたりすることでアニメーションが行われる。 ここでのポイントは、どのようなCSSクラスがどのようなタイミングで追加されたり削除されるかだ。詳しくはここに書いてある。 AngularJS: ngAn
AngularJSではじめるHTML5開発 – Part8 モーダルダイアログによる新規レコード作成フォーム at nkjmkzk.net
Part7の続きです。 今回は新規ゲスト作成フォームを実装していきます。Part6で登場したモーダルダイアログ、そしてPart7で登場したPromise/Deferredパターンを駆使していきます。 まずは今回開発する部分をデモでみてみましょう。 デモ それでは実装へ。 新規ゲストフォームのモーダルダイアログを作成する まずモーダルダイアログとなるHTMLマークアップを作成しておきましょう。 <!-- Modal for newGuestForm --> <script type="text/ng-template" id="T_newGuestForm"> <div class="modal-header"> <button type="button" class="close" ng-click="$dismiss()">×</button> <h3>新規ゲスト</h3>
AngularJSカスタムディレクティブのcontroller関数とrequire: Angular、Bootstrapなどの学習備忘録
カスタムディレクティブのcontroller関数とrequire属性について確認しました。下記サイトを参考にしました。 http://www.sitepoint.com/practical-guide-angularjs-directives-part-two/ ●controller関数 ・controllerはプレリンキング前に初期化される。 ・他のディレクティブと共有できる。 これによってディレクティブ間で情報のやり取りができ、豊富な振る舞いを利用できる。 ●require ・他のディレクティブとrequireし、そのコントローラを4つの引数とリンク関数にインジェクトする。 ●サンプルコード http://plnkr.co/edit/NMWGE6l9p1tBZh3jCfKn?p=preview ・'innerDirective'のrequire: '^outerDirective'
JITTY - Video & Live Interactive Solutions
JITTY's seasoned experts specialize in identifying optimal solutions to address your business challenges. Our proficiency in pioneering video and live interactive technologies ensures tailored strategies that effectively resolve tasks, delivering seamless experiences and driving your business forward.
AngularJSのサービス#AngularJS入門その5 | DevelopersIO
AngularJSのサービス AngularJSにおけるサービスとは、アプリにおいて任意のタスクを実行する関数として使用されます。 例えば、AngularJSではajax通信用に$http組み込みサービスを持っています。 もちろん、サービスを自分で定義して使用することも可能です。 AngularJSでビジネスロジックはサービスとして実装されることが推奨されているため、 独自サービスを作成する機会は多いと思います。 その独自サービスをAngularJSで作成するには複数の方法があるので、それらの方法を確認してみましょう。 今回使用した動作環境は以下のとおりです。 なお、本記事で紹介しているコードは、以前作成したangular-seedを使って動作を確認しました。 OS : MacOS X 10.9.2 node.js : 0.10.24 Git : 1.8.5.2 サービスを使う Angul
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJS で全角から半角に変換する Directive を追加する - Qiita
AngularJS でモデルの変化時にフェードイン・アウトするディレクティブを作る - Qiita
http://senta.me/blog/javascript/angularjs-basic/
AngularJS 入門 ~ サービス, DI - Qiita
