More than one template in same component in AngularJS 1.5

What about passing template as an parameter to component? For example create a component like:

module.component('testComponent', {    controllerAs: 'vm',    controller: Controller,    bindings: {        template  : '@'    },    templateUrl: function($element, $attrs) {        var templates = {            'first' :'components/first-template.html',            'second':'components/second-template.html',            'third' :'components/third-template.html'        }        return templates[$attrs.template];    }});

And using component as below may help

<test-component template='first'></test-component>

I use two ways for making dynamic template of a component in 1.5.x:

1) Pass via attr property:

templateUrl: function($element, $attrs) {      return $attrs.template;}

2) Inject a service into template and get template from there:

templateURL function:

templateUrl: function($element, $attrs,TemplateService) {      console.log('get template from service:' + TemplateService.getTemplate());      return TemplateService.getTemplate();}

In getTemplate function return template url based on variable

getTemplate: function(){     if (this.view = "user") {          return "user.html";    } else if (this.view = "user") {          return "shop.html";    } else {        console.log("none")    }     return "shop.html";       }

Pass variable 'view' to factory firstly via a set method.

If you need more change in html template, back to use directive and use compile service with more support.