javascript - Loading Angular from another file -

i have js code this:

              switch(sc.article.type) {                 case articletypes.text:                   template = "<div class='form-group'><div class='input-group' ng-show='article.suffix'><input class='form-control' type='text' ng-model='article.response'/><div class='input-group-addon'>{{ article.suffix }}</div></div><input class='form-control' type='text' ng-model='article.response' ng-show='!article.suffix'/></div><p class='help-block'>{{article.help}}</p>";                   break;                  case articletypes.number:                    ... etc 

i think structured more nicely. example, each sc.article.type put html code template in own html file rather trying define in-line.

but how can that?

$templatecache service of angularjs helpful you.

first put possible templates in $templatecache

angular.module('app', []).run(function($templatecache) {   $templatecache.put('text', "<div class='form-group'><div class='input-group' ng-show='article.suffix'><input class='form-control' type='text' ng-model='article.response'/><div class='input-group-addon'>{{ article.suffix }}</div></div><input class='form-control' type='text' ng-model='article.response' ng-show='!article.suffix'/></div><p class='help-block'>{{article.help}}</p>");   $templatecache.put('number', 'number relaed template'); }); 

after configuring templates. $templatecache take care string.

now same service can retrieve template in javascript also.

you can template template-id.

$templatecache.get('text');  retrieve text template associated 'text' switch case.   $templatecache.get('number'); retrieve number related template. likewise.... 

you can write separate html files too.

see example demo plunkr both ways.

1. separate html files

2. put templates in $templatecache.