What sets 'template' apart from 'templateUrl' in AngularJS directive?
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<child-a-drtv></child-a-drtv>
<script src="angular.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js:
var app = angular.module('app', []);
app.directive('childADrtv', function () {
return {
restrict: 'E',
templateUrl: 'child-A-template.html',
//template: 'A<child-b-drtv></child-b-drtv>',
controller: function ($scope) {
console.log('childA Controller');
},
link: function () {
console.log('childA Link');
}
};
})
app.directive('childBDrtv', function () {
return {
restrict: 'E',
templateUrl: 'child-B-template.html',
//template: 'B<child-c-drtv></child-c-drtv>',
controller: function ($scope) {
console.log('childB Controller');
},
link: function () {
console.log('childB Link');
}
};
})
app.directive('childCDrtv', function () {
return {
restrict: 'E',
templateUrl: 'child-C-template.html',
//template: 'C',
controller: function ($scope) {
console.log('childC Controller');
},
link: function () {
console.log('childC Link');
}
};
});
child-A-template.html:
A<child-b-drtv></child-b-drtv>
child-B-template.html:
B<child-c-drtv></child-c-drtv>
child-C-template.html:
C
Output:
childA Controller
childA Link
childB Controller
childB Link
childC Controller
childC Link
Using 'template' instead of 'templateUrl' yields a different output. app.js:
var app = angular.module('app', []);
app.directive('childADrtv', function () {
return {
restrict: 'E',
//templateUrl: 'child-A-template.html',
template: 'A<child-b-drtv></child-b-drtv>',
controller: function ($scope) {
console.log('childA Controller');
},
link: function () {
console.log('childA Link');
}
};
})
app.directive('childBDrtv', function () {
return {
restrict: 'E',
//templateUrl: 'child-B-template.html',
template: 'B<child-c-drtv></child-c-drtv>',
controller: function ($scope) {
console.log('childB Controller');
},
link: function () {
console.log('childB Link');
}
};
})
app.directive('childCDrtv', function () {
return {
restrict: 'E',
//templateUrl: 'child-C-template.html',
template: 'C',
controller: function ($scope) {
console.log('childC Controller');
},
link: function () {
console.log('childC Link');
}
};
});
Output:
childA Controller
childB Controller
childC Controller
childC Link
childB Link
childA Link