Sure.
'use strict';
angular.module('myModule',[]).run(['$templateCache',function($templateCache){
$templateCache.put('template/example.html',
'<h1>This is a template</h1>' +
'<p>You can put any html that you like in this string</p>' +
'<p> Please be mindful that it will need an attached scope for' +
'any dynamic activity, basically it's a web page build in the script.</p>'
);
}
]);
It's as easy as that.
Edit:
I realize from your question that you might not be looking for a template, but a directive. That's a different animal altogether.
This is a directive that I use to build out a cascading dropdown with angular ui-bootstrap and font-awesome using a Navigation object from the backend:
myApp.directive("navigation", function($compile) {
return {
restrict: 'E',
replace: true,
scope: {
menu: '='
},
template: '<ul><li class="dropdown" ng-repeat="item in menu">' +
'<a ng-if="item.Children == undefined" href="#{{item.LocalRoute}}"><i style="font-size:150%;" class="fa {{item.Icon}} fa-fw"></i> {{item.Name}}</a>' +
'<a ng-if="item.Children.length > 0" class="dropdown-toggle" data-toggle="dropdown" href="#"><i style="font-size:150%;" class="fa {{item.Icon}} fa-fw"></i> {{item.Name}}</a>' +
'<navigation ng-if="item.Children.length > 0" class="dropdown-menu" menu="item.Children"></navigation>' +
'</li></ul>',
compile: function(el) {
var contents = el.contents().remove();
var compiled;
return function(scope, el) {
if (!compiled)
compiled = $compile(contents);
compiled(scope, function(clone) {
el.append(clone);
});
};
}
};
})
and this is called by putting a <navigation menu='$scope.Navigation' /> tag in the markup, assuming that you have a Navigation object designed and pushed to the client. A directive will automatically create a child scope that can have values passed to it through the tag attributes. I would suggest googling Angular Directives.