# no-inline-template - disallow the use of inline templates
Instead of using inline HTML templates, it is better to load the HTML from an external file.
Simple HTML templates are accepted by default.
('no-inline-template': [0, {allowSimple: true}])
**Rule based on Angular 1.x**
## Examples
The following patterns are considered problems with default config;
/*eslint angular/no-inline-template: 2*/
// invalid
angular.module('myModule').directive('helloWorld', function () {
return {
template: '
Hello World!
'
};
}); // error: Inline template is too complex. Use an external template instead
The following patterns are **not** considered problems with default config;
/*eslint angular/no-inline-template: 2*/
// valid
angular.module('myModule').directive('helloWorld', function () {
return {
templateUrl: 'template/helloWorld.html'
};
});
// valid
angular.module('myModule').directive('helloWorld', function () {
return {
template: '
Hello World
' // simple templates are allowed by default
};
});
// valid
angular.module('myModule').config(function ($routeProvider) {
$routeProvider.when('/hello', {
template: '' // directives for routing
});
});
The following patterns are considered problems when configured `{"allowSimple":true}`:
/*eslint angular/no-inline-template: [2,{"allowSimple":true}]*/
// invalid
angular.module('myModule').config(function ($routeProvider) {
$routeProvider.when('/dashboard', {
template: '
Dashboard
'
});
}); // error: Inline template is too complex. Use an external template instead
The following patterns are **not** considered problems when configured `{"allowSimple":true}`:
/*eslint angular/no-inline-template: [2,{"allowSimple":true}]*/
// valid
angular.module('myModule').config(function ($routeProvider) {
$routeProvider.when('/dashboard', {
template: '' // directives for routing
});
});
The following patterns are considered problems when configured `{"allowSimple":false}`:
/*eslint angular/no-inline-template: [2,{"allowSimple":false}]*/
// invalid
angular.module('myModule').config(function ($routeProvider) {
$routeProvider.when('/dashboard', {
template: ''
});
}); // error: Inline templates are not allowed. Use an external template instead
The following patterns are **not** considered problems when configured `{"allowSimple":false}`:
/*eslint angular/no-inline-template: [2,{"allowSimple":false}]*/
// valid
angular.module('myModule').config(function ($routeProvider) {
$routeProvider.when('/dashboard', {
templateUrl: 'templates/dashboard.html'
});
});
## Version
This rule was introduced in eslint-plugin-angular 0.12.0
## Links
* [Rule source](/rules/no-inline-template.js)
* [Example source](/examples/no-inline-template.js)