How to include Angular ngMessage template

Question

I have quite a big form and was looking at ngMessages. I wanted to implement this:

<script type="text/ng-template" id="error-messages">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">This field is too short</div>
</script>

would I make a factory method? so I could use it across many different controllers? as the project will have many forms in it? I am not sure how to include this in a factory if that is the correct way. This is what I was thinking whether it is right or not.

(function() {
"use strict";
angular.module("minorApp")
    .factory("errorMessage", []);
function errorMessage() {
    return // some template
}
})();

Answer 1

You can add the template to angular's template cache:

var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
  $templateCache.put('error-messages.html', '<div ng-message="required">This field is required</div><div ng-message="minlength">This field is too short</div>');
});

Then, reference it in the html documents where you want to include it using ng-include.

<div ng-include src="'error-messages.html'"></div>

If you are using a build system like gulp, you can keep your html in .html files and using the https://www.npmjs.com/package/gulp-angular-templatecache plugin to automate the process of adding them to angular's template cache.