Marrying angular rails
0 likes384 views
This document discusses best practices for integrating AngularJS with Rails applications. It covers loading Angular templates, managing dependencies with Bower, using services and directives, understanding the digest cycle, and setting up DI annotations. Testing templates with Karma and ng-html2js-preprocessor is also recommended. In general, the document advocates that AngularJS and Rails can work well together when templates are handled properly and dependencies are managed correctly.
![Templates
# Gemfile
gem ‘angular-rails-templates'
Add the gem
# apps/assets/javascripts/office365.js
//= require angular-rails-templates
//= require_tree ./office365/templates
Include it in the asset pipeline
# apps/assets/javascripts/office365/modules.js
angular.module('XNG-Office365-App', ['templates']);
Add it as dependency in your Angular module](https://image.slidesharecdn.com/marryingangularrails-150817121950-lva1-app6891/85/Marrying-angular-rails-26-320.jpg)
![DI Annotations
angular.module('App')
.controller('ContactsCtrl', function ($scope) {
});
# Gemfile
gem ‘ngannotate-rails'
angular.module('App')
.controller('ContactsCtrl', ['$scope', function ($scope) {
}]);](https://image.slidesharecdn.com/marryingangularrails-150817121950-lva1-app6891/85/Marrying-angular-rails-28-320.jpg)
Marrying angular rails
- 3. - <iframe> loads page - office.js script from MS - built-in security - uses postMessage - provides access to outlook data - Cross-platform
- 4. Why Angular?
- 5. High initialisation time for Office.js
- 8. Where you’re better off without Angular:
- 9. SEO
- 10. NoScript
- 11. Performance
- 12. Best practices
- 13. Use promises! step1(function (value1) { step2(value1, function(value2) { step3(value2, function(value3) { step4(value3, function(value4) { // All steps successful }); }); }); }); step1() .then(function (value1) { return step2(); }) .then(function (value2) { return step3(); }) .then(function (value3) { return step4(); }) .then(function (value4) { // All steps fulfilled }); http://tinyurl.com/rughh-promises
- 14. Use services as wrappers! this.save = function () { var deferred = $q.defer(); roamingSettings().saveAsync(function (asyncResult) { if (asyncResult.status === $window.Office.AsyncResultStatus.Failed) { deferred.reject(asyncResult.error.message); } else { deferred.resolve(); } }); return deferred.promise; }; RoamingSettings.save().then(function () { // Success! }, function () { //Error });
- 15. Directives angular.module('App') .directive('foobar', function () { return { restrict: 'E', transclude: true, require: '?^^parentDirectiveName', scope: { name: '@', data: '=', callMe: '&' }, compile: function (elm, attr, transclude) { return function link(scope, elm, attr, parentDirectiveCtrl) { } }, controller: function ($scope, Service) { } } }); https://docs.angularjs.org/guide/directive
- 17. Tools
- 18. Rails Integration • Angular as a dependency • Template handling • DI Annotations
- 19. Dependencies # Gemfile gem 'angularjs-rails' Easiest way //= require angular/angular
- 20. Dependencies Manage dependencies with bower # config/initializers/assets.rb Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'components') // .bowerrc { "directory": "vendor/assets/components" } $ bower install angularjs
- 21. Dependencies # config/initializers/assets.rb Rails.application.config.assets.precompile += %w( office365.js office365.css angular.js ) Dedicated manifest files // app/assets/javascripts/office365.js //= require office365/modules.js //= require office365/routes.js //= require office365/config.js //= require office365/app.js //= require_tree ./office365/app //= require_tree ./office365/locales
- 22. Dependencies Dedicated manifest files // app/assets/javascripts/angular.js //= require angular/angular //= require angular-route/angular-route //= require angular-translate/angular-translate //= require angular-animate/angular-animate
- 23. Templates Option #1: Rails public folder • Static templates • Easy for testing (requires a running server) • (at least) one request per template
- 24. Templates Option #2: server side rendered • Dynamic templates • Harder to test (Rails involved)
- 25. Templates Option #3: angular-rails-templates • Static templates • Automatically added to $templateCache => no requests
- 26. Templates # Gemfile gem ‘angular-rails-templates' Add the gem # apps/assets/javascripts/office365.js //= require angular-rails-templates //= require_tree ./office365/templates Include it in the asset pipeline # apps/assets/javascripts/office365/modules.js angular.module('XNG-Office365-App', ['templates']); Add it as dependency in your Angular module
- 27. Testing Templates $ npm install karma-ng-html2js-preprocessor Karma ng-html2js-preprocessor // karma.conf.js processors: { 'app/assets/javascripts/office365/templates/*.html': 'ng-html2js' }, ngHtml2JsPreprocessor: { // strip this from the file path stripPrefix: 'app/assets/javascripts/', // module name moduleName: 'templates' } Add it to the karma config
- 28. DI Annotations angular.module('App') .controller('ContactsCtrl', function ($scope) { }); # Gemfile gem ‘ngannotate-rails' angular.module('App') .controller('ContactsCtrl', ['$scope', function ($scope) { }]);
- 29. Conclusions • AngularJS and Rails play well together • Rails is often enough!
- 30. Questions?