如何根据URL参数生成包含JS内容的单个HTML文件

How to have single HTML file with content from JS based on URL parameter

本文关键字：单个 文件 HTML JS 包含 何根 URL 参数      更新时间：2023-09-26

使用AngularJS，是否可以显示外部JS数据文件中的动态内容，而无需为视图加载单独的模板HTML文件？我尝试使用一个HTML文件，并根据URL查询参数动态填充JS数据文件中的内容

例如：

website.com/index.html？product=product01
website.com/index.html？product=product02
website.com/index.html？product=product03

我很难找到解决办法。感谢您的帮助。

请检查"UI Bootstrap"指令集合的来源，所有模板都在JS文件中声明，并在模块加载时存储在模板缓存中。http://angular-ui.github.io/bootstrap/

打开"ui bootstrap tpls.js"文件，例如在其中查找"template/timepicker"字符串。

您可以使用angular ui路由器依赖关系来解决与状态相关的问题。

通过包含脚本注入此模块

 angular.module("myApp", ['ui.router']);

然后在应用程序的配置中，根据查询参数返回不同的控制器。注意具有"？"的url

  angular.module("myApp")
  .config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
   function($stateProvider, $urlRouterProvider, $locationProvider) {
      $stateProvider
        .state('index.html', {
      url: "/index.html?product"
      controller: function ($stateParams) {
       //get corresponding controller
       var ctrlName = $stateParams.type + "Product";
       //product1 , product2 etc.
       return ctrlName;
      }
    })
 }]);
相关文章：