Additional hints

Passing information and configuration from Rails to Angular

There are three ways of passing information from Rails to angular:

Using tag attributes written directly to the DOM by the rendering process of Rails:

<!-- @see ./app/views/layouts/angular.html.erb -->
<body class="<%= body_css_classes %>" ng-app="openproject" data-relative_url_root="<%= root_path %>" ng-init="projectIdentifier = '<%= (@project.identifier rescue '') %>'">
<!-- [..] -->
</body>

Using the gon gem

This is included by all layouts in <head>:

<%= include_gon %>

gon will provide arbitrary settings from Rails to all JavaScript functionality, including angular. In an angular context a ConfigurationService is provided for picking up the settings.

From the APIv3

APIv3 introduces a settings endpoint which can be used to query settings from the API directly (see here for more information). This is useful for querying user specific settings and guarded information. The endpoint is not complete at the time of writing

The only place this is currently used is within the ConfigurationService, which provides an api, which can be used like this:

// angular injected

function(ConfigurationService) {
    ConfigurationService.api().then(function(settings) {
        console.log(settings);
    })
}

// from the outside
angular
    .element('body')
    .injector()
    .invoke([
        'ConfigurationService', 
        function(service) {
            service.api().then(function(settings) {
                console.log(settings);
            })
        }
    ])

Calls to the API are cached between page reloads. It would be advisable to cache them longer (e.g. in localStorage) in the future, as the data rarely updates.

1.8 KiB Raw Blame History

Additional hints

Passing information and configuration from Rails to Angular

1.8 KiB

Raw Blame History