/angular2-example-app

This is example of angular 2 application base on official tutorial

Primary LanguageJavaScriptMIT LicenseMIT

Angular 2.0 Workshops

Clone repo:

git clone git@github.com:womanonrails/angular2-example-app.git
cd angular2-example-app

Instal dependences:

npm install
npm start

Prepare Rails

  1. Gemset:
  • .ruby-version
  • .ruby-gemset
  1. gem install rails
  2. rails new angular_api_app --api
  3. cd angular_api_app
  4. Initial commit for Rails
  5. Modify Rails inflections
# config/initializers/inflections.rb
ActiveSupport::Inflector.inflections(:en) do |inflect|
  inflect.irregular 'hero', 'heroes'
end

  1. rails g scaffold hero name:string:uniq

  2. Update migration

# db/migrate
class CreateHeroes < ActiveRecord::Migration[5.0]
  def change
    create_table :heroes do |t|
      t.string :name, null: false

      t.timestamps
    end
    add_index :heroes, :name, unique: true
  end
end

  1. rails db:migrate

  2. Prepare seeds

# db/seed.rb
Hero.create([
  { name: 'Jason' },
  { name: 'Tim' },
  { name: 'Zach' },
  { name: 'Matt' },
])
  1. rails db:seed
  2. rails server -p 3002
  3. gem 'rack-cors'
  4. bundle install
  5. Prepare Cors
# config/initializers/cors.rb
# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more: https://github.com/cyu/rack-cors

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Back to Angular 2.0

Let's finished this tutorial

Usefull links