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.

1. Marrying
AngularJS with Rails
volker.tietz@xing.com
@volkertietz

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

6. Full page reloads?
:(

7. DOM interaction

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

16. Understand the
digest cycle!

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?