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
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
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