How can I dynamically set templates without messy query parameters in angular ui-router?

Question

I'm building an artist portfolio web app where the artist can create a 'project' which consists of a series of content pieces (mostly images at this point) which can then be put in an order and the artist can choose between different preset layouts. I'm using angular and node + express. I'm struggling to find a good way to dynamically set templates. The only functional scheme i've devised so far is to put the template name in a query parameter in the url like this.

ui-sref="webapp/project/photo?template=vertical"

then in ui-router it's relatively simple to set the template using state params

templateUrl : function (stateparams) {
  return 'templates/' + stateparams.template + '.html';
},

Although it's functional I don't like this mostly because it creates messy urls and allows anyone to change templates with query params or more likely load something without a real template because the url was typed incorrectly or correctly without the query parameter.

I can't make an api call from the templateUrl function because it's not injectable so I can't use the $http service. I've tried to use template provider but haven't made anything functional out of that yet. It does allow for an injectable function but that function must return an entire template instead of a url. If I can get a template url for it how can a load the template with that? I assume I'm not the first person to want dynamic templates (templates set in the database) from angular. What are my best options?

Think you need to look into the template cache, I'm pretty sure you can use that to load the template file but I don't have a full solution off hand. — shaunhusain
– shaunhusain, Commented Mar 23, 2014 at 19:13

Constellates · Accepted Answer · 2014-03-25 18:34:21Z

1

I have found a functional solution to my problem using ui-router, $stateParams, and $http. I'll be looking for a better architecture scheme as this necessitates 3 server requests every time a project is requested. One to get the template name and another to load the template file and another to load the project data. I suppose I only added one request to the norm. Anyways.. This solution is working for me but next I will be moving the logic to get template by the project name to an angular service to keep everything clean.

.state('projects/:project_url', {
  url              : '/projects/:project_url',
  templateProvider : function ($stateParams, $http) {
    return $http.get('/api/projects/' + $stateParams.project_url)
      .then(function (data) {
        // get template name
        var templateName = data.data[0].template;
        // return template by name
        return $http.get('/pages/' + templateName + '.html')
          .then(function (data) {
            return data.data;
          });
      });
  },
  controller       : 'projectCtrl'
});

answered Mar 25, 2014 at 18:34

Constellates

2,1134 gold badges19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

M21B8 Over a year ago

you could change the final $http call to get the template to use angulars built in templateRequest, which would give you built in caching etc, and hopefully reduce the amount of calls.

Jens · Accepted Answer · 2014-03-24 12:40:52Z

0

http://dotjem.github.io/angular-routing/ supports your scenario with inject-able template functions. Note however that you must provide the raw template in the return statement, but that is easily done using the $template service...

It is very similar to UIRouter, so it should be a fairly easy transition if you find it worth it.

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

If you take the latest stable release rather than the head you must add a "get" call to that service as: $template.get('template.html') rather than the newer: $template('template.html')

answered Mar 24, 2014 at 12:40

Jens

3,4421 gold badge26 silver badges29 bronze badges

1 Comment

Constellates Over a year ago

I just migrated to ui-router so I'm going to see if I can live with is first. But the added options of that router do look appealing.

Collectives™ on Stack Overflow

How can I dynamically set templates without messy query parameters in angular ui-router?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related