Integrating Angularjs & Rails

Yu Hsiang, Lin (@johnlinvc)




A live broadcasting system enables you to create your own TV show by mesh-up. 


Fighting in Congress         

 

+      Your Narration         

----------------------------------        

Wrestling         

It's all  about realtime interaction with audiences.

Ruby on Rails

  

Angularjs 

=

 awesome realtime web app 

Rails 

for member & data API

+
Angularjs 
for realtime User interaction

But there's always some obstacles in a fascinating Romance 

First, Angularjs can't post/put  to Rails by default


Why?

Rails's built-in CSRF protection is stopping any non-GET request without a valid CSRF token

Solution

add X-CSRF-Token to default request header
$httpProvider.defaults.headers.common {  'X-CSRF-Token':   $('meta[name="csrf-token"]').attr('content'}

LET'S DEPLOY THE SITE TO PRODUCTION

EVerything breaks down


rails asset pipeline

breaks

the dependency injection of angularjs

Angularjs relies on parameter name to find dependency


 var  MainCtrl = function($scope, $http) {....}

Angularjs will auto inject $scope & $http

After Asset Pipeline


var MainCtrl = function(a, b) {....}


Angularjs will not auto inject $scope & $http

Solution


manually add dependency to controller

  var  MainCtrl = ['$scope' , '$http', function($scope, $http) {....} ]

or

use ngmin-rails gem

Lastly

We're hiring@iKala

Made with Slides.com