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
対象読者 jQueryなどを使っているJavaScript開発者 JavaScriptを使った複数人でのプロジェクトに参加している方 JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方 必要な環境 この記事では、AngularJSを使用し、Chrome（36.0）、IE11、Firefox（31.0）、Safari（7.0.5）の環境で確認を行っています。 サンプルアプリケーションの概要 今回作成するアプリケーションは、単純な「タスク管理」のアプリケーションです。次のような3つの画面を作ります。 タスク（件名とメモ）を登録する画面 登録したタスク一覧を表示する画面 登録したタスクを参照する画面と、削除する為の画面 ページ遷移はシングルページアプリケーション形式で作成します。シングルページアプリケーションとは、jQuery Mobileなどでも使われている方式であ
忙しくない人は、公式のチュートリアルを頭から全部やると良いです。めんどくさくてそっちはやってないので分かりません。 とりあえずここを開いてジャッヴァスクリプトを眺める モジュールについて 基本中の基本。特に推奨セットアップのところを見ておけば良い。 DI(依存性注入)について こっちを読んだ方が幸せになれるかも。 どんなサンプルを読むにあたっても、DI の仕組みを知ってないと辛くなる。仕組み自体はよくできているが取っつきづらい。 特に 引数名で渡される実体が変わる 部分は慣れるまで気持ち悪い気がするし、ぼくは気持ち悪い。もっと言うと、minify した場合などで変数名が変わると動作しなくなるため基本的には変数名を指定して、実体を捕捉する必要がある。 var sampleApp = angular.module('sampleApp', []); /** たとえば、Controller で
いま流行りのAngular.jsのサンプルです。 参考：AngularJS Twitter Search - YouTube この動画で、TwitterのSerach APIを使ったサンプルが紹介されてました。 ブコメを見て気付きましたが、いまこのサンプル動きません。 1年で動かなくなるなんて・・・！ Angular.js 前にHandlebars.jsを使って、jQueryでTwitter APIを叩くサンプルを作ったんですけど、それより簡単に書けます。 参考：Handlebars.jsとTwitter Search APIを使ったサンプル - console.lealog(); とは言えHtml的になんだか気持ち悪い書き方になるのはどうにかならんのか・・・。 Html <!DOCTYPE html> <html ng-app="Twitter"> <script src="http:/
先日の記事でAngularJSのfilter機能について紹介しましたが、 その中で「filter」というfilter（わかりにくい)がけっこう便利で、簡易な検索機能が簡単にできる代物です。 まずは公式のＡＰＩリファレンスを見てみてください。 これを使ってみると、「特定の項目だけのフィルターをかけたい」とか、「否定の条件でフィルターをかけたい」とか、「nullの項目を表示したい」とか思うはずです。 それについてサンプルを作ってみたので、紹介します。 動作サンプルはこちら 不等号演算子は’!’ けっこう詰まったのですがFilterで「項目!=検索値」に該当するものだけを取得するには、検索値の前に’!'を付けます。 ここで注意なのは’!’は検索値の文字列として入力しないといけません。 ○ ⇒< friend in friends |filter:検索項目='!検索値'> ○ ⇒< frien
JavaScriptとHTMLの分離 通常、JavaScript を使ってHTML を動的に変更する場合は、DOM（Document Object Model）を直接操作して行います。JavaScriptでどのDOMかを直接指定することになるため、JavaScript上でのDOMへの依存が強くなってしまいます。Angular.js は、記述しているHTMLをそのままテンプレートとして活用します。HTML とJavaScript の関係性は、HTMLの属性指定とJavaScript でのマッピングで行うため、DOMの直接指定は行いません。そのため、DOMとJavaScriptの依存が少なくなり、コード量も少なくなった結果、シンプルで役割分担が明快になります。 基本的な機能 テンプレートエンジンとしての機能に加え、Web アプリケーションで扱う基本的な機能も揃っています。これらを使用することで
先週＆今週は、出張でアメリカ西海岸。そんな折、先週の金曜日（16日）の夜に BayJax meetup が Yahoo! 本社で開催されるということで、参加してきました。 BayJaxは、シリコンバレー地区のAjax & Javascriptに関するMeetUp。大体、半年おきに開催されているようです。今回参加したMeetUpの形態は、Conference形式（勉強会ののりに近い）。日本との勉強会との違いは、最初にピザを食べてお腹が満たされたところで勉強会が始まることと（こっちの考え方の方が、確かにリーズナブル）、質問が活発なこと（海外では一般的なことですが）。とても、楽しい時間を過ごすことが出来ました。 その中で講演された AngularJS について、今回は紹介します。 AngularJS AngularJSは、とてもシンプルにWeb Appを書くことができる軽量な MVC フレームワ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
