angular.jsで無限スクロールを実装する方法 - とりあえずphpとか
やりたいこと ページで一覧表示をしてリストの1番下までいったらサーバに通信してデータをとってきてhtmlに反映させるみたいなありがちな処理です。「angular.js 無限スクロール」とかで検索したら「ngInfiniteScroll」というモジュールがいろんなサイトで紹介されててこれがでデファクタなのかなぁとも思いつつ、使わない方法です。 実装 // html <body ng-app="App"> <div ng-controller="ControllerIndex"> <div id="fixed" when-scrolled="loadMore()"> <ul> <li ng-repeat="i in items">{{i.id}}</li> </ul> </div> </div> </body> //css <style> li { height: 120px; border-
いまさら聞けないAngularJSの基礎知識と5つの主な特徴、インストール、簡単な使い方
連載目次 前回記事、「いまさら聞けないMongoDBの基礎知識とインストール、CRUD操作の基本、モデリングツールMongooseの使い方」では、ハイパフォーマンスなNoSQLデータベース「MongoDB」の概要と、Node.jsからMongoDBにアクセスするモジュール「mongoose」の使い方の基本を紹介しました。今回は、MEANスタックの「A」部分、AngularJSの基本について解説します。 なお、本記事を見て実際にサンプルを動かしたい場合、以前の連載記事（第1回、第2回）を見て環境を作成しておきましょう。 AngularJSとは MEANスタックではフロント側のフレームワークとして、AngularJSを使用します。AngularJSとは、グーグルとユーザーコミュニティによって開発されているオープンソースソフトウエアのJavaScriptフレームワークです。2012年にバージョン
angularjs_array_checkbox_binding
プログラムの要件としては以下の通りです。 APIから上記のFruitsとUserを取得した結果に基づきビューを生成する。 User内のLikeFruitsはFruitsをマスタとしてチェックボックスを用いて更新する。 Userを受信した際にLikeFruitsに含まれていた値はチェック済みとする。 実装例 チェックボックスとのバインディング実装した例が以下になります。 Array Binding CheckBox 挙動としては以下のようになります。 チェック前 チェック後 チェックボックスと配列をバインディングする際に意識する点は二つあります。 一つはチェック状態をどのように評価するか。 もう一つはチェックのイベントでの挙動をどのようにするかです。 チェックの評価 今回の例ではチェックの評価は以下のように行っています。 <ul ng-repeat="(fruitId,fruitName)
AngularJSモダンプラクティス - Qiita
Help us understand the problem. What is going on with this article? こんにちは、@armorik83です。私のAngularJS歴は2年弱で、これまでAngularJSに関する記事はQiitaにたくさん書いてきました。例えば次のような記事です。 AngularJSアンチパターン集 2014.9 ここらでDirective Scopeの@=&をまとめておきたいと思う 2014.9 TypeScriptで書くAngularJSのMVC 2014.2 AngularJS Directiveの処理順を網羅してみた 2014.12 他にもニッチなものやイマイチだったものも含めてけっこうな数となってきました。また、こういった記事の縁で勉強会でも登壇させて頂きました。 モダンAngularJS 2014.12 GDG中国 TypeScr
AngularJSのDirectiveを理解する. - Qiita
はじめに ディレクティブは、AngularJSにおいて、ViewとModelの双方向バインドを実現するための根幹的な仕組みである。 ディレクティブは、開発者から見ると、Templateの要素・属性として現れる。 例えば、テキストボックスの入力値とscope.nameを紐付ける場合、Angularではhtmlに下記を記述するだけで、ユーザの入力値がscopeへ即時反映される。 上記コードの"ng-model"はAngularにデフォルトで組み込まれたディレクティブである。 もちろん、htmlの文法上は、ng-modelという名称の属性はinputタグには存在しない。Angularが独自にng-model属性を解釈して、双方向バインディングの機能を実現しているのである(Angularでは、これを「html文法の拡張」と呼んでいる)。 ディレクティブには、ng-repeatや{{...}}等、様
YEOMAN Advent Calendar 4日目：generator-angular を紹介します - albatrosary's blog
Webアプリケーションを作る入門的なジェネレータ generator-angular を紹介します。このエントリーは「YEOMAN Advent Calendar 2014」12月4日の記事です。 YEOMAN Advent Calendar 2014 - Adventar ジェネレータ generator-angular は AngularJS を利用するためのものです。 インストールから実行まで インストール いつものようにジェネレータをインストールしてプロジェクトディレクトリを作りyoとgruntの実行です。 $ npm install -g generator-angular $ mkdir angular && cd $_ $ yo angular $ grunt serve 途中聞いてくるオプションは Sassを利用するか? Bootstrapを利用するか? AngularJS
IEのAjax Cacheに注意 - Kazzzの日記
アプリケーションをデプロイした後、利用者から「リロードしてもデータが最新にならない」「更新したはずのデータが書き変わらない」というクレームを受けたので調べてみると以下のようなログが出ていた。 データの更新後、$location.path("/path")内部パスを変える処理を行っているのだが、パスを変えた後のGETリクエストが全てHTTP 204で返って来ていることが分かる。(後で調べるとと304の時もあった) 普段、開発とテストに使用しているChromeでは見たことが無いので、UAを調べると案の定IE(IE10、IE11)だった。 調べてみるとIE(少なくとも10と11)はAjaxのリクエストを勝手にキャッシュするようで、このログが表示されている間はサーバに全く問合せに行っていなかった。 この問題(IEだけのようだが)解決するにはHTMLのヘッダーのようにリクエストのヘッダを明示的にキャ
Angular.jsでvalue="初期値"を使いたいときは、ng-initを使いましょう - dai-yamashitaの日記
タイトル通り。。。 http://docs.angularjs.org/api/ng.directive:ngInit マニュアル良く読もうね！！俺。。。orz <input type="text" name="name" ng-model="name" value="<?- param ?>" ng-maxlength="5" required /> とかして、あれー。。。なんでー？？テンプレートエンジン使ってるから？とか意味もなく、悩んでました。 正解は、 <input type="text" name="name" ng-model="name" ng-init="name='<?- param ?>'" ng-maxlength="5" required /> ってすれば、テンプレートエンジンと組み合わせても全く問題ないですね！！
AngularJSで、時間のかかる通信の間にモーダルを使ってプログレスバーを表示する - ブログ - ワルブリックス株式会社
時間のかかる非同期通信を行っている間は、通信中であることをユーザーに知らせつつユーザーによる画面操作を禁止したほうが良いことがある。UI Bootstrapのモーダルとプログレスバーでこれを行う方法を示す モダンな Webアプリケーションはいわゆる Ajaxという方式でサーバと非同期で通信することで画面に表示するための情報を取得したりユーザーの入力をサーバに送信したりする。同期通信と異なり、非同期通信の場合は通信中もユーザーインターフェイスがユーザーと対話出来るため、通信中にユーザーが画面操作を行うことにより別のアクションを起こされては困る場合には特別の配慮が必要である。 例えば、クレジットカードの決済画面でユーザーが送信ボタンを押しサーバとの通信が行われている数秒の間に送信ボタンが再度押されたり、メニューを操作して別の画面に飛ばれたりしてしまっては困るといった具合だ。クレジットカード決済
Angularとの2年間 ー これからAngularを使う人への薦め | POSTD
判決： まあまあ（でもないか） 一体何の話なのか？ 私は2年間、Angularにのめり込んでいました。 それぞれの考えを持つさまざまなチームによる、10以上のAngularベースのプロジェクトを見守り、関わってきました。 1年目はフレームワークの採用、APIの変更、ドキュメントの改良、コミュニティの形成を注視して過ごし、徹底的に習得しました。 2年目は実務に全面的に携わり、チームメンバーの意見を聞きました。 私の意見は、 Angular.jsは大多数のプロジェクトには“まあまあ”だが、本格的なWeb アプリ開発には不十分である ということです。 “本格的なWebアプリ”とは？ “本格的なWebアプリ”というのは、長期の 保守が可能 で、最新の一般的なブラウザで 実行できる 、 スムーズなUX を備えた、 モバイルフレンドリー なアプリのことです。 専門家が開発したWebアプリは単なるアプリ
Angular.js入門 (5)ディレクティブ その2 - Qiita
前回: Angular.js入門 (4)ディレクティブ その1 DirectiveとControllerの連携 ディレクティブとコントローラとで値を共有したいときはどうすれば良いのでしょう？ 結論から言うとスコープを通じて渡してやれば良いです。 具体的には var app = angular.module("myApp", []); app.controller("AppCtrl", function ($scope) { $scope.alertTest = function() { alert("テストだよ！"); }; }); こんなコントローラの, alertTest関数をdirective内で使いたいとしましょう。コントローラAppCtrlのスコープ配下ではalertTestという関数が生きていることになるのでhtml側で以下のように記述します。 <!doctype html>
AngularJSを導入することと、恋のときめきと一歩踏み出す苦しみと。 - Wantedly Engineer Blog
春です。 こんにちは、春ですね。 いつから春なんだっけと思って、近くの人に聞いてみたら「花粉が飛んだら春」だそうです。 来てますね、春。 春には花粉以外にも、「ときめき」が飛び交います。 朝のあの子の挨拶だったり、最近通い始めたスタバの店員さんの笑顔、そして、 Angular.jsのUIバインディングのスマートさにときめきます。 「あの子と話せたらハッピーだろうな」、「うちのサイトのDOMもバリバリ動かしたらカッコいいだろうな」 とか春の陽気はポジティブな妄想を誘います。 ただ、その妄想を現実に落としこむは簡単なことではなく、冬までに降り積もったシガラミが邪魔をします。 中学時代に奇跡的にもらったラブレター、押入れに密かにしまわれているトレーディングカード、 そして、jQueryで書かれたコードだったりが邪魔します。でも、変わらなくちゃ手に入れられないものもあります。 AngularJSを
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
積極的に利用したい AngularJS グローバル API | DevelopersIO
本記事で使用している AngularJS のバージョン 1.2.16 フレームワークが提供している機能は積極的に使いたい AngularJS の標準モジュール (ng module) には、サービスやディレクティブといったメイン機能以外に、便利な関数群のコンポーネントが用意されています。 ng(core module) Global APIs https://docs.angularjs.org/api/ng#function AngularJS を利用している以上は、他所のライブラリやフレームワークを極力使わずに、依存性を減らしてアプリケーションの純度を高めたいと考えています。たとえば、真偽判定 ( オブジェクトの評価 ) や配列走査する場合においても、提供されている API を積極的に利用するよう心掛けたいものです。 というわけで、実際に利用している API をいくつか紹介したいと思い
AngularJSではjQueryを使わない - The Round
注：古い記事の為、内容が最新ではない可能性がありますm(＿ ＿)m AngularJSではjQueryを使わない どうもマツウラです。 AngularJSでjQueryプラグインを使う方法を調べました。 結論から書くとなるべくdirectiveで書きなおして下さい、ということです。 プラグインをそのまま使いたい気持ちはありますが、理由があるんです。 まず、AngularJSで使う方法をみてみます。 プラグインが適用されない。 directiveのlink関数に書く。 .directive('myDirective', function() { return { link: { post: function(scope, element, attr) { //... } } } }) 動的に生成されたDOMに対してプラグインが適用されない。 $timeoutを使う。 $timeout(fun
AngularJSでng-repeat時の生成内容を分岐させたい
つまり var items = [ {type : 'A'}, {type : 'B'}, {type : 'A'}, {type : 'A'}, {type : 'A'}, {type : 'B'}, {type : 'B'} ]; を ng-repeat 越しに <ul> <li ng-repeat="item in items">Aな感じの内容物</li> <li ng-repeat="item in items">Bな感じの内容物</li> <li ng-repeat="item in items">Aな感じの内容物</li> <li ng-repeat="item in items">Aな感じの内容物</li> <li ng-repeat="item in items">Aな感じの内容物</li> <li ng-repeat="item in items">Bな感じの内容物</l
Angular directives for Bootstrap
UI Bootstrap Bootstrap components written in pure AngularJS by the AngularUI Team Code on Github Download (2.5.0) Create a Build Angular 2 For Angular 2 support, check out ng-bootstrap , created by the UI Bootstrap team. Dependencies This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is re
AngularJSではじめるHTML5開発 – Part1 Getting Started at nkjmkzk.net
これから数回に分けてAngularJSでHTML5アプリを開発していきたいと思います。 開発環境は最高のHTML5プラットフォームであるForce.comですが、Force.comおよびAngularJSをまったく使ったことがない開発者の方々でも試せることを前提にした内容です。 ただし一点、一応IE以外で検証ください。 今回は最初の最初、ゼロからはじめてForce.com上でAngularJSが動くまでを解説していきます。 まずこのPart1で開発する部分をデモでみてみましょう。 デモ それでは実装へ。 開発組織の入手 Force.comの開発環境は「Developer Edition」と呼ばれ、誰でも、いくつでも、いつまででも無料です。さらに本番環境で利用できるほぼすべての機能が利用できます。なんということでしょう。 ということで、まずは下記のサイトからこのDeveloper Editi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
porkbun.com | expired domain
angular-js.net