Clever Geek Handbook

A cleaner way of defining Angular templates

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 (concatenated string with html inside). Is there another, cleaner way of defining html for an Angular template?

+3


source to share


1 answer


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

.

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


You can also try it with `ng-include? ( documentation ) and the appendix includes in the main view, e.g .:

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


source






More articles:


All Articles