how to load local templates in angular JS? - angularjs

Question

Due to security reasons, JavaScript/AngularJS does not allow the loading of local files when running the app locally, off of your desktop. You must either have a localhost instance or run the whole thing from a web server.
In my case, I'd like to place the entire angular app in an eBook implementation. So, I do need to be able to run it as if it is on the desktop.
An alternative way to load the templates is to use the script id tag. In that case, template content is hardcoded in the index.html or the app.js.
But not exactly sure how to go about it?
How do we convert the following config code to script ID based implementation? And while I'm at it, let me also throw in this question as well; Are there any disadvantages of choosing this approach - other than the obvious modularity ( code organization )?
Here is the code that needs to be converted to id based approach.
I'm not sure how to convert the "resolve", "controllerAs" information thru the script-id based implementation.
angular.module("quickquiz").config(["$routeProvider", "$mdThemingProvider", function ($routeProvider, $mdThemingProvider) {
$mdThemingProvider.theme('default')
$routeProvider
.when("/home", {
templateUrl: 'templates/home.html',
controller: 'HomeController',
controllerAs: 'home',
resolve: {
quizConfig: ["QuizConfig", function (QuizConfig) {
return QuizConfig.loadConfig();
}],
quizStorage: ["QuizStorage", function (QuizStorage) {
return QuizStorage.loadQuizes();
}]
}
})
.when("/:currentPage", {
templateUrl: 'templates/main.html',
controller: 'MainQuizController',
controllerAs: 'main',
resolve: {
quizConfig: ["QuizConfig", function (QuizConfig) {
return QuizConfig.loadConfig();
}],
quizStorage: ["QuizStorage", function (QuizStorage) {
return QuizStorage.loadQuizes();
}]
}
})
.when("/:1", {
templateUrl: 'templates/main.html',
controller: 'MainQuizController',
controllerAs: 'main',
resolve: {
quizConfig: ["QuizConfig", function (QuizConfig) {
return QuizConfig.loadConfig();
}],
quizStorage: ["QuizStorage", function (QuizStorage) {
return QuizStorage.loadQuizes();
}]
}
})
.otherwise("/home");
}]
);
I know that the solution to my problem pass thru an implementation as follows; but again, not exactly sure how to deal with those "resolve" portion here;
[script type="text/ng-template" id="/tpl.html"] Content of the
template. [/script]
source: https://docs.angularjs.org/api/ng/directive/script

Answer 1

You can load templates directly into the cache in a script tag, or by consuming the $templateCache service directly. $templateCache.