以前投稿したAngularJSとRailsの丁度良い関係を探るという記事のコード解説編です。前回はざっくりとしたアーキテクチャの紹介のみにとどめていたので、このエントリでサンプルコードの詳細について解説します。 バージョン情報 ruby 2.1.3 rails 4.1.7 devise 3.2.4 angularjs 1.3.2 ディレクトリ構造 app以下のディレクトリ構造は以下のような形です。 app ├── assets │ ├── images │ ├── javascripts │ │ ├── app │ │ │ └── tasks │ │ │ ├── tasks.controller.js.erb │ │ │ ├── tasks.html.erb │ │ │ ├── tasks.js.erb │ │ │
Authentication with Rails, Devise and AngularJS 08 Aug 2013 I recently started building a Rails driven web app and decided to use Devise for authentication. This would be pretty straight forward to implement but I planned to use AngularJS to power the front-end and decided to only use Rails as a JSON API. Getting down to development on that path, I quickly ran into some problems structuring Angula
twitter上ではもう宣伝していますが、SelfieGirlをリリースしました。 SelfieGirlは、twitter上で話題になっている#グラドル自画撮り部のハッシュタグを元に検索して、スマートフォンで見やすいように整形したWebサービスです。Androidアプリはちょこちょこ出ているようなので、Androidじゃなくて別の方法でやってみようかなと思っていました。 SelfieGirlを作っている技術は以下になります。 Ruby on Rails Ruby製フルスタックフレームワーク AngularJS JavaScript MVCフレームワーク ionic framework AngularJSを前提にしたスマートフォン用に最適化されたhtml5フレームワーク heroku Ruby on Railsを簡単にデプロイできるPaaS。様々な言語をサポートしている。 oauth.io
#tqrk07でのLTの一部です。 AngularJSとRailsを組み合わせてWEBアプリケーションを作りたい人のために書きました。 AnuglarJSをどのようにして管理するか Bundler Railsの中でAngularJSを扱います。 そのための準備は gem 'angularjs-rails' これだけです。 この時の主従関係は Rails が主であり、AngularJS が従であると言えます。 普段と同じように jsファイルは assets 以下に配置するので、Railsに元々備わっている asset pipeline が有効です。 Googleで"AngularJS Rails"と検索すると、こちらのやり方ばかり引っかかるので恐らくBundlerで管理するのがポピュラーなんだと思います。 ちなみに、 egghead.io では、bower-railsを使ってAngularJ
AngularJSとRailsのインテグレーションと言うと、やれ「RailsはAPIに専念してビューは全部AngularJSだ！」という極端な話になりがちな気がするのですが、それだとRailsの良いところが活かせませんよね。AngularJSの持ち味はDOM操作三昧で複雑になりがちな画面を良い感じにコーディングできるところにあると思うので、そういう画面でだけAngularJSを使ってはどうか？というのが今回のアイデアです。 丁度良い感じに使う そういう訳で今回作ったサンプルのアプリとソースコードがこちらになります。 https://todo-rails-sample.herokuapp.com/ https://github.com/mahm/todo-rails/ ユーザー認証はふっつーにdeviseを使って、Todoを編集する画面だけAngularJSを利用している、という感じのサンプ
Fernando Villalobos Fernando Villalobos is a Rails Agile Development expert and certified SCRUM developer who has used this methodology for building high-performance apps for the past eight years. Fernando is also the organizer of Oaxaca, Mexico's Ruby User Group. 1 Introduction In this article we are going to explore two popular MV* JavaScript frameworks: AngularJS and Ember.js. This time we are
How to Set Up Authentication with AngularJS and Ruby on Rails Jason Swett Jason Swett is author of AngularOnRails.com, AngularJS mentor at Thinkful, and principal of AngularJS/Rails consultancy Ben Franklin Labs. 1 Introduction 1.1 Who This Tutorial Is For Since Rails is old and AngularJS is new (relatively of course), I'm assuming there will be a lot more Rails developers interested in adding Ang
ネットでRails x AngularJSで調べると、AssetsにAngularJSを追加してやるのが普通的なことをよく見る。でも、この方法だとYeomanや、Grunt.jsが使えず、Rails x AngularJSでKarmaでテストを書いたりといったことができないし、AngularJSの作法にのっとった開発ができないのがとてもモヤモヤしていた。 てことで、もうこれはAsset Pipelineを使わない方向で行くのがベストなんじゃないのか、という方向で色々探し回っていたら、同じようなことを考えていた方がいたようで,これを参考にしてもっとベーシックな枠組みを作ってみた。 Asset Pipeline の機能が使えなくなる？ご心配なく。Grunt.jsがJSコードの圧縮、SCSS, CoffeeScriptのコンパイル、さらにLiveloadの恩恵, 画像の圧縮、テストの自動実行もで
Rails で AngularJS を使おうと思っていたけど、 ファイルをダウンロードして vendor/assets に直接配置するのは管理が面倒 AngularJS をラップした gem は AngularJS 本体がバージョンアップしたとき対応するまでタイムラグがある そもそも angular-gem や angular-rails や angularjs-rails-resource など乱立してるし Bower で AngularJS を管理するのがいいかも Bower を動かすために Node が必須なので、Heroku デプロイ時に AngularJS をインストールできない カスタム Buildpack を作れば可能だけど、アプリの本質ではないので労力をかけたくない。 という紆余曲折を経て、『Rails Assets』を使ってみることにした。 Rails Assets Ra
はじめに AngularJSが持っているValidationを使い、クライアント側での入力値の検証を実装してみました。 具体的には、前回まで作成したアプリの登録画面(new.html.erb)に以下の検証機能を追加しました。 ・入力必須チェック ・最大文字数チェック ・正規表現による数値チェック(小数点可) ・検証がOKの場合のみCreateボタンを押下可とする 以下にポイントとなる点を記述したいと思います。 実装について 1.new.html.erb まず最初にソースコードを載せておきます。 <h1>Whiskies#new</h1> <div ng-controller="WhiskiesNewCtrl"> <form name="form"> <div>Name</div> <div> <input type="text" ng-model="name" name="name" re
t.hondaです。AngularJSとRailsの勉強がてら、CRUD機能を持つサンプルプログラムを作ってみました。 ウィスキーの名前と価格を、登録して表示するアプリです。 先ずは開発するための環境を構築する手順を、メモ書き程度に書いておきます。 「開発するため」なので、AugularJS側、及びRails側でユニットテストも実行できる環境を整えたいと思います。 また、ViewにはTwitter Bootstrapを使用します。 では、手順です。 プロジェクト作成 0.(rails new などでRailsアプリケーションを作成) 1.Gemfileに以下を追加 gem 'therubyracer' gem 'execjs' gem "twitter-bootstrap-rails" gem "less-rails" group :development,:test do gem 'rs
I haven't been satisfied with the way my front-end code (mainly based on JQuery) has grown with my previous rails app, so I took the time to sit and explore the great front-end framework we now have. I still like handling the routing in Rails with several pages, it feels wrong to move that logic to the javascript layer. I don't want to build a single-page application. But having some canonical way
長文注意。 angularjsについて今更ながらに触り始めて色々と感動したので纏めておく。 angularjsがどういったフレームワークかは公式のチュートリアルを眺めてたらぼんやりと把握できると思うので今回その辺の話はあまり触れない。 http://angularjs.org/ angularjsのAPIについては公式のドキュメント含めて様々なメディアやブログに取り上げられているが、導入から体系的に語られてるものはあまり無い印象だったので、僕のブログでは導入から具体的な目的に沿った実装方法を紹介していこうと思う。 ちなみに自分のangularjsへの理解も触り始めて一週間程度なのでだいぶ甘い。 angularjsを一週間やってみた感想 最初の2日くらいがだいぶつらい。 飲み込みが早い人ならすぐに使いこなすのかもしれないが、angularjsはdirective, controller, f
https://shellycloud.com/blog/2013/10/how-to-integrate-angularjs-with-rails-4 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 Railsアプリのホスティングサービスを提供しているShelly Cloudがブログで、フロントでAngularJS、バックエンドでRails 4を採用するときの留意点について、まとめています。使用しているコードサンプルはこちらになります。 1) Building a JSON API in Rails RailsでAPIをいちから作ってみる。angularjs-rails-resourceのようなライブラリを使うときは詳細が違ってくるが、考え方は概ね同じ。 Routing namespace :api
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
