Cleaner way for defining Angular templates

Question

Consider this code

my_app.run( [ '$templateCache' , function( $templateCache ) { var template = "" + "{{ item.name }}" + "<ul ng-if='item.sub'>" + "<li ng-repeat='item in item.sub' ng-include=\"'angular-multi-select-item.htm'\"></li>" + "</ul>" + ""; $templateCache.put( 'angular-multi-select-item.htm' , template ); }]);

While this works as expected, I see it quite ugly (the concatenated string with html inside). Is there some other, more clean, way to define the html for an Angular template?

lin · Accepted Answer · 2015-05-21 11:01:02Z

2

What you think about this? Just create a view html view file in your working directory and load it with $http.

$templateCache.put('angular-multi-select-item.htm', $http.get('views/template.html'));

Your can also try it with `ng-include? (documentation) and add includes in the main view like:

<div ng-include="'views/template.html'"></div>

edited May 21, 2015 at 11:01

answered May 21, 2015 at 10:58

lin

18.5k4 gold badges66 silver badges88 bronze badges

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

5 Comments

Alexander Nestorov Over a year ago

Ah, indeed. I knew about that one, but this has several disadvantages. I can't control where the template will be (consider a big project managed with npm/bower). Also, it will make as many extra http calls as the number of templates I have. (which could get up to 10 easily, which, imho, is quite expensive). Nevertheless, I'll vote up :)

Alexander Nestorov Over a year ago

Ok, but how would I load the template if I don't know where it is?

Alexander Nestorov Over a year ago

Let me try again. Let's say I'm working with a framework that manages libraries with NPM or Bower. Now let's say my library (which includes the view) is installed in project_root/libraries/npm/my_library/view.html. How would I know that my view was saved there?

Alexander Nestorov Over a year ago

Your answer wasn't what I was asking for, I think I already explained why. I up-voted it because it will probably solve somebody else's problem. NPM and Bower packages are exactly the same thing, it depends of the package's code if it can be used inside the browser.

Alexander Nestorov Over a year ago

You're starting to mix quite some things here. NPM is a package manager that happens to be shipped with Node. Nothing more, nothing less. Try to install a package with Bower and NPM. You'll end up having the exact same files (most probably). As I said, a package installed by Bower or NPM is usable in the browser only if the package itself was designed that way. And, last but not least important, I'm not using Node (which you pulled here from thin air), I'm using Yii2, which manages frontend deps with both NPM and Bower.

Collectives™ on Stack Overflow

Cleaner way for defining Angular templates

Consider this code

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

Consider this code

1 Answer 1

5 Comments

Related