Content managed strings in AngularJS

Question

I'm building a large AngularJS application in which some of the UI text needs to be content managed. This is because items such as contextual help will need to be edited by the client after launch in response to user feedback.

I'm looking for approaches to inserting the text strings into the UI. So far I have considered

using something like angular-translate to dynamically insert the text at run time
using something like gulp-template to statically insert the strings into the templates during the build step

Having never attempted this before I'm aware there may be issues I haven't considered. I'm hoping someone with experience of solving a similar problem can weigh in with some advice.

Note there are no plans to internationalise the app at this point.

score 0 · Answer 1 · answered Aug 27 '15 at 13:55

I would put all the copy in its own directive so it can be accessible to all your components. It's just separating your content from your logic, essentially.

I don't think this is an ideal solution, however. More of a suggestion than an answer, I guess. I think ideally, you could set up permissions so that every directive was content editable for certain users. They could submit their changes to the UI copy and then you'd have a backend service that would autogenerate the copy directive.

(function() {
  "use strict";

  angular
    .module("app", [])
    .service("copy", copy)
    .directive("appNav", ["copy", appNav])
    .controller("Ctrl", ["$scope", "copy", Ctrl]);

  function copy() {
    return {
      buttonExplanation: "this is a button..?",
      input: [
        { placeholder: "hahaah", label: "put in a number?" },
        { placeholder: "???", label: "a box" }
      ],
      indexTitle: "main title"
    }
  }

  function appNav(copy) {
    return {
      restrict: "E",
      templateUrl: "./appNav.tmpl.html",
      scope: { copy: "=" }
    }
  }

  function Ctrl($scope, copy) {
    var vm = this;
    vm.copy = copy;
    vm.title = copy.indexTitle;
  }

})();

http://plnkr.co/edit/zpSXqzPBPLoc1asL5WrE?p=preview

Content managed strings in AngularJS

1 Answers1