Pass Angular html template to backbone template

0
votes

I'm trying to slowly convert a Backbone App to Angular. It's actually using Marionette to be precise. In each of my current Marionette views, they are a Marionette.ItemView. For the template to show, I do this:

    get template() {
        return _.template(nameOfMyTemplate, { myModel: this.model });
    }

nameOfMyTemplate would be my AwesomeTemplate.template.html file that is in my solution.

I was wondering how I could go about just passing my template.html without calling _.template in a backbone or marionette app? So somewhere in my backbone view or marionette.itemview, I could do

template: NewAwesomeAngularTemplate.template.html // where NewAwesomeAngularTemplate.template.html is a file in my solution

Has anyone come across this yet? I wasn't able to find much info on how people were converting their apps to Angular from Backbone or Marionette. Thanks in advance!

3
angularjstemplatesbackbone.jstypescriptmarionette

3 Answers

0
votes

Marionette expects all templates to be immediately available, not having to be fetched async. The view.template function can be easily overwritten but it needs to immediately return a string (or return a function that will immediately return a string).

There was an old fork called Marionette.Async which enabled fetching of templates on-demand but it was abandonded long ago after the maintainers determined it to be A Really Bad Idea.

Your best bet is to build a mechanism that either loads all the templates into memory up front (like embedding them in a single JS file or the main HTML page) or a custom mechanism that ensures templates are fetched as-needed before the view gets used. The former will be much easier but viability depends on how many templates you have and how big they are.

0
votes

Not too familiar with Backbone or Marionette, but went over and looked at the website.

I am not sure if this is what you are asking, so excuse me if I am way off base. In Angular you can use the ngRouter or the more powerful uiRouter to bind your urls to controllers and views. 

state('index', {
  url: "/",
  controller: 'SomeController',
  templateUrl: "template/NewAwesomeAngularTemplate.html"
})

Not sure if this is what you were looking for. If so, check out the documentation at https://github.com/angular-ui/ui-router

0
votes

You can use the grunt ts html2ts support : https://github.com/grunt-ts/grunt-ts#html-2-typescript-support

It turns an html file into a typescript string variable which you can return from the template function.