iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > PHP编程 >angular 中引入html单页面
  • 105
分享到

angular 中引入html单页面

angular.jshtmlphp 2023-09-06 12:09:20 105人浏览 八月长安
摘要

需求: 我们需要在angular中可以路由到一个静态的html页面。这里需要解决路由中的权限问题。 解决方案: 1 我们首先来回忆下,我们在原生中,如何在一个Html中引入另一个html页面。 (1)

需求:
我们需要在angular中可以路由到一个静态的html页面。这里需要解决路由中的权限问题。

解决方案:
1 我们首先来回忆下,我们在原生中,如何在一个Html中引入另一个html页面。

(1) 使用Jquery的load方法

load( url, [data], [callback] )
url:是指要导入文件的地址
data:可选参数;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里
callback:可选参数;是指调用load方法并得到服务器响应后,再执行的另外一个函数
举例:
1 $(“#myID”).load(“test.php”);
//在id为#myID的元素里导入test.php运行后的结果
2 $(“#myID”).load(“test.php”,{“name” : “Adam”});
//导入的php文件含有一个传递参数,类似于:test.php?name=Adam
3 $(“#myID”).load(“test.php”,{“name” : “Adam” ,“site”:“61dh.com”});
加载一个php文件,该php文件含有多个传递参数。注:参数间用逗号分隔,导入的php文件含有一个传递参数,类似于:test.php?name=Adam&site=61dh.com
4 $(“#myID”).load(“test.php”,{‘myinfo[]’, [“Adam”, “61dh.com”]});
//导入的php文件含有一个数组传递参数。
在这里插入图片描述

(2) $.html() $.append()
在这里插入图片描述
(3) 使用iframe,这里就不介绍了,大家都懂
(4) 使用object
在这里插入图片描述
(5) 原生javascript方法
i: insertAdjacentHTML 这个方法不会执行脚本script
在这里插入图片描述
ii:document.write() 全覆盖
在这里插入图片描述
iii:innerHTML 可以精确到元素,但是不会执行script
在这里插入图片描述
iv:document.createDocumentFragment(); 文档碎片操作,这里就不作详细介绍了

然后补充下angular中的用法,在angular中使用a标签,利用target=“xxxxx” 可以进行路由

来源地址:https://blog.csdn.net/wangbiao9292/article/details/126963337

--结束END--

本文标题: angular 中引入html单页面

本文链接: https://www.lsjlt.com/news/397049.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • angular 中引入html单页面
    需求: 我们需要在angular中可以路由到一个静态的Html页面。这里需要解决路由中的权限问题。 解决方案: 1 我们首先来回忆下,我们在原生中,如何在一个Html中引入另一个html页面。 (1)...
    99+
    2023-09-06
    angular.js html php
  • vue中如何引入html静态页面
    目录vue中引入html静态页面vue中引入html静态页面的一些问题1.最直接的方法就是在vue中嵌入html文件2.第二种方法window.open(url)总结vue中引入ht...
    99+
    2023-01-16
    vue引入html静态页面 vue引入html html静态页面
  • Html中引入外部页面的方法是什么
    这篇文章主要为大家分析了Html中引入外部页面的方法是什么的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟随小编一起来看看,下面跟着小编一起深入学习“Html中引入外部...
    99+
    2024-04-02
  • 怎么在将SVG图引入到HTML页面
    怎么在将SVG图引入到HTML页面?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。第一种:使用<embed>标签: 这个是官方推荐的用法,但是这个官方是...
    99+
    2023-06-09
  • html网页中图片怎么引入
    这篇文章主要讲解了“html网页中图片怎么引入”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html网页中图片怎么引入”吧! 图片大小是什么? 图片大小...
    99+
    2024-04-02
  • JavaScript中怎么插入html页面
    JavaScript中怎么插入html页面,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1、在HTML中使用<script> 元素,内部直接嵌入Ja...
    99+
    2023-06-20
  • angular如何实现spa单页面应用
    这篇文章主要介绍了angular如何实现spa单页面应用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。简单理解:单页面应用,锚点值切换,一个...
    99+
    2024-04-02
  • html页面引入vue组件之http-vue-loader.js解读
    目录html页面引入vue组件之http-vue-loader.js单页面vue项目注册使用组件(使用httpVueloader)安装并引入插件插件准备组件引用插件的其他注册使用组件...
    99+
    2023-05-17
    html页面引入vue组件 http-vue-loader.js html引入vue组件
  • 怎么在HTML页面中插入JavaScript
    今天小编给大家分享一下怎么在HTML页面中插入JavaScript的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面...
    99+
    2024-04-02
  • .html页面引入vue并使用公共组件方式
    目录.html页面引入vue并使用公共组件问题描述解决办法目录结构vue公共组件框架搭建步骤详述总结.html页面引入vue并使用公共组件 问题描述 整体项目采用传统 .html 文...
    99+
    2023-01-13
    .html页面 html页面引入vue 使用公共组件
  • html怎么在一个页面引用另一个页面
    非常抱歉,由于您没有提供文章标题,我无法为您生成一篇高质量的文章。请您提供文章标题,我将尽快为您生成一篇优质的文章。...
    99+
    2024-05-22
  • 怎么在html页面中插入视频
    这篇文章的内容主要围绕怎么在html页面中插入视频进行讲述,文章内容清晰易懂,条理清晰,非常适合新手学习,值得大家去阅读。感兴趣的朋友可以跟随小编一起阅读吧。希望大家通过这篇文章有所收获! Video标签...
    99+
    2024-04-02
  • 怎么将视频插入HTML页面中
    这篇“怎么将视频插入HTML页面中”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么将视频...
    99+
    2024-04-02
  • Flex中怎么嵌入完整HTML页面
    Flex中怎么嵌入完整HTML页面,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。在Flex中嵌入完整HTML页面有时候我们需要在Flex应用中嵌入HTML代码,根据嵌入HTML...
    99+
    2023-06-17
  • HTML怎么在页面中调用搜索引擎
    这篇文章给大家分享的是有关HTML怎么在页面中调用搜索引擎的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。  <!--在页面中调用百度引擎-->     &l...
    99+
    2024-04-02
  • Vue页面中引入img图片的方法
    我们在学习html的时候,图片标签<img>引入图片 <img src="../assets/images/avatar.png" width="100%"&...
    99+
    2024-04-02
  • HTML基础单页面实例分析
    这篇文章主要介绍“HTML基础单页面实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML基础单页面实例分析”文章能帮助大家解决问题。   <htm...
    99+
    2024-04-02
  • 如何将SVG嵌入HTML页面
    这篇文章给大家分享的是有关如何将SVG嵌入HTML页面的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 您可以使用HTML5<svg>元素将SVG图形直接嵌入到文档中...
    99+
    2024-04-02
  • 详解如何在Angular中引入Mock.js
    目录介绍为什么使用 Mock.js如何使用Mock.js模拟API请求安装Mock.js创建mock数据文件在Angular中使用Mock.js示例总结介绍 Mock.js是一个用于...
    99+
    2023-05-16
    Angular引入Mock.js Angular Mock.js
  • HTML怎么开发单选题页面
    这篇文章主要讲解了“HTML怎么开发单选题页面”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML怎么开发单选题页面”吧!   表格   table标...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作