##はじめに AngularJS(1.4系)を使い始めて、すごいなーと思ったので(小並感) 簡単なところを共有して感動できたらいいなーと思います。 この記事はAngularJS触ったことない人・一応聞いたことあるよ みたいな人向けの記事です。 公式ドキュメントがしっかりしてるので、それ読むのがいいと思うんですが 実際に感動してもらえたら、それが一番いいと思ってるので それを目当てに書きます。 ##下準備 マイナーverが違うとここら辺が違うので注意が必要。 今回は1.4系を想定してます。 <html ng-app="MyApp"><!--このタグの中でangularJS使うよっていう感じ --> <head> <meta charset="utf-8"><!--いつも通りの文字コード --> <script src="js/lib/angular.min.js"></script><!--
ニジボックスAdvent Calendar 2015 6日目の記事です。 AngularJSを触り始めてから3ヶ月。Javascriptもちょっとしかわからなかったのでいろいろと行き当たりばったりでした。 自分的に最初に知っておけば良かったこととTipsみたいなものをまとめたのはこの記事です。3ヶ月の初心者なので、気になるところかここ間違ってるよとかここ日本語変だよなどがありましたら遠慮なく突っ込んでください。 ざっくり書いてます。大体どこでもある情報を書いてるのでご了承ください。 AngularJSは MVWパターンのフレームワーク MVW = Model-View-Whatever AngularJSの開発者は「MVについて議論するのは時間の無駄だから、そんな暇があったらコードを書け。MVの*の部分なんて"Whatever"でいいんだ。」という主張のようです。1 主の特徴 DI(依存性
集合データをjs同様AngularJSでも数え上げることができる オブジェクトデータ AngularJSでは、主に ディレクティブ ファンクション というコンポーネントが用意されています。 forEach という関数を利用することでオブジェクトデータや配列といったリスト形式のデータ構造の各要素を数え上げながら処理をすることができます。 オブジェクトデータを純粋なjavascriptで列挙する場合は var objectData = { title: "apple", color: "red", seed: true }; for (var index in objectData) { console.log(index + " / " + objectData[index]); } forを利用して繰り返し処理することができます。上の方法と同じことをAngularJSで下のように書くことが
已通过安全加密检测 如果没有自动跳转,请点击下方按钮前往 点击进入购彩中心360安全卫士提供技术支持 Copyright ? 1998 -2020. All Rights Reserved.
(AngularJS1.2.0) 問題 'use strict'; angular.module('sampleApp') .controller('MainCtrl', function ($scope) { $scope.books = []; $.getJSON('api/books/', function(json) { var _data = json.results; var _datum; for (var i = 0; i < _data.length; i++) { _datum = _data[i]; $scope.books.push({name: _datum.name, comment: _datum.comment}); } }); }); for の中では取れてるのにhtmlで表示させようとすると $scope.books が [空] になってる 解決 $ap
マスターのリポジトリはGitHubで、Code exampleも付属しています。 https://github.com/higuma/angularjs-note AngularJS 学習ノート (2014-07-29 .. 2014-08-29) AngularJSの学習開始から終了までの記録ノートです。Code example(Jade + CoffeeScript + Sassに書き換えたもの)は本リポジトリのsrc/ディレクトリにあります。生成ファイルはpublic/です(一部のファイルはローカルサーバからの立ち上げが必要)。 はじめに まずは勉強用のドキュメントを探す必要があるが、オフィシャルWebサイトのドキュメントが充実している場合はそれを読むのが一番だと思う。 (少し前にTwitter Bootstrapを勉強した時もそうだったが)公式オンラインドキュメントが充実しているな
<!--書き方メモ--> <ul ng-repeat="item in contents"> <li ng-class="{'適用したいclass名': 条件式 }">{{item.text}}</li> </ul> <!-- valueがbadのものだけclass="blue"を適用 --> <ul ng-repeat="item in contents"> <li ng-class="{'blue': item.value == 'bad'}">{{item.text}}</li> </ul> <!-- indexが奇数の要素は非表示、あと他のclassも併用 #そんなに出番ない --> <ul ng-repeat="item in contents"> <li ng-class="{'hidden': !($index%2 == 0)}" class="blue">{{item.te
先日にはてブのホットエントリになってたこの記事(Promises: ブラウザーJavaScriptの新しい非同期標準になるか?)をみるに、APIアクセスの場合は promises を使わないと、APIの応答が遅い場合に結果が取得できないし、またAPIの結果が返ってくるまでユーザを待たせてしまうことになります。 というわけで、AngularJS でAPIの結果を非同期で取得して画面を更新する、というデモを作ってみました(応答が遅いAPIを模するために、1秒のウェイトを擬似的にいれてます)。 デモはこちら⇒http://hkusu.github.io/AngularJS_apicall_demo3 下記にソースの説明をします。 ※ 私のJavaScriptの経験はまだ浅いので、おかしなところがあったら教えてください^^; ① ソースツリーのWEB公開領域に、適当にJSONファイルを用意
consoleではUncaught TypeError: Cannot read property '$apply' of undefined となってしまいAngularJSが使えません。 このようなissueも結構上がっています。 https://github.com/angular/angularjs-batarang/issues/207 代わりはないものかと探していたら「ng-inspector」というようなものを見つけました。 ng-inspector 特徴的なのはChromeだけでなくSafari Extentionも提供されていることです。(Firefox版も開発中) 使い方は簡単で、導入したらAngularJSを使ってるページでツールバーのボタンを押すだけ。 適当なサンプル・アプリケーションで試すとこんな感じ。 http://todomvc.com/examples/an
WEBサービス作るにはサーバのAPIと連携しないと意味ないよねってことで、勉強がてら作成してみたメモです。 [2014/3/15追記] この例はHTMLページとAPIが同一サーバの場合です。APIが別サーバの場合は、JSONPを利用する必要があります。 [2014/4/13追記] 非同期での通信や、応答に時間がかかるAPIなどを考えると、ngResource を利用した方が良いみたいです。続編を書いたのでこちらを参照 ⇒ AngularJS でAPIをコールし結果を取得するサンプル② [2014/5/11追記] さらに続編を書いたのでこちらを参照 ⇒ AngularJSでAPIをコールし非同期で画面を更新する 作成したデモページ [API発行]ボタンを押すと、APIコールでJSONファイルを取得して結果をTABLEに表示します。 http://hkusu.github.io/Angular
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く