Angular2 オススメチュートリアル

[toc]

Typescript

Angular2をTypescroptで書くのであれば、一度簡単に学んでおいたほうがいいと思います
このチュートリアルをやればとりあえずTypescriptがどんな言語化がわかるので、オススメです

Learn TypeScript in 30 Minutes

Tesla の Webサイト

Building Tesla’s battery range calculator with Angular 2 reactive forms

ブログ

Angular2で簡易ブログを作ってみる

結構重めだけど、勉強になる系

Angular 2 CRUD, modals, animations, pagination, datetimepicker and much more

rails form ラベルとインプット、横1列で表示する方法

業務ではAPIばかりやっていたので、いざrailsのテンプレートを使おうとしたら、
すごく戸惑ってしまいました

結論としては、do で囲ってあげればできるとわかりました

<%= f.label :terms_of_service do %>
  <%= f.check_box :terms_of_service %>
  I agree to the <%= link_to 'Terms of Service', policies_path %>.
<% end %>

参考にした記事

How to keep a checkbox and label on the same line in a Rails form?

Data too long for column name at row 1

Mysql::Error: Data too long for column ‘name’ at row 1: INSERT INTO `categories`
的なエラーが出てきたので、

Error Code:

1406. Data too long for column – MySQL
ターミナルからmysqlに以下のコードを実行

SET @@global.sql_mode= '';

そしたら、次は

Illegal mix of collations (utf8_unicode_ci,IMPLICIT) and (utf8_general_ci,IMPLICIT

unicodeに関するエラーが出てきたので、

utf8_genneral_ci

に全てを変更して無事解決できました

参考にした記事

Forums » Data too long for column ‘title’ at row 1
ちゃんと文字コードはあわせましょうbyRails+MySQL
Illegal mix of collations (utf8_general_ci,IMPLICIT) and (utf8_unicode_ci,IMPLICIT) within stored procedure

複合一意性 テストエラー

複合バリデーションを追加した後、テストが通らず壮絶にはまってしまいました

class User < ActiveRecord::Base
   validates :name,:uniqueness => {:scope =>:phone }
end

結果から言ってしまえば、fixture ファイルのデータと、テスト用データのプロパティが
全く一緒だった、ということが原因でした

バリデーションかけたら通らないのは当たり前でしたが、変えたものだとばかり考えていたので、
なかなか気づかずに貴重な時間をものすごく使ってしまいました

自分と同じミスをする人はそうそういないと思おいますが、
そんなかたがいらっしゃれば、参考にしていただけたらと思います。

参考にした記事

コントローラー
Rails3でのvalidationメモ

how to validate uniqueness for custom scope active-record rails 4

Reservation Type System w/ Validation – Rails 3.0

Uniqueness scope

[Rails] validates uniqueness scope allow_blank/allow_nil -> validation error

RailsのActiveRecordでvalidates user_id, :uniqueness { scope: item_name } とした時のエラーメッセージからuser_idを除外したい

Railsで2つ以上の値の組み合わせに対するユニーク制約をかける

railsのmodelに複合一意制約

複数一意制約とは

モデル
failed assertion, no message given: rails

Getting “Failed assertion, no message given.” as error when running Ruby Selenium Test Cases

Rails, Failed assertion, no message given

bootstrap-sass cssが読み込まれない時の対処法

bootstrap-sassを最近使い始めたのですが、bundle install しても
cssファイルが読み込まれていなかったので、おかしいなと思って調べてみたら、

app/assets/stylesheets/application.scss
@import "bootstrap-sprockets";
@import "bootstrap";

と記述し、ファイルを読み込む場合には
ファイル名を記述する必要があるみたいです!

app/assets/stylesheets/application.scss
@import "bootstrap-sprockets";
@import "bootstrap";


@import 読み込むファイル名;

//↓消す!
*= require_self
*= require_tree .


参考にした記事

音速開発!RailsでBootstrapを導入する方法〜Less、Sass、Scss〜

StandardError: An error has occurred, this and all later migrations canceled: undefined method `shop_id’ for

新たにカラムを追加する際、エラーが出てきました

StandardError: An error has occurred, this and all later migrations canceled:

undefined method `shop_id' for

原因はマイグレーションを叩く前にモデルにバリデーションをかけていたことが要因でした。

一旦バリデーションをコメントしてからもう一度叩いたら、問題なくマイグレーションが通りました!

参考にした記事

Rake aborted. Migrate aborted. Standard Error. Undefined Method. So what exactly causes this?
[db:migrate] error on migration – undefined method `file_changed?’ #195

Angular2 aot something.component.ngfactory.ts:881:81 Property ‘*****’ does not exist on type

aot コンパイルをした後、タイトルのエラーが出てきました

自分の解決策は、htmlファイルに、
プロパティの値を確認するために使用していたjson pipeのせいでだったみたいです

{{product | json}}

参考にした記事

AOT fails with type errors even when no type errors in the project #1536
AoT: Property ‘ngOnInit’ does not exist on type ‘MdTooltip’
Ngc error: Compilation failed, ionic2, rc0 #8511

Rails form_for 内で 配列を作る方法

form_for 内で、check_boxを使って値を配列に格納し、それをPOSTする方法を考えていたら、
ちょこっと時間を使ってしまいました。

こちらがコードです。

#パラメーター
  def shop_params
    params.require(:shop).permit(:name, :about, flag: [])
  end

#_form.html.erb

<%= bootstrap_form_for(@shop) do |f| %>

    <%= f.text_field :name %>
    <%= f.text_field :about %>

    <% ['aaaa', 'bbbb', 'cccc'].each do |flag| %>
      # nil を入れないと、格納される値がflag: ["0","aaaa", "0","cccc","0",,,, ]のようになってしまうので、忘れないように
        <%= f.check_box(:flag, {:multiple => true}, flag, nil) %>
    <% end %>


    <%= f.submit class: 'btn btn-danger' %>
<% end %>

参考にした記事

Rails4で複数のチェックボックスを扱う
Display a checkbox list instead of multiple select
Manipulate an array attribute using multiple check boxes

Angular2 ページのリフレッシュ方法

Abgular2はページ遷移が負担にならなくて、個人的にとても好きなUIフレームワークです

ただ、意図的にリフレッシュにしようとした際、ちょっと時間を使っちゃったので、
今後誰かが少しでも効率的にできたら嬉しいなーと思います!

コードは以下の通りです
ログイン後や、ログアウト後などにリフレッシュさせたいときは、
メソッドに入れればできますよ!

location.reload(); 

参考にした記事

What is proper way to reload page with AngularJs 2 and TypeScript?

ArgumentError – wrong number of arguments (given 1, expected 0)

active admin と devise token authを併用していたところ、タイトルのエラーが出てきました

[toc]

解決策

解決策は簡単で、

  • 一つはAPI用のコントローラー
  • もうひとつは、devise token auth用のコントローラー

を作成することで解決するようです

コード

# app/controllers/api_controller.rb
# API routes extend from this controller
class ApiController < ActionController::Base
  include DeviseTokenAuth::Concerns::SetUserByToken
end

# app/controllers/application_controller.rb
# leave this for ActiveAdmin, and any other non-api routes
class ApplicationController < ActionController::Base
end

参考にした記事

I’m having trouble using this gem alongside ActiveAdmin…
↑結構下の方にあります
activeadmin with rails API app errors: ArgumentError in Admin::DashboardController#index