Question

出于安全原因，JavaScript / AngularJS不允许在本地从桌面运行应用程序时加载本地文件。您必须具有localhost实例或从Web服务器运行整个实例。

在我的情况下，我想将整个角度应用程序放在电子书实现中。所以，我确实需要能够像在桌面上一样运行它。

加载模板的另一种方法是使用脚本标识。在这种情况下，模板内容在index.html或app.js中进行了硬编码。但不确定如何去做呢？

我们如何将以下配置代码转换为基于脚本ID的实现？虽然我在谈论它，但我也要提出这个问题;选择这种方法有什么缺点 - 除了明显的模块化（代码组织）？

以下是需要转换为基于id的方法的代码。我不确定如何转换＆＃34;解决＆＃34;，＆＃34; controllerAs＆＃34;通过基于脚本id的实现的信息。

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");


    }]
);

我知道我的问题的解决方案通过以下实现传递;但同样，不确定如何处理那些＆＃34;解决＆＃34;部分在这里;

[script type =＆＃34; text / ng-template＆＃34; id =＆＃34; /tpl.html"]内容模板。 [/脚本]

来源：https://docs.angularjs.org/api/ng/directive/script

Answer 1

您可以将模板直接加载到脚本标记中的缓存中，也可以直接使用$ templateCache服务。 $templateCache

如何在角度JS中加载本地模板？

1 个答案: