Angular, Rails, Require.js working in Harmony

Transcript

1. Angular,  Rails  and  Require.js   working  in  Harmony   Sebas:an  Porto  
2. Page Our  app   Small core (libs + app code) Lots of code Precompiled  using  the  assets   pipeline   Loaded  on  demand  using   require.js  
3. Angular  sweet  path   Load all application code Automatic bootstrap
4. Angular  +  Require   Load application code using require.js Manual bootstrap
5. Angular  +  Require   <script> $(function () { requirejs([‘path/to/component’], function(main) { var $ele = $('#<%= view_id %>'); angular.bootstrap($ele, [‘APP’]); }); }); </script>
6. Components   Component  A   Component  B  
7. Components   Component  B   Component  C  
8. Components   Component A Component B Own  angular   code   Own  angular   code  
9. Components  approach  1   FAIL!  Angular  tries  to  bootstrap  everything   and  cannot  find  the  code   Component A Sub component B Bootstrap A Bootstrap B
10. 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
11. 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  
12. 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  
13. 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  
14. 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 %>); });
15. Feedback,  ques:ons