AngularJSとRailsの丁度良い関係を探る | mah365
AngularJSとRailsのインテグレーションと言うと、やれ「RailsはAPIに専念してビューは全部AngularJSだ！」という極端な話になりがちな気がするのですが、それだとRailsの良いところが活かせませんよね。AngularJSの持ち味はDOM操作三昧で複雑になりがちな画面を良い感じにコーディングできるところにあると思うので、そういう画面でだけAngularJSを使ってはどうか？というのが今回のアイデアです。 丁度良い感じに使う そういう訳で今回作ったサンプルのアプリとソースコードがこちらになります。 https://todo-rails-sample.herokuapp.com/ https://github.com/mahm/todo-rails/ ユーザー認証はふっつーにdeviseを使って、Todoを編集する画面だけAngularJSを利用している、という感じのサンプ
姿を現した！次世代JSフレームワークAngularJS2.0アルファ版を試してみた！ -
こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 AngularJSは、最も有名なフルスタックJavaScriptフレームワークで、『paiza.IO』でも使っていますが、現在次期バージョンAngularJS Ver2.0の開発が進められています。 そして、先日アメリカで開かれたAngularJSカンファレンスng-confで、待望のAngularJS2.0のアルファ版についての発表と、AngularJS2.0専用サイト http://angular.io/ の発表がありました。 AngularJS2.0公式サイト AngularJS2.0では、Angular1.0と比べて以下のような大きな変更が加えられています。 次世代JavaScript規格、ECMAScript6(ES6)の取り込み。(ポリフィルを用いることで現状のES5でも動作) JavaScriptを
Angular 2.0 - ワザノバ | wazanova
http://blog.angularjs.org/2014/03/angular-20.html 1 comment | 0 points | by noto ■ comment by noto | 約1時間前 クライアントサイドの JavaScript フレームワークである AngularJS の公式ブログで Angular 2.0 の実装が始まったことがアナウンスされ、設計に関しての考え方、なぜ変更しようとしているか、詳細な変更点などについて述べてられています。Angular のもともと持っている特徴もおさえつつ説明されているので、Angular の復習にも良さそうです。 Angular 2 は mobile apps のためのフレームワーク (デスクトップにも利用できる)。data-binding、extensible (拡張可能な) HTML、テストのしやすさの重視については変
AngularJSのOne-time Bindingを使ってパフォーマンス改善をしよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。 先日ng-japanにスポンサー企業として参加してきました、先生です。 本日は、すごくマジメに資料を作ったのに爆笑に包まれてしまったLTで発表した内容を、整理してお送りします。なぜ爆笑されたかについてはここでは語りませんので、直接聞くか動画をご覧ください。 One-time Bindingとは 「バインディングを1度しか評価しないようにする機能」です。 通常のバインディングは値が変更されると画面の値も変更されますが、One-time Bindingを使うと描画された以降は再評価されなくなります。 サンプルで実際の動作を見てみましょう。 One-time Bindingのシンプルな例 ソースは至ってシンプルです。 <div id="demo" ng-controller="RootCtrl"> <div>{{count}}</div><!-- いつものバインディング --
How does data binding work in AngularJS?
How does data binding work in the AngularJS framework? I haven't found technical details on their site. It's more or less clear how it works when data is propagated from view to model. But how does AngularJS track changes of model properties without setters and getters? I found that there are JavaScript watchers that may do this work. But they are not supported in Internet Explorer 6 and Internet
ngTagsInput - Tags input directive for AngularJS
Try it yourself! Check out the demos page to see more examples. What is a tags input? A tags input is an input box that automatically creates tags – also called tokens – out of typed text every time a certain key is pressed. It's useful for tagging and highlighting information right on the input box. What is ngTagsInput? ngTagsInput is a highly customizable tags input directive built for the Angul
業務で安心して使える厳選AngularJSモジュール8選＋α | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近AngularJSとずっとにらめっこしています。やっていて楽しいです。 こんにちは、先生です。 最近はAngularJSとばかり遊んでおり、さまざまなモジュールを入れては消しを繰り返しています。もちろんそれらのモジュールの中には、対応していないブラウザや端末があったり、一部環境では正常に動作しないなどの不具合を持つものも多くありました。 そこで本日は、数あるモジュールの中でも安心して業務で使えたモジュールについて紹介していきたいと思います。 2014年11月現在でのライセンスも明記していますので参考にしてください。 安心して使えたモジュール8選 1. Angular directives for Bootstrap http://angular-ui.github.io/bootstrap/ MIT License Bootstrapをディレクティブにしているモジュールです。 元々のB
AngularJSで作成したシングルページアプリケーションをGoogleアナリティクスでトラッキングさせる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
10月から引き続きAngularJSな日々を送っている先生です。 今回はAngularJSで作ったシングルページアプリケーション（以下SPA）をGoogle Analyticsでトラッキングさせたいと思います。 SPAでのトラッキング問題 Google Analyticsは、タグを埋め込むだけで勝手にトラッキングしてくれる手軽な解析ツールです。しかしAjaxやpushStateなどページ遷移を伴わないSPAでは、トップページしか解析されません。Analyticsではその対策として、任意のタイミングでトラッキングすることができる仕組みを持っています。 // ページビュー ga('send', 'pageview'); // イベントトラッキング ga('send', 'event', 'image1', 'clicked'); 参考：高度な設定 – ウェブ トラッキング（analytics.
ionic でリッチなモバイルWEBサイトを実現する《AngularJS Advent Calendar 2014》 - Qiita
これは AngularJS Advent Calendar 2014 の２４日目(12/24)の投稿です。クリスマス・イブですね。 ionic は 公式ページ で紹介されているとおり、モバイル向けの AngularJS ベースの CSS/JavaScript ライブラリです。（要は Bootstrap 的なものと思ってもらえれば。） Cordova と連携して、ネィティブアプリにパッケージできます。WebStorm をお使いの方は、バージョン９の更新情報で、ionic がサポートされた、というのをご存知かと思います。 この ionic ですが、アプリにパッケージしなくても、この CSS/JavaScript ライブラリを モバイル向けWEBサイト の用途として利用するのもいいんじゃないか、と思っています。もしくはネィティブアプリの一部機能を、ionic で作って、アプリの WebView
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
こんにちは@armorik83です。 この記事はAngularJS Advent Calendar 2014の2日目として書かれたものです。AngularJSは好きと嫌いの両方を2度くらい経て、今は愛に近い。 AngularJSは現在1.3がリリースされていますが、2014年10月のng-europeにて2.0系のビジョンが示されました。リリース時期は未定ですが、AngularJS 1.x系で指摘された多くの問題点、開発チームの反省が活かされた次世代のAngularになるとされ、期待が大きいです。 その中で2.0系ではControllerが無くなるという気になる情報がありました。正確にはコントローラ自体が無くなるのではなくng-controllerが整理されるとの様子ですが、この代替として、Directiveを中心としていく方針が掲げられています。 今からDirectiveに親しんでおく
AngularJSで「サービス」を構築するときの service と factory - kitak blog
こんにちは。ジャンキーなものが食べたい、きたけーです。 AngularJSでは、アプリ内で共通な値やロジックをまとめたものを「サービス」と呼んでいますが、それを定義する service と factory が紛らわしかったのでメモ。 どちらもシングルトンオブジェクト AngularJSのサービスは基本的にシングルトンオブジェクトで、service、factory で定義したどちらのサービスもシングルトンオブジェクトです。 factoryという名前で、「DIでコントローラに注入されるたびにオブジェクトが生成されるのでは？」とか思っちゃうけどそういうわけではない。 違いは？ factory の場合は、第二引数の関数が返した値をシングルトンオブジェクトとして扱う。(ただの数値とか文字列の場合は value とか const みたいなのもある) service の場合は、第二引数の関数をコンストラ
AngularJSのカスタムディレクティブのlinkとcontrollerの使い分け - kitak blog
こんにちは。パンをたべました、きたけーです。 AngularJSのカスタムディレクティブをつくろうとして、悩むのがlinkとcontrollerの使い分けです。どちらもスコープや要素を操作して、ディレクティブの挙動を決めることができます。 この使い分けに関してはAngularの公式ドキュメントに指針が書いてあって( https://docs.angularjs.org/guide/directive )、 Best Practice: use controller when you want to expose an API to other directives. Otherwise use link. (他のディレクティブに対してAPIを公開したい場合にはcontroller、そうじゃなかったらlinkをつかう) とあります。 記事のタグの編集の具体例でみてみます。 (コードはCoff
AngularJS: "Controller as" or "$scope"?
I just finished reading a blog post by John Papa. He talks about the trend of using Controller as someName instead of injecting $scope into your controller. I wanted to expound on his point, but first let's demonstrate this technique for those of you who haven't heard of it yet. It's a pretty simple feature, but I think it has even more useful implications than what John covered. Traditionally you
Protractor × CoffeeScript × AngularJS （導入編） - Qiita
npm install --save-dev coffee-script npm install --save-dev protractor npm install --save-dev grunt-protractor-runner npm install --save-dev protractor-coffee-preprocessor npm install --save-dev grunt-exec coffee-script CoffeeScript のコンパイラ はじめ -g で入れていたのだがプロジェクトの中に入れないと使えなかった protractor angularJS 御用達の E2E テストフレームワーク selenium を angularJS プロジェクトで使えるようによしなにカスタマイズしている grunt-protractor-runner protracto
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
イベント駆動AngularJS / 今から書くAngular 2.0
AngularJSのOne Time Binding使用例 - Qiita
AngularUI for AngularJS
GitHub - johnpapa/angular-styleguide: Angular Style Guide: A starting point for Angular development teams to provide consistency through good practices.
AngularJSの$scopeをController as で置き換えるべき理由 - Qiita
