jHipsterの紹介関ジャバで発表したLT資料です。
Rails5でAngular2を動かすまでの設定 | DevelopersIO
丹内です。 掲題のとおり、BetaになっているRails5とAngular2を連携させるまでの手順をまとめました。 バージョン ruby 2.3.0 node 4.2.4 npm 3.5.3 Rails5アプリの準備 bundle initしてできたGemファイルにRails5を指定します。 source 'https://rubygems.org' gem 'rails', '5.0.0.beta1' bundle installしたらアプリを生成します。 $ rbenv exec bundle install $ bundle exec rails new . -d mysql --skip-bundle -T exist create README.md create Rakefile create config.ru create .gitignore conflict Gemfi
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! -
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
AngularJSとRailsの丁度良い関係を探る：コード解説編 | mah365
以前投稿した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 │ │ │
AngularJS x Railsで ユーザ認証を実現するためのアプリ設計 - ボクココ
AngularJS で認証の仕組みをどう扱うのか? これが悩ましい問題。 サンプルのAngularJS の認証の仕組みを見ると、Cookie を使ってサーバとやりとりをしているが、これだと前回紹介した理想的な Rails, AngularJS 環境の構築 - ボクココ のようなAPIとしてのきり分けができず、結局Cookieを使ったWeb用のソースがサーバ側で必要になってしまう。これではスマホアプリを作るときに同じAPIのコードを使えない。 てことで認証はOAuthのみで扱うようにする。Rails にはOAuth用の素晴らしいライブラリ、「Doorkeeper」というのがOSSであるので、これを使う。 Doorkeeperがアクセストークンの発行、アクセストークンのチェック、外部アプリ連携など、一通りのAPIによるOAuth認証の枠組みを提供してくれる。そしてソースは割とよみやすい。 今回
OnsenUIを使って、Flickrアプリを5分で作ろう
この記事は、英語版アシアルブログの翻訳記事です。 （原文はこちら） ============================== この記事では、Flickr APIを利用して写真を表示するアプリを、HTML5 モバイル UIフレームワーク・OnsenUIを利用して作成します。 さらに、ボタンのスピナーアニメーションを使うことで、アプリに生き生きとした見た目を与えます。 今回作成するのは以下のアプリです。実際に動くので、触ってみてください。 1. プロジェクトを作成する 1. Monacaのダッシュボードで、「新しいプロジェクト」をクリックします。 2. 「Onsen UI最小限のテンプレート」を選択します。 プロジェクトの名前を「Flickr」とし、IDEを起動します。 OnsenUI最小限のテンプレートには、page1.htmlとpage2.htmlを行き来するナビゲーターコンポーネント
AngularJS を本気でつかうための tips - tokuhirom's blog
AngularJS を本気でつかうための tips 最近、管理画面で AngularJS をつかってみている。 そんな中で、いくつか工夫した点があるのでそれをシェアさせていただきます。 XHR のエラーを表示する XHR のエラーがおきた際のハンドリングをいちいち手でかくのは非効率。管理画面とか中の人しかつかわないので、エラーがおこった旨を随時報告するだけでよい。 そんなケースでは以下のようにする。 angular.module('myapp.exceptionHandler', []) .config(['$httpProvider', function ($httpProvider) { $httpProvider.interceptors.push(function($q, $log, $rootScope) { return { 'responseError': function(
Mobile Angular UI - Angular JS Mobile UI framework with Bootstrap 3 Css
Mobile Angular UI is a mobile UI framework just like Sencha Touch or jQuery Mobile. If you know Angular JS and Twitter Bootstrap you already know it! Awesome Mobile ComponentsMobile Angular UI provides essential mobile components that are missing in Bootstrap 3: switches, overlays, sidebars, scrollable areas, absolute positioned top and bottom navbars that don't bounce on scroll. It relies on robu
ng-options属性でoptionタグのvalue属性をバインドする - Kazzzの日記
ng-optionsディレクティブはng-repeat同様に列挙子風の記述するのだが、モデルとのバインドの仕方がちょっと分からなかったので、メモ 例えばコントローラーの$scopeにこのようなJSONモデルがあったとして js/controllers.js function CategoryController($scope) { $scope.categories = [ {name:'スマートフォン', value:'smartPhone'}, {name:'タブレット', value:'tablet'}, {name:'ノートPC', value:'notepc'}, {name:'デスクトップPC', value:'desktop'} ]; $scope.category = $scope.categories[0].value; } HTMLはこんな感じで。 index.html
AngularJSとRails4を組み合わせる - ワザノバ | wazanova
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
How to Unit Test Controllers In AngularJS Without Setting Your Hair On Fire | I care, I share, I'm Nathan LeClaire.
Developers almost universally agree that unit tests are a VERY GOOD THING when working on a project. They help you feel like your code is airtight, ensure reliability in production, and let you refactor with confidence when there is a need to do so. AngularJS code touts its high degree of testability, which is a reasonable claim. In much of the documentation end to end tests are provided with the
AngularJS Performance Tuning for Long Lists | Small Improvements Tech
AnglarJS is great! But when dealing with large lists containing complex data structure, things can get very slow! We ran into that problem when migrating our core admin screens to AngularJS. The screens were supposed to work smoothly when displaying some 500 rows. But the first approach took up to 7 seconds to rende. Terrible! We discovered two main performance issues for our implementation. One i
AngularJSでカスタムサービスを作成するときの作成法まとめ
AngularJSでカスタムサービスを作成することは非常に大切です。なぜならビジネスロジックはサービスとして書くべきであり、そのようにプログラミングすることが想定されているからです。（少し自信ありませんが、多分そうです） カスタムサービスを作成する方法ですが、いくつか選択肢があります。 $provide#value メソッド $provide#service メソッド $provide#factory メソッド $provide#decorator メソッド $provide#constant メソッド $provide#provider メソッド 個人的にはserviceメソッドだけ使っていれば事足りるのでいいや、という気もするのですが、できれば使いわけたいです。valueやconstantを使い分けられるとコードの可読性と保守性が上がりそうです。そんな訳でこれらの違いや使い方について自
Try, Catch, Fail: AngularJS - Unit Testing - Controllers
Updated Feb 6, 2014 - I'm changing this around a lot. A lot as changed since I wrote the original article and a lot has stayed the same. Most notably how Angular 1.2 handles promises on the $scope when processing the view, and some changes around testing promises. Since I see this gets some traffic and I hate the idea that I'm showing people the wrong thing, I'm going to try to keep this updated
AngularJS + TypeScript でリッチなフォームを作ってみる - パンダのメモ帳
前回（AngularJS で Hello World）に引き続き AngularJS + TypeScript による簡単なアプリケーションを書いてみました。 今回は AngularJS を使ったフォームの例です。 AngularJS のみで、比較的簡単にリッチなフォームが作成できることがわかるんじゃないかなぁと思います。 まえおき TypeScript で書いてます。 AngularJS のバージョンは2013年2月現在の最新安定版である 1.0.4 を使用します。 自動受け入れテスト（E2E Test）は面倒なので省略しました。 ソースコードについて なお、今回のソースコード一式も GitHub で公開しています。 また、こちらで実際に動作を確認することもできます。 解説 前回解説した内容についてはなるべく割愛します。 form 要素 <form id="signupForm" nam
CoffeeScript and AngularJS - Alexander Hill | mallex();
AngularJS and CoffeeScript are a great combination, despite the lack of popularity of CoffeeScript in the AngularJS community. Here are a few ways CoffeeScript makes writing AngularJS code a breeze. Short Function Definitions Angular uses a lot of anonymous functions - as such, short function definitions are the biggest timesaver when writing Angular code in CoffeeScript. As an example, lets write
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ngcordova.com/
APIファーストのWebフレームワークSynthを巡るコミュニティの困惑
Ionic Framework - The Cross-Platform App Development Leader
http://www.ng-newsletter.com/posts/angular-on-mobile.html
