せっかくIntelliJ IDEA Ultimateを購入したなら、いろいろ使わないと勿体ないね! ということで、AngularJS開発で試します。 IntelliJ IDEA 13、このようにAngularJSの、シンタックスハイライト、コード補完、引数補完、コードジェネレータなどに対応しています!しかも軽快に動作し、重いと感じることは全くありません。 IDEAが提供するコード補完についてはこのあたりを参照下さい。 ※私はIntelliJIDEAビギナーです。変な説明や誤解があるかもしれません。是非ツッコミお願いします。 インストール 以下の2つをインストールしました。 AngularJSプラグイン ng-*属性やブラケットのサポート、入力補完を利用したCDNからの読み込みやmoduleの定義などよく使うコードを数文字のショートカットで生成できるコードジェネレータなどが利用できるようにな
「Angularの資料で何か良いものは?」と聞かれることが多くなってきましたので、そしてAngular資料探しの手間を省くためにも、いつも使っているサイトリンクをまとめます。良い資料があったらこのブログを更新します。読む目安が欲しいというお話がありましたので「★」を付けます。「★」の付いてないものは必要に応じて目を通すと良いのではと思います(あくまでも目安です)。 ★ : まず読みましょう ★★ : 少し慣れたら読もう ★★★ :仕事で使うよ 学習順は YEOMANでAngularをインストールし触りながら Angular本家を見つつ Angular Style GuideやNinjaで理解を深める でしょうか(学び方は人それぞれですので)。何れにしても手を動かすのが最良です。 Angular 2 Angular is a development platform for building
はじめに このブログに記載されている、AngularJSのController As記法をめぐる考察が興味深い。 Alex Ford氏という方が著者なのだが、原文を読むと、 元々は http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/ にて、「AngularJSのController As記法は最近のトレンドだけど、一種のSyntax Sugarだし、最終的には好みで決めたら?」的なエントリに対して、「いやいや、Controller Asは只のSyntax Sugarじゃないぜ」とAlex氏がController Asの優位性を示している流れ。 Controller As記法 AngularJS 1.1.xでは、Controllerで、scopeの設定を行い、Viewとなるht
この記事を三行にまとめると AngularJSのソートやフィルタリングをやってみるっすよー。 何かソートやフィルタリングが効かないことがあるっすよー。 画像はMVCの人文字です。 AngularJSっていうjavascriptのMVCフレームワークがありまして……これがなかなか便利なので、僕も最近使っているんですが、いまいち使い慣れてないこともあって、意外に簡単なことでつまづいたりしている毎日です。 AngularJS 今日はその中でも、たぶんAngularJSを使う上で、かなり頻繁に使われる機能なんじゃないかと思われる『ng-repeat』のフィルタリングやソートについて。 一言で言うと、これが効かない場合があるような気がするんですよ。や、僕の考え方とかやり方が間違ってただけなら、遠慮なくつっこんでもらえればと思うんですが。 一応、まずは基本的な使い方から ぶっちゃけ、AngularJS
<li ng-repeat="match in matches" ng-class="{active: isActive($index)}" ng-mouseenter="selectActive($index)"> UI Bootstrap の Typeahead から抜き出したコードで、マウスホバーされた行のインデックスを active で保持し、ng-class ではisActiveで boolean を返す isActive を指定していて、ホバー行ではclass="ng-scope active"となり、その他の行ではclass="ng-scope"となるような指定になっている。 ちなみに、$indexは ng-repeat で利用できるインデックス(0..length-1)で、ng-scopeは scope ができる要素に AngularJS が自動的に付けてる class。
はじめに AngularJS UI BootstrapにはBootstrapが用いられているため、 下記のGrid systemをそのまま使う事が可能です。 CSS · Bootstrap 実装例 サンプルとしては、弊社ブログのFeedを用いました。 radiant-meadow-2447.herokuapp.com/#/rwdfix AngularJS Generatorで雛形を作成する際に、 AngularJS UI Bootstrapを用いる事で既にCSSも取り込まれます。 表示部分に関する実装は以下になります。 <div class="container-fluid"> <div class="row"> <div ng-repeat="entry in feed.entries" ng-if="$index % 3 === 0"> <section class="col-xs-1
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 ディレクティブを付けたタグの中
TOPICS Web , JavaScript 発行年月日 2014年04月 PRINT LENGTH 220 ISBN 978-4-87311-667-9 原書 AngularJS FORMAT PDF EPUB Web開発者にいま最も支持されているJavaScript MVCフレームワーク「AngularJS」の解説書。定型的な単純作業が繰り返されがちなWeb開発をよりシンプルで楽しいものにしようというのがAngularJSの試みです。本書ではまずAngularJSアプリケーションの構成要素を押さえた上で、AngularJSアプリケーションの開発、テスト、実行手順を解説します。サーバ通信のAPIや考慮するべき点、ディレクティブの仕組みについて解説し、最後にAngularJSのさまざまな活用例を紹介します。GoogleがサポートするAngularJSには、開発メンバーがGoogleのメー
今日はAngularJSで一覧ページを作ってみました 動いているのは、以下のページ AngularJS sample ちょっと、データが適当過ぎて、なんのこっちゃ分からん感がすごいですが、DBから取得したデータを表示しています 登録しているデータは以下のエントリーで作ったFormで登録したデータ AngularJSで連動して動くコンボボックスを作る Part 1 - SinDiary まずはソース一覧を列挙して、ちょっとずつ解説をしていきます index.html <!DOCTYPE html> <html lang="ja" ng-app="sample"> <head> <meta charset="utf-8"> <title>AngularJS sample</title> <meta name="description" content=""> <meta name="autho
長文注意。 angularjsについて今更ながらに触り始めて色々と感動したので纏めておく。 angularjsがどういったフレームワークかは公式のチュートリアルを眺めてたらぼんやりと把握できると思うので今回その辺の話はあまり触れない。 http://angularjs.org/ angularjsのAPIについては公式のドキュメント含めて様々なメディアやブログに取り上げられているが、導入から体系的に語られてるものはあまり無い印象だったので、僕のブログでは導入から具体的な目的に沿った実装方法を紹介していこうと思う。 ちなみに自分のangularjsへの理解も触り始めて一週間程度なのでだいぶ甘い。 angularjsを一週間やってみた感想 最初の2日くらいがだいぶつらい。 飲み込みが早い人ならすぐに使いこなすのかもしれないが、angularjsはdirective, controller, f
AngularJSはGoogle社が開発しているJavaScriptのMVCフレームワークです。Webの技術を使うMonacaでももちろん使うことができます。また、jQueryなどの他のライブラリと併用することもできます。MVCとはModel(モデル)、View(ビュー)、Controller(コントローラー)の略称でありそれぞれのコンポーネントにアプリケーション中の役割を分割する思想、手法です。 Model:アプリケーション内で使うデータ構造。 View:マークアップなどアプリケーションのユーザーの実際に目にするもの。 Controller:アプリ内で使うデータを操作するコンポーネントであり、ModelとViewを操作するもの。 AngularJSのMVCに関して本家ドキュメントへのリンクを貼っておきますので、詳しくはこちらを参照してください。 Model View Controller
Angular, Ember, Backbone:どのJavaScriptフレームワークを選ぶべきか? JavaScriptフレームワークの選択は、開発者の好みよりもプロジェクトとの相性が大切だ。 JavaScriptベースのアプリケーションやウェブサイトのアイデアを思いついたとして、次にしなければならないのが正しいオープンソース・フレームワークを選ぶことだ。 この記事を読んでいるということは、あなたはまだ初心者や見習いの開発者かもしれない。あるいは自分のアイデアの開発を外部に委託しようと考えているのかもしれない。Angular、Ember、Backboneの名前ぐらいは聞いたことがあるかもしれないが、それらがどういったもので、なぜそれらがウェブ開発の助けになるかについてまでは知らないかもしれない。 開発者はJavaScriptを様々なウェブ・アプリケーションに使用している。それはJa
2013年11月05日10:36 JavaScript 勉強会 今、AngularJSというフレームワークがヤバい 先週の土曜日、ランサーズさんで行われた 第3弾 週末ランサーズ に参加して個人的に今アツい AngularJS について話してきました。 AngularJS は ng-repeat が便利だったり、コードの見通しが良くなるなどいろいろなメリットがあると思うのでうまく使えば大変メリットがあると思います。特に、データの状態(要素の追加・削除や、状態のon/off など)を制御すればそれに合わせて view の表示はすべて AngularJS がやってくれるというのは素晴らしいですね。 ちなみに、以下の資料の中で ng-app とか ng-repeat とか出てきますが(これは directive と呼ばれます)、この ng というのは AngularJS の2文字目と3文字目を表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く