Angular,  Rails  and  Require.js   working  in  Harmony   Sebas:an  Porto   

Page Our  app   Small core (libs + app code) Lots of code Precompiled  using  the  assets   pipeline   Loaded  on  demand  using   require.js   

Angular  sweet  path   Load all application code Automatic bootstrap 

Angular  +  Require   Load application code using require.js Manual bootstrap 

Angular  +  Require   $(function () { requirejs([‘path/to/component’], function(main) { var $ele = $('#<%= view_id %>'); angular.bootstrap($ele, [‘APP’]); }); }); 

Components   Component  A   Component  B   

Components   Component  B   Component  C   

Components   Component A Component B Own  angular   code   Own  angular   code   

Components  approach  1   FAIL!  Angular  tries  to  bootstrap  everything   and  cannot  find  the  code   Component A Sub component B Bootstrap A Bootstrap B 

Components  approach  2   requirejs([‘path/to/componentA’, path/to/componentB], function(main) { var $ele = $('#<%= view_id %>'); angular.bootstrap($ele, [‘APP’]); }); FAIL!  This  code  just  knows  too  much   Component A Sub component B Bootstrap A + B 

Our  components  approach   Component A Sub component B Bootstrap Temp storage in rails Tell  what  you  need   Tell  what  you  need   Ask  what  to  use   

Our  component  defines  what  it  needs   <%    required_js  <<  ’/assets/…/form/main'    required_angular_modules  <<  'trading.gb_recycle_buys'    required_angular_modules  <<  'core.currencies'      view_id  =  new_view_id   %>   Component B Temp storage in rails Tell  what  you  need   

Our  components  approach   <%= render ‘gb_recycle_buys/form/main' %> <%= render ‘events/list', eventable: transaction %> <%= render ‘shared/angular_bootstrap', view_id: view_id %> Add  a   component,   may  have  sub   components   Another   component   Bootstrap   everything   

Bootstrap  everything   requirejs( <%= required_js.to_json.html_safe %>, function() { var $ele = $('#<%= view_id %>'); angular.bootstrap($ele, <%= required_angular_modules.uniq.to_json.html_safe %>); }); 

Feedback,  ques:ons