/angular_rails

Figure out how to connect Rails and AngularJS - production stable goal

Primary LanguageJavaScript

AngularJS 1.0.8 + Rails 4

This repository is for learn purpose. It is fine to use generators like angularJS-boilerplate, etc. Although it is nice to know how all things work behind scenes.

Crucial questions:

  • What is the best way to run AngularJS front-end application with Rails back-end ?
  • What are downsides of this approach when application logic is getting complex ?

Sideways questions:

  • How to secure application <=> both ways (Session Hijacking, XSS) ?
  • What is best development flow ?
  • How to run application on real production server ? (with configuration details)
  • Are there any benefits over standard RoR way ? (programming complexity, application usage, application performance, dev/test time)
  • Is there any way to master this: https://github.com/FineLinePrototyping/angularjs-rails-resource

Possible Enhancements:

  • Use Grape for back-end.

TODO:

  • Create sample resources - use Grape
  • Connect Rails Back and Angular Front
  • Use unicorn for rails

Steps / Commands:

rails new angular_rails -d=mysql -J

Create .ruby-version and .ruby-gemset files

Install/Update NVM

Install/Update NPM

sudo npm update npm -g

Globally install Yeoman and AngualarJS see: angular-generator, takes a while

sudo npm install -g yo generator-angular

Ensure you are inside Rails root directory and issue following commands: (no for Twitter, include all modules when asked)

mkdir ngapp; cd ngapp
yo angular arails

Still inside ngapp directory run: (see: grunt-connect-proxy )

sudo npm install -g grunt-cli
npm install grunt-connect-proxy --save-dev

now run:

grunt server

If it is not working, try:

npm install
bower install

By default jquery was not included, so I did:

bower install jquery

Target Updates:

If AngularJS 1.0.8 will work flawless

AngularJS (1.2, when stable released)

Development Notes:

Use generators, for instance: (always be sure you are inside ngapp folder)

yo angular:controller user
yo angular:directive myDirective
yo angular:filter myFilter
yo angular:view user
yo angular:service myService
yo angular:decorator serviceName

For coffeeScript support see: link

Production resources / investigate it:

http://blog.donaldderek.com/2013/08/cf-i-configure-your-staging-machine-with-node-js-and-nginx/ https://github.com/Unitech/pm2

Configuration notes:

/etc/hosts

127.0.0.1 angular.dev

touch /etc/nginx/sites-available/angular_dev; nano /etc/nginx/sites-available/angular_dev

server {

        server_name angular.dev;

        location / {
                proxy_pass http://127.0.0.1:9000;
                proxy_set_header Host $host;
        }

}

start rails

bundle exec rails s

start grunt

cd ngapp; grunt server

accessible now with: angular.dev (via nginx proxy) and http://angular.dev:9000 (direct grunt connection)

Version: 0.0.2